From 9cef6af627cbd23d0f8331dd034396af252b2c77 Mon Sep 17 00:00:00 2001
From: Roger <roger990131@gmail.com>
Date: Wed, 1 Apr 2026 01:17:29 +0800
Subject: [PATCH] fix: useEffectEvent shim for react-reconciler 0.31
 compatibility

- Create src/utils/useEffectEvent.ts (useRef + useCallback shim)
- Replace react imports of useEffectEvent in BackgroundTasksDialog and AppState
- CLI now boots into trust dialog successfully
---
 src/components/tasks/BackgroundTasksDialog.tsx | 3 ++-
 src/state/AppState.tsx                         | 3 ++-
 src/utils/useEffectEvent.ts                    | 9 +++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/useEffectEvent.ts

diff --git a/src/components/tasks/BackgroundTasksDialog.tsx b/src/components/tasks/BackgroundTasksDialog.tsx
index 7abd9c0..704b25d 100644
--- a/src/components/tasks/BackgroundTasksDialog.tsx
+++ b/src/components/tasks/BackgroundTasksDialog.tsx
@@ -1,7 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
 import { feature } from 'bun:bundle';
 import figures from 'figures';
-import React, { type ReactNode, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';
+import React, { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffectEvent } from '../../utils/useEffectEvent.js';
 import { isCoordinatorMode } from 'src/coordinator/coordinatorMode.js';
 import { useTerminalSize } from 'src/hooks/useTerminalSize.js';
 import { useAppState, useSetAppState } from 'src/state/AppState.js';
diff --git a/src/state/AppState.tsx b/src/state/AppState.tsx
index bdbb169..c2cad1c 100644
--- a/src/state/AppState.tsx
+++ b/src/state/AppState.tsx
@@ -1,6 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { feature } from 'bun:bundle';
-import React, { useContext, useEffect, useEffectEvent, useState, useSyncExternalStore } from 'react';
+import React, { useContext, useEffect, useState, useSyncExternalStore } from 'react';
+import { useEffectEvent } from '../utils/useEffectEvent.js';
 import { MailboxProvider } from '../context/mailbox.js';
 import { useSettingsChange } from '../hooks/useSettingsChange.js';
 import { logForDebugging } from '../utils/debug.js';
diff --git a/src/utils/useEffectEvent.ts b/src/utils/useEffectEvent.ts
new file mode 100644
index 0000000..a3b20f7
--- /dev/null
+++ b/src/utils/useEffectEvent.ts
@@ -0,0 +1,9 @@
+import { useCallback, useRef } from 'react';
+
+// Shim for useEffectEvent (React 19 experimental, not in react-reconciler 0.31)
+// Uses useRef to always call the latest callback without re-firing effects
+export function useEffectEvent<T extends (...args: any[]) => any>(callback: T): T {
+  const ref = useRef(callback);
+  ref.current = callback;
+  return useCallback(((...args: any[]) => ref.current(...args)) as T, []);
+}