feat: add Request Log tab for real-time request monitoring

.changeset/request-log-feature.md

@@ -0,0 +1,17 @@
+---
+"@custardcream/msw-devtools": minor
+---
+
+feat: add Request Log tab for real-time request/response monitoring
+
+- Add 4th "Log" tab with real-time request/response logging
+- Capture matched and unmatched MSW requests via worker events
+- Show timestamp, method, status, URL, and response duration per entry
+- Expandable accordion for request/response body inspection
+- "Add Mock for this URL" shortcut on unmatched requests
+- Recording toggle, clear button, and All/Matched/Unmatched filter
+- Unread badge on Log tab when new requests arrive on other tabs
+- Early buffer captures requests before React tree mounts
+- Filter out static assets (.js, .css, etc.) and dev server requests
+- FIFO cap at 200 entries, memory only (no localStorage)
+- Full i18n support (EN/KO)

packages/msw-devtools/src/DevTools.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next"
 import { FaXmark } from "react-icons/fa6"
 
 import { FloatingButtonSettingsProvider } from "~/components/contexts/floating-button"
+import { RequestLogProvider } from "~/components/contexts/request-log"
 import { FloatingButton } from "~/components/FloatingButton"
 import { Layout } from "~/components/Layout"
 import { TabBar, TabProvider } from "~/components/tabs/TabBar"
@@ -38,17 +39,19 @@ const DevTools = ({ initialOpen = true }: { initialOpen?: boolean }) => {
         isOpened={isOpened}
       >
         <TabProvider>
-          <TabBar>
-            <button
-              type='button'
-              className='rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600'
-              onClick={close}
-              title={t("closeButton.title")}
-            >
-              <FaXmark size={14} />
-            </button>
-          </TabBar>
-          <TabBody />
+          <RequestLogProvider>
+            <TabBar>
+              <button
+                type='button'
+                className='rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600'
+                onClick={close}
+                title={t("closeButton.title")}
+              >
+                <FaXmark size={14} />
+              </button>
+            </TabBar>
+            <TabBody />
+          </RequestLogProvider>
         </TabProvider>
       </Layout>
     </FloatingButtonSettingsProvider>