feat(ui): make React Query DevTools configurable (#642)

* feat(ui): make React Query DevTools configurable

- Add showQueryDevtools setting to app store with persistence
- Add toggle in Global Settings > Developer section
- Move DevTools button from bottom-left to bottom-right (less intrusive)
- Support VITE_HIDE_QUERY_DEVTOOLS env variable to disable
- DevTools only available in development mode

Users can now:
1. Toggle DevTools on/off via Settings > Developer
2. Set VITE_HIDE_QUERY_DEVTOOLS=true to hide permanently
3. DevTools are now positioned at bottom-right to avoid overlapping UI controls

* chore: update package-lock.json

* fix(ui): hide React Query DevTools toggle in production mode

* refactor(ui): remove VITE_HIDE_QUERY_DEVTOOLS env variable

The persisted toggle in Settings > Developer is sufficient for controlling
DevTools visibility. No need for an additional env variable override.

* fix(ui): persist showQueryDevtools setting across page refreshes

- Add showQueryDevtools to GlobalSettings type
- Add showQueryDevtools to hydrateStoreFromSettings function
- Add default value in DEFAULT_GLOBAL_SETTINGS

* fix: restore package-lock.json from base branch

Removes git+ssh:// URL that was accidentally introduced

---------

Co-authored-by: Claude <noreply@anthropic.com>

apps/ui/src/components/views/settings-view/developer/developer-section.tsx

@@ -12,9 +12,18 @@ const LOG_LEVEL_OPTIONS: { value: ServerLogLevel; label: string; description: st
   { value: 'debug', label: 'Debug', description: 'Show all messages including debug' },
 ];
 
+// Check if we're in development mode
+const IS_DEV = import.meta.env.DEV;
+
 export function DeveloperSection() {
-  const { serverLogLevel, setServerLogLevel, enableRequestLogging, setEnableRequestLogging } =
+  const {
-    useAppStore();
+    serverLogLevel,
+    setServerLogLevel,
+    enableRequestLogging,
+    setEnableRequestLogging,
+    showQueryDevtools,
+    setShowQueryDevtools,
+  } = useAppStore();
 
   return (
     <div
@@ -85,6 +94,28 @@ export function DeveloperSection() {
             }}
           />
         </div>
+
+        {/* React Query DevTools - only shown in development mode */}
+        {IS_DEV && (
+          <div className="flex items-center justify-between pt-4 border-t border-border/30">
+            <div className="space-y-1">
+              <Label className="text-foreground font-medium">React Query DevTools</Label>
+              <p className="text-xs text-muted-foreground">
+                Show React Query DevTools panel in the bottom-right corner for debugging queries and
+                cache.
+              </p>
+            </div>
+            <Switch
+              checked={showQueryDevtools}
+              onCheckedChange={(checked) => {
+                setShowQueryDevtools(checked);
+                toast.success(checked ? 'Query DevTools enabled' : 'Query DevTools disabled', {
+                  description: 'React Query DevTools visibility updated',
+                });
+              }}
+            />
+          </div>
+        )}
       </div>
     </div>
   );

apps/ui/src/hooks/use-settings-migration.ts

@@ -713,6 +713,7 @@ export function hydrateStoreFromSettings(settings: GlobalSettings): void {
     muteDoneSound: settings.muteDoneSound ?? false,
     serverLogLevel: settings.serverLogLevel ?? 'info',
     enableRequestLogging: settings.enableRequestLogging ?? true,
+    showQueryDevtools: settings.showQueryDevtools ?? true,
     enhancementModel: settings.enhancementModel ?? 'claude-sonnet',
     validationModel: settings.validationModel ?? 'claude-opus',
     phaseModels: settings.phaseModels ?? current.phaseModels,

apps/ui/src/hooks/use-settings-sync.ts

@@ -58,6 +58,7 @@ const SETTINGS_FIELDS_TO_SYNC = [
   'muteDoneSound',
   'serverLogLevel',
   'enableRequestLogging',
+  'showQueryDevtools',
   'enhancementModel',
   'validationModel',
   'phaseModels',

apps/ui/src/routes/__root.tsx

@@ -40,7 +40,7 @@ import { useIsCompact } from '@/hooks/use-media-query';
 import type { Project } from '@/lib/electron';
 
 const logger = createLogger('RootLayout');
-const SHOW_QUERY_DEVTOOLS = import.meta.env.DEV;
+const IS_DEV = import.meta.env.DEV;
 const SERVER_READY_MAX_ATTEMPTS = 8;
 const SERVER_READY_BACKOFF_BASE_MS = 250;
 const SERVER_READY_MAX_DELAY_MS = 1500;
@@ -895,17 +895,22 @@ function RootLayoutContent() {
 }
 
 function RootLayout() {
-  // Hide devtools on compact screens (mobile/tablet) to avoid overlap with sidebar settings
+  // Hide devtools on compact screens (mobile/tablet) to avoid overlap with UI controls
   const isCompact = useIsCompact();
+  // Get the user's preference for showing devtools from the app store
+  const showQueryDevtools = useAppStore((state) => state.showQueryDevtools);
+
+  // Show devtools only if: in dev mode, user setting enabled, and not compact screen
+  const shouldShowDevtools = IS_DEV && showQueryDevtools && !isCompact;
 
   return (
     <QueryClientProvider client={queryClient}>
       <FileBrowserProvider>
         <RootLayoutContent />
       </FileBrowserProvider>
-      {SHOW_QUERY_DEVTOOLS && !isCompact ? (
+      {shouldShowDevtools && (
-        <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+        <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />
-      ) : null}
+      )}
     </QueryClientProvider>
   );
 }

apps/ui/src/store/app-store.ts

@@ -682,6 +682,9 @@ export interface AppState {
   serverLogLevel: ServerLogLevel; // Log level for the API server (error, warn, info, debug)
   enableRequestLogging: boolean; // Enable HTTP request logging (Morgan)
 
+  // Developer Tools Settings
+  showQueryDevtools: boolean; // Show React Query DevTools panel (only in development mode)
+
   // Enhancement Model Settings
   enhancementModel: ModelAlias; // Model used for feature enhancement (default: sonnet)
 
@@ -1168,6 +1171,9 @@ export interface AppActions {
   setServerLogLevel: (level: ServerLogLevel) => void;
   setEnableRequestLogging: (enabled: boolean) => void;
 
+  // Developer Tools actions
+  setShowQueryDevtools: (show: boolean) => void;
+
   // Enhancement Model actions
   setEnhancementModel: (model: ModelAlias) => void;
 
@@ -1472,6 +1478,7 @@ const initialState: AppState = {
   muteDoneSound: false, // Default to sound enabled (not muted)
   serverLogLevel: 'info', // Default to info level for server logs
   enableRequestLogging: true, // Default to enabled for HTTP request logging
+  showQueryDevtools: true, // Default to enabled (only shown in dev mode anyway)
   enhancementModel: 'claude-sonnet', // Default to sonnet for feature enhancement
   validationModel: 'claude-opus', // Default to opus for GitHub issue validation
   phaseModels: DEFAULT_PHASE_MODELS, // Phase-specific model configuration
@@ -2593,6 +2600,9 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
   setServerLogLevel: (level) => set({ serverLogLevel: level }),
   setEnableRequestLogging: (enabled) => set({ enableRequestLogging: enabled }),
 
+  // Developer Tools actions
+  setShowQueryDevtools: (show) => set({ showQueryDevtools: show }),
+
   // Enhancement Model actions
   setEnhancementModel: (model) => set({ enhancementModel: model }),
 

libs/types/src/settings.ts

@@ -863,6 +863,10 @@ export interface GlobalSettings {
   /** Enable HTTP request logging (Morgan). Default: true */
   enableRequestLogging?: boolean;
 
+  // Developer Tools
+  /** Show React Query DevTools panel (only in development mode). Default: true */
+  showQueryDevtools?: boolean;
+
   // AI Commit Message Generation
   /** Enable AI-generated commit messages when opening commit dialog (default: true) */
   enableAiCommitMessages: boolean;
@@ -1286,6 +1290,7 @@ export const DEFAULT_GLOBAL_SETTINGS: GlobalSettings = {
   muteDoneSound: false,
   serverLogLevel: 'info',
   enableRequestLogging: true,
+  showQueryDevtools: true,
   enableAiCommitMessages: true,
   phaseModels: DEFAULT_PHASE_MODELS,
   enhancementModel: 'sonnet', // Legacy alias still supported