Stabilize sidebar file tree rendering

- Keep the workspace file tree mounted when collapsed to avoid flicker
- Make browser test runner resolve Vitest from the package config location
- Seed onboarding state in browser tests to match the app flow

Author: BunsDev

apps/web/src/components/ChatView.browser.tsx

@@ -37,6 +37,7 @@ const PROJECT_ID = "project-1" as ProjectId;
 const NOW_ISO = "2026-03-04T12:00:00.000Z";
 const BASE_TIME_MS = Date.parse(NOW_ISO);
 const ATTACHMENT_SVG = "<svg xmlns='http://www.w3.org/2000/svg' width='120' height='300'></svg>";
+const ONBOARDING_STORAGE_KEY = "okcode:onboarding-completed:v1";
 
 interface WsRequestEnvelope {
   id: string;
@@ -826,6 +827,7 @@ describe("ChatView timeline estimator parity (full app)", () => {
   beforeEach(async () => {
     await setViewport(DEFAULT_VIEWPORT);
     localStorage.clear();
+    localStorage.setItem(ONBOARDING_STORAGE_KEY, "true");
     document.body.innerHTML = "";
     wsRequests.length = 0;
     useComposerDraftStore.setState({

apps/web/src/components/Sidebar.test.ts

@@ -0,0 +1,13 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+describe("Sidebar file tree mounting", () => {
+  it("keeps the workspace file tree mounted when the files section is collapsed", () => {
+    const src = readFileSync(resolve(import.meta.dirname, "./Sidebar.tsx"), "utf8");
+
+    expect(src).toContain("<WorkspaceFileTree");
+    expect(src).toContain('className={cn(filesCollapsedByProject.has(project.id) && "hidden")}');
+    expect(src).not.toContain("!filesCollapsedByProject.has(project.id) && (");
+  });
+});

apps/web/src/components/Sidebar.tsx

@@ -1680,13 +1680,12 @@ export default function Sidebar() {
                 <FolderIcon className="size-3 shrink-0" />
                 <span>Files</span>
               </button>
-              {!filesCollapsedByProject.has(project.id) && (
-                <WorkspaceFileTree
-                  key={project.id}
-                  cwd={activeWorkspaceCwd}
-                  resolvedTheme={resolvedTheme}
-                />
-              )}
+              <WorkspaceFileTree
+                key={project.id}
+                cwd={activeWorkspaceCwd}
+                resolvedTheme={resolvedTheme}
+                className={cn(filesCollapsedByProject.has(project.id) && "hidden")}
+              />
             </div>
           ) : null}
         </CollapsibleContent>

scripts/run-browser-tests.mjs

@@ -2,6 +2,7 @@
 
 import { readdirSync, statSync } from "node:fs";
 import { spawn } from "node:child_process";
+import { createRequire } from "node:module";
 import path from "node:path";
 import process from "node:process";
 
@@ -28,16 +29,30 @@ function listBrowserTests(rootDir) {
   return files.toSorted();
 }
 
-function runTestFile({ configPath, filePath, cwd, timeoutMs }) {
+function resolveVitestBin(cwd, configPath) {
+  const packageDir = path.dirname(configPath);
+  const requireFromPackage = createRequire(path.join(packageDir, "package.json"));
+  const vitestPackageJsonPath = requireFromPackage.resolve("vitest/package.json");
+  const vitestPackageDir = path.dirname(vitestPackageJsonPath);
+  const vitestPackageJson = requireFromPackage(vitestPackageJsonPath);
+  const vitestBinRelative =
+    typeof vitestPackageJson.bin === "string"
+      ? vitestPackageJson.bin
+      : (vitestPackageJson.bin?.vitest ?? "./vitest.mjs");
+
+  return path.resolve(vitestPackageDir, vitestBinRelative);
+}
+
+function runTestFile({ configPath, filePath, cwd, timeoutMs, vitestBin }) {
   return new Promise((resolve) => {
-    const vitestBin = path.join(cwd, "node_modules", "vitest", "vitest.mjs");
-    const args = [vitestBin, "run", "--config", configPath, filePath];
-    const relativeFile = path.relative(cwd, filePath);
+    const configDir = path.dirname(configPath);
+    const args = [vitestBin, "run", "--config", configPath, path.relative(configDir, filePath)];
+    const relativeFile = path.relative(configDir, filePath);
 
     console.log(`\n[browser] Running ${relativeFile}`);
 
     const child = spawn(process.execPath, args, {
-      cwd,
+      cwd: configDir,
       stdio: "inherit",
       env: process.env,
     });
@@ -76,6 +91,7 @@ async function main() {
     timeoutArg && Number.isFinite(Number(timeoutArg)) ? Number(timeoutArg) : DEFAULT_TIMEOUT_MS;
 
   const configPath = path.resolve(cwd, configArg);
+  const vitestBin = resolveVitestBin(cwd, configPath);
   const browserTestRoot = path.resolve(path.dirname(configPath), "src", "components");
   const browserTests = listBrowserTests(browserTestRoot);
 
@@ -92,6 +108,7 @@ async function main() {
       filePath,
       cwd,
       timeoutMs,
+      vitestBin,
     });
 
     if (!result.ok) {