build(deps): move the vitest family to 4.1.11

.gitignore

@@ -8,6 +8,8 @@ storybook-static/
 
 # Vitest browser-mode failure screenshots
 **/__screenshots__/
+# Vitest 4 writes failure screenshots/traces here as well, keyed by content hash.
+**/.vitest-attachments/
 
 # Rust / Tauri build output + generated files
 target/

apps/web/package.json

@@ -47,14 +47,15 @@
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/browser": "^3.2.7",
-    "@vitest/coverage-istanbul": "^3.2.7",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-istanbul": "^4.1.11",
     "playwright": "^1.61.0",
     "storybook": "^10.5.5",
     "tailwindcss": "^4.1.0",
     "typescript": "^6.0.3",
     "vite": "^7.0.0",
-    "vitest": "^3.2.7",
+    "vitest": "^4.1.11",
     "vitest-browser-react": "^1.0.0"
   }
 }

apps/web/src/components/app/AppShell/hooks/useProjectRemoval.hooks.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { Project } from '@/lib/bridge';

apps/web/src/components/app/SidebarUnified/SidebarUnified.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { ProjectSwitcherSurface } from '../Sidebar/Sidebar.types';

apps/web/src/components/board/BulkActionBar/BulkActionBar.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { makeTask, makeTaskActions } from '../_fixtures';

apps/web/src/components/board/DependencyEditor/DependencyEditor.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { makeTask, makeTaskActions } from '../_fixtures';

apps/web/src/components/board/IssueChip/IssueChip.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { afterEach, expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 // Spy only the chip's ONE bridge dependency (the browser open); everything else keeps its

apps/web/src/components/board/IssueClosedChip/IssueClosedChip.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { afterEach, expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 // Spy only the chip's ONE bridge dependency (the browser open); everything else — the

apps/web/src/components/board/NewTaskForm/NewTaskForm.test.tsx

@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { useEffect } from 'react';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { ProviderCapabilities } from '@nightcore/contracts';

apps/web/src/components/board/RunOrderPanel/RunOrderPanel.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { RunOrderProjection } from '@/lib/bridge';

apps/web/src/components/board/SessionComposer/SessionComposer.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import * as stories from './SessionComposer.stories';

apps/web/src/components/board/TaskCardTerminalChip/TaskCardTerminalChip.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { afterEach, expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { linkTaskToSession, resetTerminalLinksForTest } from '@/lib/terminal-links';

apps/web/src/components/board/TaskOverviewEditor/TaskOverviewEditor.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { makeTask } from '../_fixtures.task';

apps/web/src/components/board/WorktreeSwitcher/WorktreeSwitcher.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render, renderHook } from 'vitest-browser-react';
 
 import {

apps/web/src/components/council/CouncilReplay/CouncilReplay.test.tsx

@@ -1,6 +1,6 @@
-import { userEvent } from '@vitest/browser/context';
 import type { ReactNode } from 'react';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { killCouncil, resolveCouncilConverge, startCouncil } from '@/lib/bridge';

apps/web/src/components/harness/ApplyConfirmDialog/ApplyConfirmDialog.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import * as stories from './ApplyConfirmDialog.stories';

apps/web/src/components/new-project/NewProjectDialog/NewProjectDialog.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { projectNameFromPath } from './NewProjectDialog.hooks';

apps/web/src/components/prreview/PrFilterBar/PrFilterBar.test.tsx

@@ -1,6 +1,6 @@
-import { userEvent } from '@vitest/browser/context';
 import { useState } from 'react';
 import { expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { ReviewLifecycleState } from '../prreview-lifecycle';

apps/web/src/components/prreview/prreview-resize.hooks.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { beforeEach, expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { useResizablePanelWidth } from './prreview-resize.hooks';

apps/web/src/components/settings/SettingsView/SettingsView.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import * as stories from './SettingsView.stories';

apps/web/src/components/terminal/TerminalGridPane/TerminalGridPane.test.tsx

@@ -1,7 +1,7 @@
 import { DndContext } from '@dnd-kit/core';
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { ToastProvider } from '@/components/ui';

apps/web/src/components/terminal/TerminalPane/TerminalPane.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { afterEach, expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { ToastProvider } from '@/components/ui';

apps/web/src/components/terminal/TerminalSearchBar/TerminalSearchBar.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { TerminalSearchBar } from './TerminalSearchBar';

apps/web/src/components/terminal/TerminalTabs/TerminalTabs.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import * as stories from './TerminalTabs.stories';

apps/web/src/components/terminal/TerminalTaskMenu/TerminalTaskMenu.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { makeTerminalSession, makeTerminalTask } from '../_fixtures';

apps/web/src/components/ui/BranchPicker/BranchPicker.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { BranchInfo } from '@/lib/bridge';

apps/web/src/components/ui/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { Checkbox } from './Checkbox';

apps/web/src/components/ui/ConfirmDialog/ConfirmDialog.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import * as stories from './ConfirmDialog.stories';

apps/web/src/components/ui/FolderBrowserDialog/FolderBrowserDialog.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { afterEach, expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { DirectoryListing } from '@/lib/bridge';

apps/web/src/components/ui/IssueMapDialog/IssueMapDialog.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 // Mock the Tauri command + event surface underneath the bridge (the CreatePRDialog

apps/web/src/components/ui/Menu/Menu.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { IconButton } from '../IconButton';

apps/web/src/components/ui/Modal/Modal.test.tsx

@@ -1,6 +1,6 @@
-import { userEvent } from '@vitest/browser/context';
 import { useState } from 'react';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { MotionProvider } from '../motion';

apps/web/src/components/ui/ModelSelect/ModelSelect.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import type { ModelDescriptor } from '@nightcore/contracts';

apps/web/src/components/ui/NumberField/NumberField.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { NumberField } from './NumberField';

apps/web/src/components/ui/Segmented/Segmented.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { MotionProvider } from '../motion';

apps/web/src/components/ui/ToolbarOption/ToolbarOption.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import { BoltIcon } from '../icons';

apps/web/src/components/ui/Tooltip/Tooltip.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/react-vite';
-import { userEvent } from '@vitest/browser/context';
 import { expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import * as stories from './Tooltip.stories';

apps/web/src/components/worktree/CreatePRDialog/CreatePRDialog.test.tsx

@@ -1,5 +1,5 @@
-import { userEvent } from '@vitest/browser/context';
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 // Mock the Tauri command surface underneath the bridge (the same seam

apps/web/tsconfig.json

@@ -17,7 +17,12 @@
     "isolatedModules": true,
     "verbatimModuleSyntax": true,
     "noEmit": true,
-    "types": ["vite/client", "@vitest/browser/providers/playwright"],
+    // Vitest 4 moved the Playwright provider into its own package and dropped
+    // `@vitest/browser`'s `./providers/*` export entries, so the old
+    // "@vitest/browser/providers/playwright" reference no longer resolves. The
+    // replacement is the provider package's types-only `./context` export, which
+    // types `page`/`userEvent` with the Playwright-specific surface.
+    "types": ["vite/client", "@vitest/browser-playwright/context"],
     // Deliberately no `baseUrl` — TypeScript 6 already rejects it (TS5101) and 7
     // removed it outright (TS5102). Without it, `paths` values resolve relative to
     // THIS file, which the self-relative "./src/*" below already assumes. Bundler

apps/web/vitest.config.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 import tailwind from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
+import { playwright } from '@vitest/browser-playwright';
 import { defineConfig } from 'vitest/config';
 
 const alias = { '@': fileURLToPath(new URL('./src', import.meta.url)) };
@@ -13,18 +14,23 @@ const alias = { '@': fileURLToPath(new URL('./src', import.meta.url)) };
 // name ("storybook (chromium)" / "unit (chromium)") from its own object.
 const chromium = () => ({
   enabled: true,
-  provider: 'playwright' as const,
+  // Vitest 4 replaced the `provider: 'playwright'` string with a provider
+  // factory from a separate package. `contextOptions` sits on the provider call
+  // rather than per-instance: instance-level provider overrides do NOT merge
+  // with the parent, and this repo runs exactly one instance per project, so the
+  // single provider-level call is the unambiguous shape.
+  provider: playwright({
+    // Emulate `prefers-reduced-motion: reduce` in the test browser. The app's
+    // reduced-motion rule collapses every animation to ~0ms (styles.css), so the
+    // slide-in detail sheets (`nc-sheet-in`) settle instantly instead of moving
+    // ~100px through their 280ms enter — otherwise a `.click()` can race the
+    // animation and land off a button that's still sliding, a latent flake in the
+    // shared DetailPanelShell click tests (Insight/Scorecard/Harness) that only
+    // surfaces in isolated runs. This makes those tests deterministic.
+    contextOptions: { reducedMotion: 'reduce' },
+  }),
   headless: true,
-  // Emulate `prefers-reduced-motion: reduce` in the test browser. The app's
-  // reduced-motion rule collapses every animation to ~0ms (styles.css), so the
-  // slide-in detail sheets (`nc-sheet-in`) settle instantly instead of moving
-  // ~100px through their 280ms enter — otherwise a `.click()` can race the
-  // animation and land off a button that's still sliding, a latent flake in the
-  // shared DetailPanelShell click tests (Insight/Scorecard/Harness) that only
-  // surfaces in isolated runs. This makes those tests deterministic.
-  instances: [
-    { browser: 'chromium' as const, context: { reducedMotion: 'reduce' as const } },
-  ],
+  instances: [{ browser: 'chromium' as const }],
 });
 
 /**