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 } =
-    useAppStore();
+  const {
+    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>
   );