fix(files): root file browser at repo directory instead of display name (#339)

Author: chriswritescode-dev

frontend/src/components/file-browser/FileBrowserSheet.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, memo, useCallback, useRef } from 'react'
 import { FileBrowser, type FileBrowserHandle } from './FileBrowser'
+import { getRepoRelativeDisplayPath } from './display-path'
 import { Button } from '@/components/ui/button'
 import { PathDisplay } from '@/components/ui/path-display'
 import { FullscreenSheet, FullscreenSheetHeader, FullscreenSheetContent } from '@/components/ui/fullscreen-sheet'
@@ -71,28 +72,9 @@ export const FileBrowserSheet = memo(function FileBrowserSheet({ isOpen, onClose
       return
     }
 
-    if (!info.currentPath || info.currentPath === '.' || info.currentPath === '') {
-      setDisplayPath('/')
-      setCurrentPath(info.currentPath || '.')
-      return
-    }
-
-    setCurrentPath(info.currentPath)
-
-    const pathParts = info.currentPath.split('/').filter(Boolean)
-
-    if (repoName) {
-      const repoIndex = pathParts.findIndex(p => p === repoName || p.startsWith(repoName + '-'))
-      if (repoIndex >= 0) {
-        const subPath = pathParts.slice(repoIndex + 1)
-        setDisplayPath(subPath.length > 0 ? '/' + subPath.join('/') : '/')
-      } else {
-        setDisplayPath('/' + pathParts.join('/'))
-      }
-    } else {
-      setDisplayPath('/' + pathParts.join('/'))
-    }
-  }, [allowNavigateAboveBase, repoName])
+    setCurrentPath(info.currentPath || '.')
+    setDisplayPath(getRepoRelativeDisplayPath(info.currentPath || '.', normalizedBasePath))
+  }, [allowNavigateAboveBase, normalizedBasePath])
 
   const handleDownloadDirectory = useCallback(async (options: { includeGit?: boolean, includePaths?: string[] }) => {
     if (!currentPath) return

frontend/src/components/file-browser/display-path.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { getRepoRelativeDisplayPath } from './display-path'
+
+describe('getRepoRelativeDisplayPath', () => {
+  it('returns root when current path equals the base path', () => {
+    expect(getRepoRelativeDisplayPath('my-repo', 'my-repo')).toBe('/')
+  })
+
+  it('returns root for the assistant directory regardless of display-name casing', () => {
+    expect(getRepoRelativeDisplayPath('assistant', 'assistant')).toBe('/')
+  })
+
+  it('strips the base path prefix for subdirectories', () => {
+    expect(getRepoRelativeDisplayPath('assistant/.opencode/skills', 'assistant')).toBe('/.opencode/skills')
+    expect(getRepoRelativeDisplayPath('my-repo/src', 'my-repo')).toBe('/src')
+  })
+
+  it('handles worktree directories with branch suffixes', () => {
+    expect(getRepoRelativeDisplayPath('my-repo-feature', 'my-repo-feature')).toBe('/')
+    expect(getRepoRelativeDisplayPath('my-repo-feature/src', 'my-repo-feature')).toBe('/src')
+  })
+
+  it('treats "." as the workspace root base', () => {
+    expect(getRepoRelativeDisplayPath('.', '.')).toBe('/')
+    expect(getRepoRelativeDisplayPath('some-repo', '.')).toBe('/some-repo')
+  })
+
+  it('falls back to the full path when outside the base path', () => {
+    expect(getRepoRelativeDisplayPath('other-repo/file', 'assistant')).toBe('/other-repo/file')
+  })
+})

frontend/src/components/file-browser/display-path.ts

@@ -0,0 +1,7 @@
+export function getRepoRelativeDisplayPath(currentPath: string, basePath: string): string {
+  const baseParts = basePath === '.' ? [] : basePath.split('/').filter(Boolean)
+  const pathParts = currentPath === '.' ? [] : currentPath.split('/').filter(Boolean)
+  const isWithinBase = baseParts.every((part, index) => pathParts[index] === part)
+  const subParts = isWithinBase ? pathParts.slice(baseParts.length) : pathParts
+  return subParts.length > 0 ? '/' + subParts.join('/') : '/'
+}

frontend/src/pages/AssistantRedirect.tsx

@@ -37,7 +37,6 @@ export function AssistantRedirect() {
   })
 
   const assistantDirectory = repo?.fullPath
-  const assistantFileBasePath = assistantDirectory?.split('/').filter(Boolean).at(-1)
 
   useSSE(opcodeUrl, assistantDirectory)
 
@@ -82,7 +81,7 @@ export function AssistantRedirect() {
       </div>
       {assistantDirectory && (
         <>
-          <FileBrowserSheet isOpen={fileBrowserOpen} onClose={() => setFileBrowserOpen(false)} basePath={assistantFileBasePath} repoName="Assistant" repoId={repoId} />
+          <FileBrowserSheet isOpen={fileBrowserOpen} onClose={() => setFileBrowserOpen(false)} basePath={repo?.localPath} repoName="Assistant" repoId={repoId} />
           <RepoMcpDialog open={mcpDialogOpen} onOpenChange={setMcpDialogOpen} directory={assistantDirectory} />
           {assistantDirectory && opcodeUrl ? (
             <RepoSkillsDialog

frontend/src/pages/SessionDetail.tsx

@@ -206,8 +206,7 @@ export function SessionDetail() {
   }, [lastAssistantMessage, session?.time?.compacting, sessionStatus.type])
   const hasIncompleteMessages = lastAssistantMessage ? !('completed' in lastAssistantMessage.info.time && lastAssistantMessage.info.time.completed) : false;
   const isStreamingResponse = hasIncompleteMessages && isSessionActive;
-  const assistantFileBasePath = repo?.fullPath.split('/').filter(Boolean).at(-1);
-  const workspaceBasePath = (isAssistantSession ? assistantFileBasePath : repo?.localPath) ?? repo?.localPath;
+  const workspaceBasePath = repo?.localPath;
 
   useEffect(() => {
     setActivePromptFileBasePath(sessionDirectory ? workspaceBasePath ?? null : null)