Show API headers in dev tools

Add requestHeaders capture and display in the in-page API DevTools, including logging headers for each fetch to /api/*, and render them in the detail view alongside request body and response data.

X-Lovable-Edit-ID: edt-e077c0aa-43b2-48c6-952e-fc734b08627e

src/components/dev/ApiDevTools.tsx

@@ -10,6 +10,7 @@ interface ApiLog {
   method: string;
   url: string;
   requestBody?: unknown;
+  requestHeaders?: Record<string, string>;
   status?: number;
   statusText?: string;
   responseBody?: unknown;
@@ -67,12 +68,31 @@ window.fetch = async function (input, init) {
     requestBody = init?.body;
   }
 
+  // Extract request headers
+  const requestHeaders: Record<string, string> = {};
+  if (init?.headers) {
+    if (init.headers instanceof Headers) {
+      init.headers.forEach((value, key) => {
+        requestHeaders[key] = value;
+      });
+    } else if (Array.isArray(init.headers)) {
+      init.headers.forEach(([key, value]) => {
+        requestHeaders[key] = value;
+      });
+    } else {
+      Object.entries(init.headers).forEach(([key, value]) => {
+        if (value) requestHeaders[key] = value;
+      });
+    }
+  }
+
   addApiLog({
     id,
     timestamp: new Date(),
     method,
     url,
     requestBody,
+    requestHeaders,
   });
 
   const start = performance.now();
@@ -266,6 +286,18 @@ export default function ApiDevTools() {
                 </div>
               )}
 
+              {/* Request Headers (collapsible) */}
+              {selectedLog.requestHeaders && Object.keys(selectedLog.requestHeaders).length > 0 && (
+                <details className="group" open>
+                  <summary className="text-slate-500 cursor-pointer hover:text-slate-400">
+                    Request Headers ({Object.keys(selectedLog.requestHeaders).length})
+                  </summary>
+                  <pre className="bg-slate-800 p-2 rounded text-[10px] overflow-auto text-yellow-400 mt-1">
+                    {JSON.stringify(selectedLog.requestHeaders, null, 2)}
+                  </pre>
+                </details>
+              )}
+
               {selectedLog.requestBody && (
                 <div>
                   <div className="text-slate-500 mb-1">Request Body</div>