fix(canvas/test): ApprovalBanner mockReset to prevent queue stacking

Cherry-picked from PR #452 (fix/canvas-test-and-design-fixes) which
was closed without merge during the PR #443 cascade. The fix adds a
mockPost reference so individual tests can reset the POST mock cleanly
instead of queueing multiple resolved/rejected values.

Without this, the "shows an error toast when POST fails" and "keeps
the card visible when POST fails" tests queue two responses from
beforeEach's mockResolvedValue({}) and the second mockRejectedValueOnce()
call, causing non-deterministic test outcomes.

Fixes test failures in ApprovalBanner suite.

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

@@ -41,9 +41,10 @@ const pendingApproval = (id = "a1", workspaceId = "ws-1"): {
   created_at: "2026-05-10T10:00:00Z",
 });
 
-// Shared spy reference so individual tests can call mockGet.mockRestore()
+// Shared spy references so individual tests can reset or reject the POST mock
-// without needing to pass it through beforeEach → it scope chain.
+// without needing to call spyOn again (which would create a duplicate spy).
 let mockGet: ReturnType<typeof vi.spyOn>;
+let mockPost: ReturnType<typeof vi.spyOn>;
 
 // ─── Tests ────────────────────────────────────────────────────────────────────
 
@@ -139,8 +140,8 @@ describe("ApprovalBanner — renders approval cards", () => {
 describe("ApprovalBanner — decisions", () => {
   beforeEach(() => {
     vi.useFakeTimers();
-    vi.spyOn(api, "get").mockResolvedValueOnce([pendingApproval("a1")]);
+    mockGet = vi.spyOn(api, "get").mockResolvedValueOnce([pendingApproval("a1")]);
-    vi.spyOn(api, "post").mockResolvedValue({});
+    mockPost = vi.spyOn(api, "post").mockResolvedValue({});
   });
 
   afterEach(() => {
@@ -196,7 +197,7 @@ describe("ApprovalBanner — decisions", () => {
   });
 
   it("shows an error toast when POST fails", async () => {
-    vi.mocked(api.post).mockRejectedValueOnce(new Error("Network error"));
+    mockPost.mockReset().mockRejectedValue(new Error("Network error"));
     render(<ApprovalBanner />);
     await act(async () => { await vi.runOnlyPendingTimersAsync(); });
     fireEvent.click(screen.getAllByRole("button", { name: /approve/i })[0]);
@@ -208,8 +209,9 @@ describe("ApprovalBanner — decisions", () => {
   });
 
   it("keeps the card visible when the POST fails", async () => {
-    // Use mockRejectedValueOnce on the same spy as beforeEach (don't call spyOn again)
+    // Reset the post mock before rejecting so the beforeEach's resolved value
-    vi.mocked(api.post).mockRejectedValueOnce(new Error("Network error"));
+    // is gone and we get a clean rejection instead of a resolved→rejected queue.
+    mockPost.mockReset().mockRejectedValue(new Error("Network error"));
     render(<ApprovalBanner />);
     await act(async () => { await vi.runOnlyPendingTimersAsync(); });
     fireEvent.click(screen.getAllByRole("button", { name: /approve/i })[0]);