fix(ui): gate desktop privileges by host and window context (#347)

Don't let remote server windows use local features like local file browser etc

packages/ui/src/components/folder-selection-view.tsx

@@ -5,7 +5,7 @@ import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, S
 import { useConfig } from "../stores/preferences"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
-import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions"
+import { openNativeFolderDialog, supportsNativeDialogsInCurrentWindow } from "../lib/native/native-functions"
 import { useFolderDrop } from "../lib/hooks/use-folder-drop"
 import VersionPill from "./version-pill"
 import { DiscordSymbolIcon, GitHubMarkIcon } from "./brand-icons"
@@ -16,7 +16,7 @@ import { showAlertDialog } from "../stores/alerts"
 import { openSettings, settingsOpen } from "../stores/settings-screen"
 import { openExternalUrl } from "../lib/external-url"
 import { serverApi } from "../lib/api-client"
-import { runtimeEnv } from "../lib/runtime-env"
+import { canOpenRemoteWindows, isTauriHost } from "../lib/runtime-env"
 import { openRemoteServerWindow } from "../lib/native/remote-window"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
@@ -58,7 +58,6 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const [serverDialogError, setServerDialogError] = createSignal<string | null>(null)
   const [isSavingServer, setIsSavingServer] = createSignal(false)
   const [connectingServerId, setConnectingServerId] = createSignal<string | null>(null)
-  const nativeDialogsAvailable = supportsNativeDialogs()
   let recentListRef: HTMLDivElement | undefined
 
   type LanguageOption = { value: Locale; label: string }
@@ -78,6 +77,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const folders = () => recentFolders()
   const serverList = () => remoteServers()
   const isLoading = () => Boolean(props.isLoading)
+  const canUseRemoteServerWindows = () => canOpenRemoteWindows()
 
   function getActiveListLength() {
     return activeTab() === "local" ? folders().length : serverList().length
@@ -231,6 +231,10 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
   createEffect(() => {
     activeTab()
+    if (!canUseRemoteServerWindows() && activeTab() !== "local") {
+      setActiveTab("local")
+      return
+    }
     setSelectedIndex(0)
     setFocusMode("recent")
   })
@@ -305,11 +309,16 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   }
 
   function openServerDialog() {
+    if (!canUseRemoteServerWindows()) return
     resetServerDialog()
     setIsServerDialogOpen(true)
   }
 
   async function probeAndOpenServer(input: { id?: string; name: string; baseUrl: string; skipTlsVerify: boolean }, openWindow: boolean) {
+    if (openWindow && !canUseRemoteServerWindows()) {
+      throw new Error("Remote server windows can only be opened from a local desktop window")
+    }
+
     const trimmedName = input.name.trim()
     const trimmedUrl = input.baseUrl.trim()
     if (!trimmedName || !trimmedUrl) {
@@ -334,7 +343,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
     if (openWindow) {
       const remoteProxySession =
-        runtimeEnv.host === "tauri" && profile.skipTlsVerify && profile.baseUrl.startsWith("https://")
+        isTauriHost() && profile.skipTlsVerify && profile.baseUrl.startsWith("https://")
           ? await serverApi.createRemoteProxySession({
               baseUrl: profile.baseUrl,
               skipTlsVerify: profile.skipTlsVerify,
@@ -379,6 +388,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   }
 
   async function handleConnectSavedServer(id: string) {
+    if (!canUseRemoteServerWindows()) return
     const target = remoteServers().find((entry) => entry.id === id)
     if (!target || connectingServerId()) return
     setConnectingServerId(id)
@@ -397,7 +407,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   async function handleBrowse() {
     if (isLoading()) return
     setFocusMode("new")
-    if (nativeDialogsAvailable) {
+    if (supportsNativeDialogsInCurrentWindow()) {
       const fallbackPath = folders()[0]?.path
       const selected = await openNativeFolderDialog({
         title: t("folderSelection.dialog.title"),
@@ -554,15 +564,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             >
               <Settings class="w-4 h-4" />
             </button>
-            <button
-              type="button"
-              class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
-              onClick={() => openSettings("remote")}
-              aria-label={t("instanceTabs.remote.ariaLabel")}
-              title={t("instanceTabs.remote.title")}
-            >
-              <MonitorUp class="w-4 h-4" />
-            </button>
+            <Show when={canUseRemoteServerWindows()}>
+              <button
+                type="button"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+                onClick={() => openSettings("remote")}
+                aria-label={t("instanceTabs.remote.ariaLabel")}
+                title={t("instanceTabs.remote.title")}
+              >
+                <MonitorUp class="w-4 h-4" />
+              </button>
+            </Show>
             <Show when={props.onClose}>
               <button
                 type="button"
@@ -636,7 +648,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               <div class="order-1 lg:order-2 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden">
                 <div class="panel flex flex-col flex-1 min-h-0">
                   <div class="panel-header !gap-0 !p-0">
-                    <div class="grid grid-cols-2 gap-0 overflow-hidden border border-base rounded-t-lg rounded-b-none">
+                    <div class={`grid ${canUseRemoteServerWindows() ? "grid-cols-2" : "grid-cols-1"} gap-0 overflow-hidden border border-base rounded-t-lg rounded-b-none`}>
                       <button
                         type="button"
                         class="border-r border-base px-4 py-3 text-left transition-colors"
@@ -671,35 +683,37 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                           )}
                         </p>
                       </button>
-                      <button
-                        type="button"
-                        class="px-4 py-3 text-left transition-colors"
-                        classList={{
-                          "text-primary": activeTab() === "servers",
-                          "text-muted hover:text-secondary": activeTab() !== "servers",
-                        }}
-                        style={{
-                          "background-color": "var(--surface-secondary)",
-                        }}
-                        onClick={() => setActiveTab("servers")}
-                      >
-                        <div
-                          class="panel-title text-base"
-                          style={{
-                            color: activeTab() === "servers" ? "var(--text-primary)" : "var(--text-secondary)",
+                      <Show when={canUseRemoteServerWindows()}>
+                        <button
+                          type="button"
+                          class="px-4 py-3 text-left transition-colors"
+                          classList={{
+                            "text-primary": activeTab() === "servers",
+                            "text-muted hover:text-secondary": activeTab() !== "servers",
                           }}
-                        >
-                          {t("folderSelection.tabs.servers")}
-                        </div>
-                        <p
-                          class="panel-subtitle mt-1"
                           style={{
-                            color: activeTab() === "servers" ? "var(--text-muted)" : "var(--text-secondary)",
+                            "background-color": "var(--surface-secondary)",
                           }}
+                          onClick={() => setActiveTab("servers")}
                         >
-                          {t("folderSelection.servers.count", { count: remoteServers().length })}
-                        </p>
-                      </button>
+                          <div
+                            class="panel-title text-base"
+                            style={{
+                              color: activeTab() === "servers" ? "var(--text-primary)" : "var(--text-secondary)",
+                            }}
+                          >
+                            {t("folderSelection.tabs.servers")}
+                          </div>
+                          <p
+                            class="panel-subtitle mt-1"
+                            style={{
+                              color: activeTab() === "servers" ? "var(--text-muted)" : "var(--text-secondary)",
+                            }}
+                          >
+                            {t("folderSelection.servers.count", { count: remoteServers().length })}
+                          </p>
+                        </button>
+                      </Show>
                     </div>
                   </div>
 
@@ -707,23 +721,25 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     when={activeTab() === "local"}
                     fallback={
                       <Show
-                        when={remoteServers().length > 0}
+                        when={canUseRemoteServerWindows() && remoteServers().length > 0}
                         fallback={
-                          <div class="panel-empty-state flex-1">
-                            <div class="panel-empty-state-icon">
-                              <Globe class="w-12 h-12 mx-auto" />
+                          <Show when={canUseRemoteServerWindows()}>
+                            <div class="panel-empty-state flex-1">
+                              <div class="panel-empty-state-icon">
+                                <Globe class="w-12 h-12 mx-auto" />
+                              </div>
+                              <p class="panel-empty-state-title">{t("folderSelection.servers.empty.title")}</p>
+                              <p class="panel-empty-state-description">{t("folderSelection.servers.empty.description")}</p>
+                              <button
+                                type="button"
+                                class="button-primary mt-4 w-auto self-center inline-flex items-center justify-center gap-2 px-4"
+                                onClick={openServerDialog}
+                              >
+                                <Globe class="w-4 h-4" />
+                                <span>{t("folderSelection.actions.connectButton")}</span>
+                              </button>
                             </div>
-                            <p class="panel-empty-state-title">{t("folderSelection.servers.empty.title")}</p>
-                            <p class="panel-empty-state-description">{t("folderSelection.servers.empty.description")}</p>
-                            <button
-                              type="button"
-                              class="button-primary mt-4 w-auto self-center inline-flex items-center justify-center gap-2 px-4"
-                              onClick={openServerDialog}
-                            >
-                              <Globe class="w-4 h-4" />
-                              <span>{t("folderSelection.actions.connectButton")}</span>
-                            </button>
-                          </div>
+                          </Show>
                         }
                       >
                         <div
@@ -891,15 +907,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     </div>
                   </button>
 
-                  <button
-                    onClick={openServerDialog}
-                    class="button-primary w-full flex items-center justify-center text-sm"
-                  >
-                    <div class="flex items-center gap-2">
-                      <Globe class="w-4 h-4" />
-                      <span>{t("folderSelection.actions.connectButton")}</span>
-                    </div>
-                  </button>
+                  <Show when={canUseRemoteServerWindows()}>
+                    <button
+                      onClick={openServerDialog}
+                      class="button-primary w-full flex items-center justify-center text-sm"
+                    >
+                      <div class="flex items-center gap-2">
+                        <Globe class="w-4 h-4" />
+                        <span>{t("folderSelection.actions.connectButton")}</span>
+                      </div>
+                    </button>
+                  </Show>
                 </div>
 
                 {/* OpenCode settings section */}

packages/ui/src/components/instance-tabs.tsx

@@ -6,6 +6,7 @@ import { Plus, MonitorUp, Bell, BellOff, Settings } from "lucide-solid"
 import { keyboardRegistry } from "../lib/keyboard-registry"
 import { useI18n } from "../lib/i18n"
 import { isOsNotificationSupportedSync } from "../lib/os-notifications"
+import { canOpenRemoteWindows } from "../lib/runtime-env"
 import { useConfig } from "../stores/preferences"
 import { openSettings } from "../stores/settings-screen"
 import type { AppTabRecord } from "../stores/app-tabs"
@@ -99,14 +100,16 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               <Dynamic component={notificationIcon()} class="w-4 h-4" />
             </button>
 
-             <button
-               class="new-tab-button tab-remote-button"
-               onClick={() => openSettings("remote")}
-               title={t("instanceTabs.remote.title")}
-               aria-label={t("instanceTabs.remote.ariaLabel")}
-             >
-               <MonitorUp class="w-4 h-4" />
-             </button>
+             <Show when={canOpenRemoteWindows()}>
+               <button
+                 class="new-tab-button tab-remote-button"
+                 onClick={() => openSettings("remote")}
+                 title={t("instanceTabs.remote.title")}
+                 aria-label={t("instanceTabs.remote.ariaLabel")}
+               >
+                 <MonitorUp class="w-4 h-4" />
+               </button>
+             </Show>
           </div>
         </div>
       </div>

packages/ui/src/components/opencode-binary-selector.tsx

@@ -3,7 +3,7 @@ import { FolderOpen, Trash2, Check, AlertCircle, Loader2, Plus } from "lucide-so
 import { useConfig } from "../stores/preferences"
 import { serverApi } from "../lib/api-client"
 import FileSystemBrowserDialog from "./filesystem-browser-dialog"
-import { openNativeFileDialog, supportsNativeDialogs } from "../lib/native/native-functions"
+import { openNativeFileDialog, supportsNativeDialogsInCurrentWindow } from "../lib/native/native-functions"
 import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
@@ -38,7 +38,6 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
   const [versionInfo, setVersionInfo] = createSignal<Map<string, string>>(new Map<string, string>())
   const [validatingPaths, setValidatingPaths] = createSignal<Set<string>>(new Set<string>())
   const [isBinaryBrowserOpen, setIsBinaryBrowserOpen] = createSignal(false)
-  const nativeDialogsAvailable = supportsNativeDialogs()
  
   const binaries = () => opencodeBinaries()
 
@@ -139,7 +138,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
   async function handleBrowseBinary() {
     if (props.disabled) return
     setValidationError(null)
-    if (nativeDialogsAvailable) {
+    if (supportsNativeDialogsInCurrentWindow()) {
       const selected = await openNativeFileDialog({
         title: t("opencodeBinarySelector.dialog.title"),
       })

packages/ui/src/components/settings-screen.tsx

@@ -15,25 +15,33 @@ import { OpenCodeSettingsSection } from "./settings/opencode-settings-section"
 import { RemoteAccessSettingsSection } from "./settings/remote-access-settings-section"
 import { SpeechSettingsSection } from "./settings/speech-settings-section"
 import { SideCarsSettingsSection } from "./settings/sidecars-settings-section"
+import { canOpenRemoteWindows } from "../lib/runtime-env"
 
 export const SettingsScreen: Component = () => {
   const { t } = useI18n()
 
-  const sections = createMemo(() => [
-    { id: "appearance" as SettingsSectionId, icon: Paintbrush, label: t("settings.nav.appearance") },
-    { id: "notifications" as SettingsSectionId, icon: Bell, label: t("settings.nav.notifications") },
-    { id: "remote" as SettingsSectionId, icon: MonitorUp, label: t("settings.nav.remote") },
-    { id: "speech" as SettingsSectionId, icon: Volume2, label: t("settings.nav.speech") },
-    { id: "sidecars" as SettingsSectionId, icon: Globe, label: t("settings.nav.sidecars") },
-    { id: "opencode" as SettingsSectionId, icon: Terminal, label: t("settings.nav.opencode") },
-  ])
+  const sections = createMemo(() => {
+    const items = [
+      { id: "appearance" as SettingsSectionId, icon: Paintbrush, label: t("settings.nav.appearance") },
+      { id: "notifications" as SettingsSectionId, icon: Bell, label: t("settings.nav.notifications") },
+      { id: "speech" as SettingsSectionId, icon: Volume2, label: t("settings.nav.speech") },
+      { id: "sidecars" as SettingsSectionId, icon: Globe, label: t("settings.nav.sidecars") },
+      { id: "opencode" as SettingsSectionId, icon: Terminal, label: t("settings.nav.opencode") },
+    ]
+
+    if (canOpenRemoteWindows()) {
+      items.splice(2, 0, { id: "remote" as SettingsSectionId, icon: MonitorUp, label: t("settings.nav.remote") })
+    }
+
+    return items
+  })
 
   const renderSection = () => {
     switch (activeSettingsSection()) {
       case "notifications":
         return <NotificationsSettingsSection />
       case "remote":
-        return <RemoteAccessSettingsSection />
+        return canOpenRemoteWindows() ? <RemoteAccessSettingsSection /> : <AppearanceSettingsSection />
       case "speech":
         return <SpeechSettingsSection />
       case "sidecars":