Make dev tools visible on login

Expose API dev console on public pages by ensuring ApiDevTools runs in dev mode across all routes, and fix hook usage to render only in development. This includes wiring the dev console to public layout (login screen) and correcting the development-mode guard to avoid React hook issues.

X-Lovable-Edit-ID: edt-a9ff8f85-ee99-48e3-aa63-c62578cf7dab

src/components/dev/ApiDevTools.tsx

@@ -134,12 +134,17 @@ window.fetch = async function (input, init) {
   }
 };
 
+// Check if we're in development mode
+const isDev = import.meta.env.DEV;
+
 export default function ApiDevTools() {
   const [isOpen, setIsOpen] = useState(false);
   const [logs, setLogs] = useState<ApiLog[]>([...apiLogs]);
   const [selectedLog, setSelectedLog] = useState<ApiLog | null>(null);
 
   useEffect(() => {
+    if (!isDev) return;
+    
     const update = () => setLogs([...apiLogs]);
     listeners.add(update);
     return () => {
@@ -154,6 +159,11 @@ export default function ApiDevTools() {
     return "secondary";
   };
 
+  // Don't render in production
+  if (!isDev) {
+    return null;
+  }
+
   if (!isOpen) {
     return (
       <button