fix: 修复条件式 hook 调用导致的 "Rendered fewer hooks than expected" 错误

build.ts

@@ -21,6 +21,7 @@ const result = await Bun.build({
   outdir,
   target: 'bun',
   splitting: true,
+  sourcemap: 'linked',
   define: {
     ...getMacroDefines(),
     // React production mode — eliminates _debugStack Error objects

scripts/dev.ts

@@ -18,7 +18,7 @@ const defines = {
   ...getMacroDefines(),
   // React production mode — prevents 6,889+ _debugStack Error objects
   // (12MB) from accumulating during long-running sessions.
-  'process.env.NODE_ENV': JSON.stringify('production'),
+  'process.env.NODE_ENV': JSON.stringify('development'),
 }
 
 const defineArgs = Object.entries(defines).flatMap(([k, v]) => [

src/components/FeedbackSurvey/useFrustrationDetection.ts

@@ -25,24 +25,24 @@ export function useFrustrationDetection(
   const [state, setState] = useState<FrustrationState>('closed')
 
   const config = getGlobalConfig() as { transcriptShareDismissed?: boolean }
-  if (config.transcriptShareDismissed) {
-    return { state: 'closed', handleTranscriptSelect: () => {} }
-  }
-
-  if (!isPolicyAllowed('product_feedback' as any)) {
-    return { state: 'closed', handleTranscriptSelect: () => {} }
-  }
-
-  if (isLoading || hasActivePrompt || otherSurveyOpen) {
-    return { state: 'closed', handleTranscriptSelect: () => {} }
-  }
+  const policyAllowed = isPolicyAllowed('product_feedback' as any)
+  const shouldSkip =
+    config.transcriptShareDismissed ||
+    !policyAllowed ||
+    isLoading ||
+    hasActivePrompt ||
+    otherSurveyOpen
 
   const frustrated = detectFrustration(messages)
 
-  const effectiveState =
-    frustrated && state === 'closed' ? 'transcript_prompt' : state
+  const effectiveState = shouldSkip
+    ? 'closed'
+    : frustrated && state === 'closed'
+      ? 'transcript_prompt'
+      : state
 
-  function handleTranscriptSelect(choice: string) {
+  const handleTranscriptSelect = (choice: string) => {
+    if (shouldSkip) return
     if (choice === 'yes') {
       void submitTranscriptShare(messages, 'frustration', crypto.randomUUID())
       setState('submitted')

src/components/PromptInput/Notifications.tsx

@@ -204,10 +204,14 @@ function NotificationContent({
   }, []);
 
   // Voice state (VOICE_MODE builds only, runtime-gated by GrowthBook)
-  const voiceState = feature('VOICE_MODE') ? useVoiceState(s => s.voiceState) : ('idle' as const);
-  const voiceEnabled = feature('VOICE_MODE') ? useVoiceEnabled() : false;
-  const voiceError = feature('VOICE_MODE') ? useVoiceState(s => s.voiceError) : null;
-  const isBriefOnly = feature('KAIROS') || feature('KAIROS_BRIEF') ? useAppState(s => s.isBriefOnly) : false;
+  const voiceStateRaw = useVoiceState(s => s.voiceState);
+  const voiceState = feature('VOICE_MODE') ? voiceStateRaw : ('idle' as const);
+  const voiceEnabledRaw = useVoiceEnabled();
+  const voiceEnabled = feature('VOICE_MODE') ? voiceEnabledRaw : false;
+  const voiceErrorRaw = useVoiceState(s => s.voiceError);
+  const voiceError = feature('VOICE_MODE') ? voiceErrorRaw : null;
+  const isBriefOnlyState = useAppState(s => s.isBriefOnly);
+  const isBriefOnly = feature('KAIROS') || feature('KAIROS_BRIEF') ? isBriefOnlyState : false;
 
   // When voice is actively recording or processing, replace all
   // notifications with just the voice indicator.

src/components/PromptInput/PromptInput.tsx

@@ -347,8 +347,8 @@ function PromptInput({
   // the input bar. viewingAgentTaskId mirrors the gate on both (Spinner.tsx,
   // REPL.tsx) — teammate view falls back to SpinnerWithVerbInner which has
   // its own marginTop, so the gap stays even without ours.
-  const briefOwnsGap =
-    feature('KAIROS') || feature('KAIROS_BRIEF') ? useAppState(s => s.isBriefOnly) && !viewingAgentTaskId : false;
+  const isBriefOnlyState = useAppState(s => s.isBriefOnly);
+  const briefOwnsGap = feature('KAIROS') || feature('KAIROS_BRIEF') ? isBriefOnlyState && !viewingAgentTaskId : false;
   const mainLoopModel_ = useAppState(s => s.mainLoopModel);
   const mainLoopModelForSession = useAppState(s => s.mainLoopModelForSession);
   const thinkingEnabled = useAppState(s => s.thinkingEnabled);
@@ -2111,7 +2111,8 @@ function PromptInput({
 
   useBuddyNotification();
 
-  const companionSpeaking = feature('BUDDY') ? useAppState(s => s.companionReaction !== undefined) : false;
+  const companionReactionState = useAppState(s => s.companionReaction);
+  const companionSpeaking = feature('BUDDY') ? companionReactionState !== undefined : false;
   const { columns, rows } = useTerminalSize();
   const textInputColumns = columns - 3 - companionReservedColumns(columns, companionSpeaking);
 

src/components/PromptInput/PromptInputFooterLeftSide.tsx

@@ -230,9 +230,12 @@ function ModeIndicator({
     proactiveModule?.getNextTickAt ?? NULL,
     NULL,
   );
-  const voiceEnabled = feature('VOICE_MODE') ? useVoiceEnabled() : false;
-  const voiceState = feature('VOICE_MODE') ? useVoiceState(s => s.voiceState) : ('idle' as const);
-  const voiceWarmingUp = feature('VOICE_MODE') ? useVoiceState(s => s.voiceWarmingUp) : false;
+  const voiceEnabledRaw = useVoiceEnabled();
+  const voiceEnabled = feature('VOICE_MODE') ? voiceEnabledRaw : false;
+  const voiceStateRaw = useVoiceState(s => s.voiceState);
+  const voiceState = feature('VOICE_MODE') ? voiceStateRaw : ('idle' as const);
+  const voiceWarmingUpRaw = useVoiceState(s => s.voiceWarmingUp);
+  const voiceWarmingUp = feature('VOICE_MODE') ? voiceWarmingUpRaw : false;
   const hasSelection = useHasSelection();
   const selGetState = useSelection().getState;
   const hasNextTick = nextTickAt !== null;
@@ -250,16 +253,19 @@ function ModeIndicator({
   const escShortcut = useShortcutDisplay('chat:cancel', 'Chat', 'esc').toLowerCase();
   const todosShortcut = useShortcutDisplay('app:toggleTodos', 'Global', 'ctrl+t');
   const killAgentsShortcut = useShortcutDisplay('chat:killAgents', 'Chat', 'ctrl+x ctrl+k');
-  const voiceKeyShortcut = feature('VOICE_MODE') ? useShortcutDisplay('voice:pushToTalk', 'Chat', 'Space') : '';
+  const voiceKeyShortcutRaw = useShortcutDisplay('voice:pushToTalk', 'Chat', 'Space');
+  const voiceKeyShortcut = feature('VOICE_MODE') ? voiceKeyShortcutRaw : '';
   // Captured at mount so the hint doesn't flicker mid-session if another
   // CC instance increments the counter. Incremented once via useEffect the
   // first time voice is enabled in this session — approximates "hint was
   // shown" without tracking the exact render-time condition (which depends
   // on parts/hintParts computed after the early-return hooks boundary).
-  const [voiceHintUnderCap] = feature('VOICE_MODE')
-    ? useState(() => (getGlobalConfig().voiceFooterHintSeenCount ?? 0) < MAX_VOICE_HINT_SHOWS)
-    : [false];
-  const voiceHintIncrementedRef = feature('VOICE_MODE') ? useRef(false) : null;
+  const [voiceHintUnderCapRaw] = useState(
+    () => (getGlobalConfig().voiceFooterHintSeenCount ?? 0) < MAX_VOICE_HINT_SHOWS,
+  );
+  const voiceHintUnderCap = feature('VOICE_MODE') ? voiceHintUnderCapRaw : false;
+  const voiceHintIncrementedRefRaw = useRef(false);
+  const voiceHintIncrementedRef = feature('VOICE_MODE') ? voiceHintIncrementedRefRaw : null;
   useEffect(() => {
     if (feature('VOICE_MODE')) {
       if (!voiceEnabled || !voiceHintUnderCap) return;

src/components/PromptInput/PromptInputQueuedCommands.tsx

@@ -80,7 +80,8 @@ function PromptInputQueuedCommandsImpl(): React.ReactNode {
   // already indent themselves). Gate mirrors the brief-spinner/message
   // check elsewhere — no teammate-view override needed since this
   // component early-returns when viewing a teammate.
-  const useBriefLayout = feature('KAIROS') || feature('KAIROS_BRIEF') ? useAppState(s => s.isBriefOnly) : false;
+  const isBriefOnlyState = useAppState(s => s.isBriefOnly);
+  const useBriefLayout = feature('KAIROS') || feature('KAIROS_BRIEF') ? isBriefOnlyState : false;
 
   // createUserMessage mints a fresh UUID per call; without memoization, streaming
   // re-renders defeat Message's areMessagePropsEqual (compares uuid) → flicker.

src/components/Spinner.tsx

@@ -78,10 +78,8 @@ export function SpinnerWithVerb(props: Props): React.ReactNode {
   // teammate view needs the real spinner (which shows teammate status).
   const viewingAgentTaskId = useAppState(s => s.viewingAgentTaskId);
   // Hoisted to mount-time — this component re-renders at animation framerate.
-  const briefEnvEnabled =
-    feature('KAIROS') || feature('KAIROS_BRIEF')
-      ? useMemo(() => isEnvTruthy(process.env.CLAUDE_CODE_BRIEF), [])
-      : false;
+  const briefEnvEnabledRaw = useMemo(() => isEnvTruthy(process.env.CLAUDE_CODE_BRIEF), []);
+  const briefEnvEnabled = feature('KAIROS') || feature('KAIROS_BRIEF') ? briefEnvEnabledRaw : false;
 
   // Runtime gate mirrors isBriefEnabled() but inlined — importing from
   // BriefTool.ts would leak tool-name strings into external builds. Single

src/components/TextInput.tsx

@@ -44,14 +44,18 @@ export default function TextInput(props: Props): React.ReactNode {
   const settings = useSettings();
   const reducedMotion = settings.prefersReducedMotion ?? false;
 
-  const voiceState = feature('VOICE_MODE') ? useVoiceState(s => s.voiceState) : ('idle' as const);
+  const voiceStateRaw = useVoiceState(s => s.voiceState);
+  const voiceState = feature('VOICE_MODE') ? voiceStateRaw : ('idle' as const);
   const isVoiceRecording = voiceState === 'recording';
 
-  const audioLevels = feature('VOICE_MODE') ? useVoiceState(s => s.voiceAudioLevels) : [];
+  const audioLevelsRaw = useVoiceState(s => s.voiceAudioLevels);
+  const audioLevels = feature('VOICE_MODE') ? audioLevelsRaw : [];
   const smoothedRef = useRef<number[]>(new Array(CURSOR_WAVEFORM_WIDTH).fill(0));
 
   const needsAnimation = isVoiceRecording && !reducedMotion;
-  const [animRef, animTime] = feature('VOICE_MODE') ? useAnimationFrame(needsAnimation ? 50 : null) : [() => {}, 0];
+  const [animRefRaw, animTimeRaw] = useAnimationFrame(needsAnimation ? 50 : null);
+  const animRef = feature('VOICE_MODE') ? animRefRaw : () => {};
+  const animTime = feature('VOICE_MODE') ? animTimeRaw : 0;
 
   // Show hint when terminal regains focus and clipboard has an image
   useClipboardImageHint(isTerminalFocused, !!props.onImagePaste);

src/components/messages/AttachmentMessage.tsx

@@ -39,7 +39,8 @@ type Props = {
 export function AttachmentMessage({ attachment, addMargin, verbose, isTranscriptMode }: Props): React.ReactNode {
   const bg = useSelectedMessageBg();
   // Hoisted to mount-time — per-message component, re-renders on every scroll.
-  const isDemoEnv = feature('EXPERIMENTAL_SKILL_SEARCH') ? useMemo(() => isEnvTruthy(process.env.IS_DEMO), []) : false;
+  const isDemoEnvRaw = useMemo(() => isEnvTruthy(process.env.IS_DEMO), []);
+  const isDemoEnv = feature('EXPERIMENTAL_SKILL_SEARCH') ? isDemoEnvRaw : false;
   // Handle teammate_mailbox BEFORE switch
   if (isAgentSwarmsEnabled() && attachment.type === 'teammate_mailbox') {
     // Filter out idle notifications BEFORE counting - they are hidden in the UI

src/components/messages/UserPromptMessage.tsx

@@ -38,27 +38,20 @@ export function UserPromptMessage({ addMargin, param: { text }, isTranscriptMode
   // child renders a label-style layout, and Box backgroundColor paints
   // behind children unconditionally (they can't opt out).
   //
-  // Hooks stay INSIDE feature() ternaries so external builds don't pay
-  // the per-scrollback-message store subscription (useSyncExternalStore
-  // bypasses React.memo). Runtime-gated like isBriefEnabled() but inlined
-  // to avoid pulling BriefTool.ts → prompt.ts tool-name strings into
-  // external builds.
-  const isBriefOnly = feature('KAIROS') || feature('KAIROS_BRIEF') ? useAppState(s => s.isBriefOnly) : false;
-  const viewingAgentTaskId =
-    feature('KAIROS') || feature('KAIROS_BRIEF') ? useAppState(s => s.viewingAgentTaskId) : null;
+  // Hooks must always be called unconditionally to satisfy React rules.
+  // The feature gate is applied to the computed value, not the hook call.
+  const isBriefOnlyState = useAppState(s => s.isBriefOnly);
+  const viewingAgentTaskIdState = useAppState(s => s.viewingAgentTaskId);
   // Hoisted to mount-time — per-message component, re-renders on every scroll.
-  const briefEnvEnabled =
-    feature('KAIROS') || feature('KAIROS_BRIEF')
-      ? useMemo(() => isEnvTruthy(process.env.CLAUDE_CODE_BRIEF), [])
-      : false;
+  const briefEnvEnabledState = useMemo(() => isEnvTruthy(process.env.CLAUDE_CODE_BRIEF), []);
   const useBriefLayout =
     feature('KAIROS') || feature('KAIROS_BRIEF')
       ? (getKairosActive() ||
           (getUserMsgOptIn() &&
-            (briefEnvEnabled || getFeatureValue_CACHED_MAY_BE_STALE('tengu_kairos_brief', false)))) &&
-        isBriefOnly &&
+            (briefEnvEnabledState || getFeatureValue_CACHED_MAY_BE_STALE('tengu_kairos_brief', false)))) &&
+        isBriefOnlyState &&
         !isTranscriptMode &&
-        !viewingAgentTaskId
+        !viewingAgentTaskIdState
       : false;
 
   // Truncate before the early return so the hook order is stable.

src/components/messages/UserToolResultMessage/UserToolSuccessMessage.tsx

@@ -43,10 +43,9 @@ export function UserToolSuccessMessage({
   shouldCollapseDiffs,
 }: Props): React.ReactNode {
   const [theme] = useTheme();
-  // Hook stays inside feature() ternary so external builds don't pay a
-  // per-scrollback-message store subscription — same pattern as
-  // UserPromptMessage.tsx.
-  const isBriefOnly = feature('KAIROS') || feature('KAIROS_BRIEF') ? useAppState(s => s.isBriefOnly) : false;
+  // Always call hook unconditionally; feature gate applied to the value.
+  const isBriefOnlyState = useAppState(s => s.isBriefOnly);
+  const isBriefOnly = feature('KAIROS') || feature('KAIROS_BRIEF') ? isBriefOnlyState : false;
 
   // Capture classifier approval once on mount, then delete from Map to prevent linear growth.
   // useState lazy initializer ensures the value persists across re-renders.

src/hooks/useGlobalKeybindings.tsx

@@ -83,7 +83,7 @@ export function GlobalKeybindingHandlers({
 
   // Toggle transcript mode (ctrl+o). Two-way prompt ↔ transcript.
   // Brief view has its own dedicated toggle on ctrl+shift+b.
-  const isBriefOnly = feature('KAIROS') || feature('KAIROS_BRIEF') ? useAppState(s => s.isBriefOnly) : false;
+  const isBriefOnlyState = useAppState(s => s.isBriefOnly);
   const handleToggleTranscript = useCallback(() => {
     if (feature('KAIROS') || feature('KAIROS_BRIEF')) {
       // Escape hatch: GB kill-switch while defaultView=chat was persisted
@@ -95,7 +95,7 @@ export function GlobalKeybindingHandlers({
       const { isBriefEnabled } =
         require('@claude-code-best/builtin-tools/tools/BriefTool/BriefTool.js') as typeof import('@claude-code-best/builtin-tools/tools/BriefTool/BriefTool.js');
       /* eslint-enable @typescript-eslint/no-require-imports */
-      if (!isBriefEnabled() && isBriefOnly && screen !== 'transcript') {
+      if (!isBriefEnabled() && isBriefOnlyState && screen !== 'transcript') {
         setAppState(prev => {
           if (!prev.isBriefOnly) return prev;
           return { ...prev, isBriefOnly: false };
@@ -121,7 +121,7 @@ export function GlobalKeybindingHandlers({
   }, [
     screen,
     setScreen,
-    isBriefOnly,
+    isBriefOnlyState,
     showAllInTranscript,
     setShowAllInTranscript,
     messageCount,
@@ -162,8 +162,8 @@ export function GlobalKeybindingHandlers({
       const { isBriefEnabled } =
         require('@claude-code-best/builtin-tools/tools/BriefTool/BriefTool.js') as typeof import('@claude-code-best/builtin-tools/tools/BriefTool/BriefTool.js');
       /* eslint-enable @typescript-eslint/no-require-imports */
-      if (!isBriefEnabled() && !isBriefOnly) return;
-      const next = !isBriefOnly;
+      if (!isBriefEnabled() && !isBriefOnlyState) return;
+      const next = !isBriefOnlyState;
       logEvent('tengu_brief_mode_toggled', {
         enabled: next,
         gated: false,
@@ -174,7 +174,7 @@ export function GlobalKeybindingHandlers({
         return { ...prev, isBriefOnly: next };
       });
     }
-  }, [isBriefOnly, setAppState]);
+  }, [isBriefOnlyState, setAppState]);
 
   // Register keybinding handlers
   useKeybinding('app:toggleTodos', handleToggleTodos, {
@@ -183,11 +183,10 @@ export function GlobalKeybindingHandlers({
   useKeybinding('app:toggleTranscript', handleToggleTranscript, {
     context: 'Global',
   });
-  if (feature('KAIROS') || feature('KAIROS_BRIEF')) {
-    useKeybinding('app:toggleBrief', handleToggleBrief, {
-      context: 'Global',
-    });
-  }
+  useKeybinding('app:toggleBrief', handleToggleBrief, {
+    context: 'Global',
+    isActive: feature('KAIROS') ? true : feature('KAIROS_BRIEF') ? true : false,
+  });
 
   // Register teammate keybinding
   useKeybinding(

src/hooks/useIssueFlagBanner.ts

@@ -93,10 +93,6 @@ export function useIssueFlagBanner(
   messages: Message[],
   submitCount: number,
 ): boolean {
-  if (process.env.USER_TYPE !== 'ant') {
-    return false
-  }
-
   const lastTriggeredAtRef = useRef(0)
   const activeForSubmitRef = useRef(-1)
 
@@ -109,6 +105,11 @@ export function useIssueFlagBanner(
     [messages],
   )
 
+  const isAnt = process.env.USER_TYPE === 'ant'
+  if (!isAnt) {
+    return false
+  }
+
   // Keep showing the banner until the user submits another message
   if (activeForSubmitRef.current === submitCount) {
     return true

src/hooks/useReplBridge.tsx

@@ -99,11 +99,16 @@ export function useReplBridge(
   messagesRef.current = messages;
   const store = useAppStateStore();
   const { addNotification } = useNotifications();
-  const replBridgeEnabled = feature('BRIDGE_MODE') ? useAppState(s => s.replBridgeEnabled) : false;
-  const replBridgeConnected = feature('BRIDGE_MODE') ? useAppState(s => s.replBridgeConnected) : false;
-  const replBridgeSessionActive = feature('BRIDGE_MODE') ? useAppState(s => s.replBridgeSessionActive) : false;
-  const replBridgeOutboundOnly = feature('BRIDGE_MODE') ? useAppState(s => s.replBridgeOutboundOnly) : false;
-  const replBridgeInitialName = feature('BRIDGE_MODE') ? useAppState(s => s.replBridgeInitialName) : undefined;
+  const replBridgeEnabledRaw = useAppState(s => s.replBridgeEnabled);
+  const replBridgeEnabled = feature('BRIDGE_MODE') ? replBridgeEnabledRaw : false;
+  const replBridgeConnectedRaw = useAppState(s => s.replBridgeConnected);
+  const replBridgeConnected = feature('BRIDGE_MODE') ? replBridgeConnectedRaw : false;
+  const replBridgeSessionActiveRaw = useAppState(s => s.replBridgeSessionActive);
+  const replBridgeSessionActive = feature('BRIDGE_MODE') ? replBridgeSessionActiveRaw : false;
+  const replBridgeOutboundOnlyRaw = useAppState(s => s.replBridgeOutboundOnly);
+  const replBridgeOutboundOnly = feature('BRIDGE_MODE') ? replBridgeOutboundOnlyRaw : false;
+  const replBridgeInitialNameRaw = useAppState(s => s.replBridgeInitialName);
+  const replBridgeInitialName = feature('BRIDGE_MODE') ? replBridgeInitialNameRaw : undefined;
 
   // Initialize/teardown bridge when enabled state changes.
   // Passes current messages as initialMessages so the remote session

src/hooks/useUpdateNotification.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useRef } from 'react'
 import { major, minor, patch } from 'semver'
 
 export function getSemverPart(version: string): string {
@@ -17,18 +17,17 @@ export function useUpdateNotification(
   updatedVersion: string | null | undefined,
   initialVersion: string = MACRO.VERSION,
 ): string | null {
-  const [lastNotifiedSemver, setLastNotifiedSemver] = useState<string | null>(
-    () => getSemverPart(initialVersion),
-  )
+  const lastNotifiedRef = useRef<string | null>(getSemverPart(initialVersion))
 
-  if (!updatedVersion) {
+  const updatedSemver = updatedVersion ? getSemverPart(updatedVersion) : null
+  if (!updatedSemver) {
     return null
   }
 
-  const updatedSemver = getSemverPart(updatedVersion)
-  if (updatedSemver !== lastNotifiedSemver) {
-    setLastNotifiedSemver(updatedSemver)
+  if (updatedSemver !== lastNotifiedRef.current) {
+    lastNotifiedRef.current = updatedSemver
     return updatedSemver
   }
+
   return null
 }