fix(canvas/test): ContextMenu test isolation fixes

Three issues fixed:

1. vi.mock hoisting: apiPost/apiPatch were const-initialized before
   vi.mock was hoisted, causing "Cannot access apiPost before initialization"
   ReferenceError. Use vi.hoisted() to keep refs available in the factory
   and in test bodies.

2. Outdated offline-menu assertion: The test expected Chat/Terminal to be
   absent from the DOM for offline nodes. The component actually renders
   them as disabled (aria-disabled="true") — giving users discoverability
   without allowing interaction. Updated assertion to match current behavior.

3. Tab key target: The Tab close handler lives on the menu div
   (handleMenuKeyDown), not on document.body. Test was firing keyDown
   on document.body which never reached the handler. Fixed to fire on the
   menu element.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

canvas/package-lock.json

@@ -119,6 +119,7 @@
       "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.28.5",
         "js-tokens": "^4.0.0",
@@ -299,7 +300,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -348,7 +348,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -360,7 +359,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
@@ -372,7 +370,6 @@
       "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -1129,7 +1126,6 @@
       "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "playwright": "1.59.1"
       },
@@ -2410,7 +2406,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/chai": {
       "version": "5.2.3",
@@ -2533,7 +2530,6 @@
       "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.19.0"
       }
@@ -2543,7 +2539,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2554,7 +2549,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2603,7 +2597,6 @@
       "integrity": "sha512-38C0/Ddb7HcRG0Z4/DUem8x57d2p9jYgp18mkaYswEOQBGsI1CG4f/hjm0ZCeaJfWhSZ4k7jgs29V1Zom7Ki9A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@bcoe/v8-coverage": "^1.0.2",
         "@vitest/utils": "4.1.5",
@@ -2814,6 +2807,7 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2824,6 +2818,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -3116,7 +3111,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -3259,7 +3253,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/enhanced-resolve": {
       "version": "5.21.0",
@@ -3605,7 +3600,8 @@
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jsdom": {
       "version": "29.1.1",
@@ -3613,7 +3609,6 @@
       "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@asamuzakjp/css-color": "^5.1.11",
         "@asamuzakjp/dom-selector": "^7.1.1",
@@ -3936,6 +3931,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -5010,7 +5006,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5098,6 +5093,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -5132,7 +5128,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
       "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5142,7 +5137,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
       "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5155,7 +5149,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-markdown": {
       "version": "10.1.0",
@@ -5603,8 +5598,7 @@
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
       "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.3.3",
@@ -5946,7 +5940,6 @@
       "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -6040,7 +6033,6 @@
       "integrity": "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.1.5",
         "@vitest/mocker": "4.1.5",

canvas/src/components/__tests__/ContextMenu.test.tsx

@@ -20,9 +20,14 @@ vi.mock("../Toaster", () => ({
 }));
 
 // ─── Mock API ────────────────────────────────────────────────────────────────
+// Use vi.hoisted() so the mock refs are available in test bodies without
+// triggering vitest's top-level variable rule (vi.mock is hoisted but const
+// assignments in the factory run at module init, before the const is defined).
+const { apiPost, apiPatch } = vi.hoisted(() => ({
+  apiPost: vi.fn().mockResolvedValue(undefined as void),
+  apiPatch: vi.fn().mockResolvedValue(undefined as void),
+}));
 
-const apiPost = vi.fn().mockResolvedValue(undefined as void);
-const apiPatch = vi.fn().mockResolvedValue(undefined as void);
 vi.mock("@/lib/api", () => ({
   api: {
     post: apiPost,
@@ -168,7 +173,9 @@ describe("ContextMenu — close", () => {
   it("closes when Tab is pressed", () => {
     openMenu();
     render(<ContextMenu />);
-    fireEvent.keyDown(document.body, { key: "Tab" });
+    // Tab handler is on the menu div (handleMenuKeyDown), not document.body
+    const menu = screen.getByRole("menu");
+    fireEvent.keyDown(menu, { key: "Tab" });
     expect(mockStoreState.closeContextMenu).toHaveBeenCalled();
   });
 });
@@ -199,11 +206,16 @@ describe("ContextMenu — menu items", () => {
     expect(screen.getByRole("menuitem", { name: /terminal/i })).toBeTruthy();
   });
 
-  it("hides Chat and Terminal for offline nodes", () => {
+  it("renders Chat and Terminal as disabled for offline nodes", () => {
     openMenu({ nodeData: { name: "Bob", status: "offline", tier: 2, role: "analyst" } });
     render(<ContextMenu />);
-    expect(screen.queryByRole("menuitem", { name: /chat/i })).toBeNull();
-    expect(screen.queryByRole("menuitem", { name: /terminal/i })).toBeNull();
+    const chat = screen.queryByRole("menuitem", { name: /chat/i });
+    const terminal = screen.queryByRole("menuitem", { name: /terminal/i });
+    // Items are rendered but disabled (not absent) — gives users discoverability
+    expect(chat).not.toBeNull();
+    expect(chat!.getAttribute("aria-disabled")).toBe("true");
+    expect(terminal).not.toBeNull();
+    expect(terminal!.getAttribute("aria-disabled")).toBe("true");
   });
 
   it("shows Pause for online nodes (not paused)", () => {

canvas/src/components/__tests__/StatusBadge.test.tsx

@@ -4,6 +4,13 @@
  *
  * Covers: renders all three status variants, aria-label, role=status,
  * icon presence, className variants, no render when passed invalid status.
+ *
+ * NOTE: Uses aria-label-scoped queries because the jsdom environment
+ * is shared across all test files (maxWorkers: 1). Other components
+ * (TerminalTab, Toaster, etc.) also use role="status", so unqualified
+ * getByRole("status") can match multiple elements. Scoping by aria-label
+ * is more specific and aligns with Testing Library's "query by accessible
+ * name" guidance.
  */
 import React from "react";
 import { render, screen } from "@testing-library/react";
@@ -13,45 +20,48 @@ import { StatusBadge } from "../ui/StatusBadge";
 describe("StatusBadge — render", () => {
   it("renders verified status with ✓ icon", () => {
     render(<StatusBadge status="verified" />);
-    const badge = screen.getByRole("status");
+    // Use attribute selector directly on container to avoid any role="status"
+    // ambiguity from other components in the shared jsdom document.
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: verified"]') as HTMLElement;
+    expect(badge).not.toBeNull();
     expect(badge.textContent).toBe("✓");
-    expect(badge.getAttribute("aria-label")).toBe("Connection status: verified");
   });
 
   it("renders invalid status with ✗ icon", () => {
     render(<StatusBadge status="invalid" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: invalid"]') as HTMLElement;
+    expect(badge).not.toBeNull();
     expect(badge.textContent).toBe("✗");
-    expect(badge.getAttribute("aria-label")).toBe("Connection status: invalid");
   });
 
   it("renders unverified status with ○ icon", () => {
     render(<StatusBadge status="unverified" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: unverified"]') as HTMLElement;
+    expect(badge).not.toBeNull();
     expect(badge.textContent).toBe("○");
-    expect(badge.getAttribute("aria-label")).toBe("Connection status: unverified");
   });
 
   it("has role=status on the badge element", () => {
     render(<StatusBadge status="verified" />);
-    expect(screen.getByRole("status")).toBeTruthy();
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: verified"]');
+    expect(badge).not.toBeNull();
   });
 
   it("includes the config className on the rendered element", () => {
     render(<StatusBadge status="verified" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: verified"]') as HTMLElement;
     expect(badge.className).toContain("status-badge--valid");
   });
 
   it("includes status-badge--invalid class for invalid status", () => {
     render(<StatusBadge status="invalid" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: invalid"]') as HTMLElement;
     expect(badge.className).toContain("status-badge--invalid");
   });
 
   it("includes status-badge--unverified class for unverified status", () => {
     render(<StatusBadge status="unverified" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: unverified"]') as HTMLElement;
     expect(badge.className).toContain("status-badge--unverified");
   });
 });