feat(desktop): improve local folder settings

Sg312 · Sg312 · commit 31547132bd79 · 2026-07-22T18:04:42.000-07:00
diff --git a/apps/desktop/src/main/local-filesystem.test.ts b/apps/desktop/src/main/local-filesystem.test.ts
@@ -55,10 +55,12 @@ describe('LocalFilesystemService', () => {
     })
   })
 
-  it('returns an opaque mount URI and never exposes the host path', async () => {
+  it('returns an opaque mount URI plus a display path for trusted UI', async () => {
     const granted = await mount(service)
     expect(granted.uri).toMatch(/^localfs:\/\/[^/]+\/$/)
-    expect(JSON.stringify(granted)).not.toContain(root)
+    // The tmp root is outside the home directory, so the display path is the
+    // canonical absolute path; paths under home render home-relative.
+    expect(granted.path).toBe(await realpath(root))
 
     const listData = dataOf(await service.handle({ operation: 'list_mounts' }))
     expect(listData).toEqual({ mounts: [granted] })
diff --git a/apps/desktop/src/main/local-filesystem.ts b/apps/desktop/src/main/local-filesystem.ts
@@ -1,4 +1,5 @@
 import { lstat, readdir, readFile, realpath, stat } from 'node:fs/promises'
+import { homedir } from 'node:os'
 import { basename, isAbsolute, resolve, sep } from 'node:path'
 import type {
   LocalFilesystemData,
@@ -94,6 +95,20 @@ function localUri(mountId: string, relativePath = ''): string {
   return `localfs://${mountId}/${encodedPath}`
 }
 
+/**
+ * Home-relative display form of a granted directory's host path
+ * (`/Users/me/Documents/Notes` -> `~/Documents/Notes`). Shown only in trusted
+ * desktop UI; agent tool results stay limited to opaque localfs:// URIs.
+ */
+function displayPath(rootPath: string): string {
+  const home = homedir()
+  if (rootPath === home) return '~'
+  if (home && rootPath.startsWith(`${home}${sep}`)) {
+    return `~${rootPath.slice(home.length)}`
+  }
+  return rootPath
+}
+
 function parsePositiveInteger(value: unknown, name: string, fallback: number, max: number): number {
   if (value === undefined) return fallback
   if (!Number.isInteger(value) || (value as number) < 1 || (value as number) > max) {
@@ -342,6 +357,7 @@ export class LocalFilesystemService {
       id: mount.id,
       name: mount.name,
       uri: mount.uri,
+      path: displayPath(mount.rootPath),
       remembered: mount.remembered,
     }
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/desktop/desktop.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/desktop/desktop.tsx
@@ -7,21 +7,13 @@ import type {
   LocalFilesystemMount,
   LocalFilesystemResponse,
 } from '@sim/desktop-bridge'
-import {
-  Chip,
-  ChipConfirmModal,
-  Label,
-  Switch,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-  toast,
-} from '@sim/emcn'
+import { Chip, ChipConfirmModal, Label, Switch, toast } from '@sim/emcn'
+import { Folder } from '@sim/emcn/icons'
 import { useParams, useRouter } from 'next/navigation'
 import { getDesktopBridge } from '@/lib/desktop'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 function getMounts(response: LocalFilesystemResponse): LocalFilesystemMount[] | null {
@@ -38,14 +30,10 @@ interface PreferenceRowProps {
 
 function PreferenceRow({ id, label, checked, disabled, onCheckedChange }: PreferenceRowProps) {
   return (
-    <TableRow>
-      <TableCell>
-        <Label htmlFor={id}>{label}</Label>
-      </TableCell>
-      <TableCell>
-        <Switch id={id} checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} />
-      </TableCell>
-    </TableRow>
+    <div className='flex items-center justify-between'>
+      <Label htmlFor={id}>{label}</Label>
+      <Switch id={id} checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} />
+    </div>
   )
 }
 
@@ -142,98 +130,98 @@ export function Desktop() {
     <>
       <SettingsPanel>
         <SettingsSection label='Notifications'>
-          <Table>
-            <TableBody>
-              <PreferenceRow
-                id='desktop-notifications'
-                label='Enable desktop notifications'
-                checked={preferences.notificationsEnabled}
-                disabled={pendingPreference !== null}
-                onCheckedChange={(checked) =>
-                  void updatePreference('notificationsEnabled', checked)
-                }
-              />
-              <PreferenceRow
-                id='desktop-notification-sounds'
-                label='Play notification sounds'
-                checked={preferences.notificationSounds}
-                disabled={notificationsDisabled || pendingPreference !== null}
-                onCheckedChange={(checked) => void updatePreference('notificationSounds', checked)}
-              />
-              <PreferenceRow
-                id='desktop-notifications-unfocused'
-                label="Notify only when Sim isn't focused"
-                checked={preferences.notificationsOnlyWhenUnfocused}
-                disabled={notificationsDisabled || pendingPreference !== null}
-                onCheckedChange={(checked) =>
-                  void updatePreference('notificationsOnlyWhenUnfocused', checked)
-                }
-              />
-            </TableBody>
-          </Table>
+          <div className='flex flex-col gap-3'>
+            <PreferenceRow
+              id='desktop-notifications'
+              label='Enable desktop notifications'
+              checked={preferences.notificationsEnabled}
+              disabled={pendingPreference !== null}
+              onCheckedChange={(checked) => void updatePreference('notificationsEnabled', checked)}
+            />
+            <PreferenceRow
+              id='desktop-notification-sounds'
+              label='Play notification sounds'
+              checked={preferences.notificationSounds}
+              disabled={notificationsDisabled || pendingPreference !== null}
+              onCheckedChange={(checked) => void updatePreference('notificationSounds', checked)}
+            />
+            <PreferenceRow
+              id='desktop-notifications-unfocused'
+              label="Notify only when Sim isn't focused"
+              checked={preferences.notificationsOnlyWhenUnfocused}
+              disabled={notificationsDisabled || pendingPreference !== null}
+              onCheckedChange={(checked) =>
+                void updatePreference('notificationsOnlyWhenUnfocused', checked)
+              }
+            />
+          </div>
         </SettingsSection>
 
         <SettingsSection label='App behavior'>
-          <Table>
-            <TableBody>
-              <PreferenceRow
-                id='desktop-launch-at-login'
-                label='Launch Sim at login'
-                checked={preferences.launchAtLogin}
-                disabled={pendingPreference !== null}
-                onCheckedChange={(checked) => void updatePreference('launchAtLogin', checked)}
-              />
-            </TableBody>
-          </Table>
+          <div className='flex flex-col gap-3'>
+            <PreferenceRow
+              id='desktop-launch-at-login'
+              label='Launch Sim at login'
+              checked={preferences.launchAtLogin}
+              disabled={pendingPreference !== null}
+              onCheckedChange={(checked) => void updatePreference('launchAtLogin', checked)}
+            />
+            <PreferenceRow
+              id='desktop-auto-download-updates'
+              label='Automatically download updates'
+              checked={preferences.autoDownloadUpdates}
+              disabled={pendingPreference !== null}
+              onCheckedChange={(checked) => void updatePreference('autoDownloadUpdates', checked)}
+            />
+          </div>
         </SettingsSection>
 
         <SettingsSection
-          label='Files'
+          label='Local folders'
           action={
             <Chip onClick={() => void addFolder()} disabled={mountMutationPending}>
               Add folder
             </Chip>
           }
         >
           {mounts.length === 0 ? (
-            <SettingsEmptyState variant='inline'>No folders added.</SettingsEmptyState>
+            <SettingsEmptyState variant='inline'>
+              No folder access granted. Chat can only read folders you add here.
+            </SettingsEmptyState>
           ) : (
-            <Table>
-              <TableBody>
-                {mounts.map((mount) => (
-                  <TableRow key={mount.id}>
-                    <TableCell>{mount.name}</TableCell>
-                    <TableCell>{mount.uri}</TableCell>
-                    <TableCell>
+            <div className='flex flex-col gap-2'>
+              {mounts.map((mount) => (
+                <SettingsResourceRow
+                  key={mount.id}
+                  icon={<Folder />}
+                  title={mount.name}
+                  description={mount.path}
+                  trailing={
+                    <div className='flex flex-shrink-0 items-center gap-2'>
+                      {!mount.remembered && (
+                        <span className='text-[var(--text-muted)] text-caption'>
+                          Until app restarts
+                        </span>
+                      )}
                       <Chip onClick={() => setMountToForget(mount)}>Revoke</Chip>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                    </div>
+                  }
+                />
+              ))}
+            </div>
           )}
         </SettingsSection>
-
-        <SettingsSection label='Updates'>
-          <Table>
-            <TableBody>
-              <PreferenceRow
-                id='desktop-auto-download-updates'
-                label='Automatically download updates'
-                checked={preferences.autoDownloadUpdates}
-                disabled={pendingPreference !== null}
-                onCheckedChange={(checked) => void updatePreference('autoDownloadUpdates', checked)}
-              />
-            </TableBody>
-          </Table>
-        </SettingsSection>
       </SettingsPanel>
 
       <ChipConfirmModal
         open={mountToForget !== null}
         onOpenChange={(open) => !open && setMountToForget(null)}
         title='Revoke folder access'
-        text={`Sim will no longer be able to access ${mountToForget?.name ?? 'this folder'}.`}
+        text={[
+          'Sim will no longer be able to read ',
+          { text: mountToForget?.name ?? 'this folder', bold: true },
+          '. You can grant access again at any time.',
+        ]}
         confirm={{
           label: 'Revoke access',
           pending: mountMutationPending,
diff --git a/apps/sim/lib/copilot/tools/client/local-filesystem.test.ts b/apps/sim/lib/copilot/tools/client/local-filesystem.test.ts
@@ -44,7 +44,7 @@ describe('executeLocalFilesystemTool', () => {
     mockReportCompletion.mockResolvedValue(undefined)
   })
 
-  it('executes read-only tools through the desktop bridge and reports the result', async () => {
+  it('executes read-only tools through the desktop bridge and strips host paths from the result', async () => {
     localFilesystem.mockResolvedValue({
       ok: true,
       data: {
@@ -53,6 +53,7 @@ describe('executeLocalFilesystemTool', () => {
             id: 'mount-1',
             name: 'project',
             uri: 'localfs://mount-1/',
+            path: '~/code/project',
             remembered: true,
           },
         ],
@@ -80,6 +81,41 @@ describe('executeLocalFilesystemTool', () => {
     })
   })
 
+  it('strips the host path from a fresh mount_directory grant before reporting it', async () => {
+    localFilesystem.mockResolvedValue({
+      ok: true,
+      data: {
+        mount: {
+          id: 'mount-2',
+          name: 'Desktop',
+          uri: 'localfs://mount-2/',
+          path: '~/Desktop',
+          remembered: true,
+        },
+        cancelled: false,
+      },
+    })
+
+    executeLocalFilesystemTool('tool-mount', 'local_mount_directory', {}, { workspaceId: 'ws-1' })
+
+    await vi.waitFor(() => {
+      expect(mockReportCompletion).toHaveBeenCalledWith(
+        'tool-mount',
+        'success',
+        'Local filesystem tool completed.',
+        {
+          mount: {
+            id: 'mount-2',
+            name: 'Desktop',
+            uri: 'localfs://mount-2/',
+            remembered: true,
+          },
+          cancelled: false,
+        }
+      )
+    })
+  })
+
   it('forgets a remembered mount through the desktop bridge', async () => {
     localFilesystem.mockResolvedValue({
       ok: true,
diff --git a/apps/sim/lib/copilot/tools/client/local-filesystem.ts b/apps/sim/lib/copilot/tools/client/local-filesystem.ts
@@ -82,6 +82,30 @@ function successfulData(response: LocalFilesystemResponse): LocalFilesystemData
   return response.data
 }
 
+/**
+ * Mount objects carry a human-readable host `path` for trusted desktop UI
+ * (the Desktop settings page). Tool results are forwarded to the copilot
+ * backend, which must only ever see display names and opaque localfs:// URIs,
+ * so the host path is dropped here before the completion report.
+ */
+function withoutHostPaths(data: LocalFilesystemData): LocalFilesystemData {
+  if ('mount' in data) {
+    return {
+      ...data,
+      mount: data.mount ? omitPath(data.mount) : data.mount,
+    }
+  }
+  if ('mounts' in data) {
+    return { ...data, mounts: data.mounts.map(omitPath) }
+  }
+  return data
+}
+
+function omitPath<T extends { path?: string }>(mount: T): Omit<T, 'path'> {
+  const { path: _path, ...rest } = mount
+  return rest
+}
+
 async function stageLocalFile(
   args: Record<string, unknown>,
   context: LocalFilesystemExecutionContext
@@ -149,7 +173,9 @@ async function execute(
   if (toolName === LOCAL_FILESYSTEM_TOOL_NAMES.stageFile) {
     return stageLocalFile(args, context)
   }
-  return successfulData(await bridge().localFilesystem(requestForTool(toolName, args)))
+  return withoutHostPaths(
+    successfulData(await bridge().localFilesystem(requestForTool(toolName, args)))
+  )
 }
 
 export function executeLocalFilesystemTool(
diff --git a/packages/desktop-bridge/src/index.ts b/packages/desktop-bridge/src/index.ts
@@ -78,6 +78,14 @@ export interface LocalFilesystemMount {
   id: string
   name: string
   uri: string
+  /**
+   * Human-readable host path of the granted directory (home-relative, e.g.
+   * `~/Documents/Notes`), for display in trusted desktop UI such as the
+   * settings page. Optional so a newer web deployment remains compatible with
+   * older installed shells. Never forward this to the copilot backend — tool
+   * results must stay limited to opaque `localfs://` URIs.
+   */
+  path?: string
   /** True when the encrypted grant will be restored after restarting the desktop app. */
   remembered: boolean
 }
