From 04df479e4f911fb29268a348040213822b3f09e4 Mon Sep 17 00:00:00 2001 From: Canvas Agent Date: Thu, 16 Apr 2026 09:10:22 +0000 Subject: [PATCH] fix(next): add missing 'use client' to TestConnectionButton and KeyValueField MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both components use useState/useEffect/useCallback/useRef but were missing the 'use client' directive. Without it Next.js App Router renders them as server HTML — React never hydrates them and event handlers are silently dropped. Co-Authored-By: Claude Sonnet 4.6 --- canvas/src/components/ui/KeyValueField.tsx | 2 ++ canvas/src/components/ui/TestConnectionButton.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/canvas/src/components/ui/KeyValueField.tsx b/canvas/src/components/ui/KeyValueField.tsx index bde8b132..efbef38b 100644 --- a/canvas/src/components/ui/KeyValueField.tsx +++ b/canvas/src/components/ui/KeyValueField.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useState, useCallback, useRef, useEffect, type ChangeEvent } from 'react'; import { RevealToggle } from './RevealToggle'; diff --git a/canvas/src/components/ui/TestConnectionButton.tsx b/canvas/src/components/ui/TestConnectionButton.tsx index 4f548437..940c06e4 100644 --- a/canvas/src/components/ui/TestConnectionButton.tsx +++ b/canvas/src/components/ui/TestConnectionButton.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useState, useCallback, useRef, useEffect } from 'react'; import type { TestConnectionState, SecretGroup } from '@/types/secrets'; import { validateSecret } from '@/lib/api/secrets';