From 1f5bacda73e0a4f7eb70ec85a237bcb03c2d0e86 Mon Sep 17 00:00:00 2001
From: Teddy Lee <teddylee777@gmail.com>
Date: Thu, 16 Apr 2026 21:15:47 +0900
Subject: [PATCH] fix(frontend): add "use client" directive to Next.js 15
 providers (#83)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What Changed
- Added `"use client";` directive at line 1 of 4 provider files under `frontend/src/providers/`:
  - `Settings.tsx`
  - `AssistantConfig.tsx`
  - `Stream.tsx`
  - `Thread.tsx`
- Each file receives the directive followed by a blank-line separator; all existing imports, hooks, JSX, and logic are untouched.

## Root Cause
The 4 provider components declare React hooks (`useState`, `useEffect`, `useCallback`, `useMemo`, `useRef`) at module scope and in `Settings.tsx` also touch client-only browser APIs (`document.documentElement`, `window.matchMedia`, `localStorage`). They are currently safe only because every call site lives inside a client component tree (`MainLayoutClient.tsx`, `ChatContent.tsx` both declare `"use client"`). Any future refactor that hoists one of these providers into a Server Component would fail at build time with a Next.js 15 RSC boundary error. The directive converts this latent fragility into a defensive, self-documenting boundary.

## Test Plan
- [x] `head -1 frontend/src/providers/{Settings,AssistantConfig,Stream,Thread}.tsx` → `"use client";`
- [x] `cd frontend && pnpm lint` → ✔ No ESLint warnings or errors
- [x] `cd frontend && pnpm exec tsc --noEmit` → exit 0
- [x] `cd frontend && pnpm build` → all 27 routes compile successfully
- [x] `git diff --stat` shows exactly 4 files changed, +8/-0

## References
Closes #83
---
 frontend/src/providers/AssistantConfig.tsx | 2 ++
 frontend/src/providers/Settings.tsx        | 2 ++
 frontend/src/providers/Stream.tsx          | 2 ++
 frontend/src/providers/Thread.tsx          | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/frontend/src/providers/AssistantConfig.tsx b/frontend/src/providers/AssistantConfig.tsx
index dfcd990..59e3126 100644
--- a/frontend/src/providers/AssistantConfig.tsx
+++ b/frontend/src/providers/AssistantConfig.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   createContext,
   useState,
diff --git a/frontend/src/providers/Settings.tsx b/frontend/src/providers/Settings.tsx
index f40af0e..c3a8280 100644
--- a/frontend/src/providers/Settings.tsx
+++ b/frontend/src/providers/Settings.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   createContext,
   useState,
diff --git a/frontend/src/providers/Stream.tsx b/frontend/src/providers/Stream.tsx
index 3bae3d2..f3e3902 100644
--- a/frontend/src/providers/Stream.tsx
+++ b/frontend/src/providers/Stream.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   createContext,
   ReactNode,
diff --git a/frontend/src/providers/Thread.tsx b/frontend/src/providers/Thread.tsx
index c8187d9..5de279e 100644
--- a/frontend/src/providers/Thread.tsx
+++ b/frontend/src/providers/Thread.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { validate } from "uuid";
 import { Thread, Client } from "@langchain/langgraph-sdk";
 import {