From 963cbe9a5c4c71648cfb5972216aca99897397e2 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 9 Jun 2026 18:34:17 +0000
Subject: [PATCH] Stabilize file viewer folder transitions

---
 .../components/FileViewerSheet.copy.test.tsx  | 12 +++++++++++
 ui/src/components/FileViewerSheet.tsx         |  6 +++---
 .../components/WorkspaceFileBrowser.test.tsx  | 21 +++++++++++++++++++
 ui/src/components/WorkspaceFileBrowser.tsx    |  5 ++++-
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/FileViewerSheet.copy.test.tsx b/ui/src/components/FileViewerSheet.copy.test.tsx
index 167a1a20de6..7aaae27a438 100644
--- a/ui/src/components/FileViewerSheet.copy.test.tsx
+++ b/ui/src/components/FileViewerSheet.copy.test.tsx
@@ -151,4 +151,16 @@ describe("FileViewerSheet copy actions", () => {
     expect(separator).not.toBeNull();
     expect(separator?.getAttribute("aria-valuenow")).toBe("288");
   });
+
+  it("keeps split panes unframed so file selection does not shift the browser", () => {
+    renderSheet();
+    const separator = document.body.querySelector('[role="separator"][aria-label="Resize file tree"]');
+    const browserPane = separator?.previousElementSibling;
+    const previewPane = separator?.nextElementSibling;
+
+    expect(browserPane?.className).not.toContain("border");
+    expect(browserPane?.className).not.toContain("rounded");
+    expect(previewPane?.className).not.toContain("border");
+    expect(previewPane?.className).not.toContain("rounded");
+  });
 });
diff --git a/ui/src/components/FileViewerSheet.tsx b/ui/src/components/FileViewerSheet.tsx
index c50ac3c9457..33f18e2b1a6 100644
--- a/ui/src/components/FileViewerSheet.tsx
+++ b/ui/src/components/FileViewerSheet.tsx
@@ -743,7 +743,7 @@ export function FileViewerSheet({
           {state ? (
             <div className="flex min-h-0 flex-1 gap-3 bg-muted/30 p-3">
               <aside
-                className="hidden min-h-0 shrink-0 overflow-hidden rounded-md border border-border bg-background sm:flex"
+                className="hidden min-h-0 shrink-0 overflow-hidden sm:flex"
                 style={{ width: fileTreeWidth }}
               >
                 <WorkspaceFileBrowser
@@ -753,7 +753,7 @@ export function FileViewerSheet({
                   onOpen={handleBrowseOpen}
                   onBrowseStateChange={cameFromBrowse ? handleBrowseStateChange : undefined}
                   initialQuery={cameFromBrowse ? viewer.query : null}
-                  initialFolderPath={cameFromBrowse ? viewer.folderPath : null}
+                  initialFolderPath={cameFromBrowse ? viewer.folderPath : undefined}
                   initialProjectId={state.projectId ?? (cameFromBrowse ? viewer.browseProjectId : null)}
                   initialWorkspaceId={state.workspaceId ?? (cameFromBrowse ? viewer.browseWorkspaceId : null)}
                   autoFocusSearch={false}
@@ -776,7 +776,7 @@ export function FileViewerSheet({
                 onKeyDown={handleResizeKeyDown}
                 className="hidden w-1 shrink-0 cursor-col-resize rounded-full bg-border transition-colors hover:bg-muted-foreground/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:block"
               />
-              <div className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-background">
+              <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
                 <FileViewerBody
                   resolveQuery={resolveQuery}
                   contentQuery={contentQuery}
diff --git a/ui/src/components/WorkspaceFileBrowser.test.tsx b/ui/src/components/WorkspaceFileBrowser.test.tsx
index 190b7b78bae..13fa033a87a 100644
--- a/ui/src/components/WorkspaceFileBrowser.test.tsx
+++ b/ui/src/components/WorkspaceFileBrowser.test.tsx
@@ -298,6 +298,27 @@ describe("WorkspaceFileBrowser", () => {
     expect(container.textContent).toContain("commands.md");
   });
 
+  it("treats an explicit null initial folder as the workspace root", () => {
+    useQueryMock.mockReturnValue(ok(availableResponse([createItem({
+      title: "README.md",
+      relativePath: "README.md",
+      displayPath: "README.md",
+    })])));
+
+    renderBrowser(vi.fn(), {
+      compact: true,
+      autoFocusSearch: false,
+      initialFolderPath: null,
+      selectedPath: "docs/reference/cli/commands.md",
+    });
+
+    const listCall = useQueryMock.mock.calls.find(([options]) => options.queryKey?.[3] === "list");
+    expect(listCall?.[0].queryKey[4]).toMatchObject({
+      mode: "all",
+      path: null,
+    });
+  });
+
   it("preserves an initial search instead of narrowing to the selected file's parent folder", () => {
     useQueryMock.mockReturnValue(ok(availableResponse([createItem({
       title: "FileViewerSheet.tsx",
diff --git a/ui/src/components/WorkspaceFileBrowser.tsx b/ui/src/components/WorkspaceFileBrowser.tsx
index 24137d69b08..dd1ede33aed 100644
--- a/ui/src/components/WorkspaceFileBrowser.tsx
+++ b/ui/src/components/WorkspaceFileBrowser.tsx
@@ -393,7 +393,10 @@ export function WorkspaceFileBrowser({
     initialProjectId && initialWorkspaceId ? "other" : "current";
   const workspace: WorkspaceFileSelector = "auto";
   const selectedParentPath = useMemo(() => parentFolderPath(selectedPath), [selectedPath]);
-  const effectiveInitialFolderPath = initialFolderPath ?? (initialQuery?.trim() ? null : selectedParentPath);
+  const effectiveInitialFolderPath = useMemo(() => {
+    if (typeof initialFolderPath !== "undefined") return initialFolderPath;
+    return initialQuery?.trim() ? null : selectedParentPath;
+  }, [initialFolderPath, initialQuery, selectedParentPath]);
   const [selectedProjectId, setSelectedProjectId] = useState<string | null>(initialProjectId ?? null);
   const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(initialWorkspaceId ?? null);
   const [folderPath, setFolderPath] = useState<string | null>(effectiveInitialFolderPath ?? null);