update docs

Author: AlemTuzlak

docs/content/01-started/01-installation.mdx

@@ -47,16 +47,17 @@ export default defineConfig({
 Make sure your plugin is BEFORE the react router one!
 </WarningAlert>
 
+
+react-router-devtools uses @tanstack/devtools as the base for the UI, you can refer to their
+[documentation](https://tanstack.com/devtools/latest/docs/overview) for more information on how to use the devtools interface.
+
 ### CloudFlare
 
 If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in your `vite.config.js` file:
 ```ts
 optimizeDeps: {
   include: [
     // other optimized deps
-    "beautify",
-    "react-diff-viewer-continued",
-    "classnames",
     "@bkrem/react-transition-group",
   ],
 },

…ntent/02-features/02-active-page-tab.mdx …ntent/02-features/01-active-page-tab.mdxdocs/content/02-features/02-active-page-tab.mdx renamed to docs/content/02-features/01-active-page-tab.mdx docs/content/02-features/02-active-page-tab.mdx renamed to docs/content/02-features/01-active-page-tab.mdx

@@ -16,9 +16,6 @@ gradient background that can be set in the settings.
 <InfoAlert>
   This feature is only available in the development mode because it used react dev tools to find the `<Outlet />` component.
 
-  If you want to try it open up the dev tools right now nad hover over `/docs/main` in the panel.
-
-  You can also change the gradient background color in the settings.
 </InfoAlert>
 
 ## Loader list
@@ -33,16 +30,6 @@ the loader type and the loader file.
   - `green` - represents a normal route file, whether index or not
 </InfoAlert>
 
-### Open in VS code
-
-Each segment has an **open in VS code** button that opens the loader file in VS code.
-This is useful for quick navigation to the loader file.
-
-<InfoAlert title="Caveat!">
-This only works if you have the `code` command installed in your terminal. If you don't have it installed you can
- install it by following the instructions [here](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line).
-</InfoAlert>
-
 ### Loader data
 
 Each segment has a loader data **JSON** object that contains all the information returned by the loader of that segment.
@@ -66,19 +53,6 @@ This will contain all the **wildcard** params currently available on this route.
 If you open up the dev tools, you will be able to see that `tag` and `slug` are both in
 the route params.
 
-### Server info
-
-The server info section contains all the server information for the current segment, including:
-- `loaderTriggerCount` - the number of times the loader has been triggered (updates in real-time)
-- `actionTriggerCount` - the number of times the action has been triggered (updates in real-time)
-- `lowestExecutionTime` - the lowest execution time of the loader (updates in real-time)
-- `highestExecutionTime` - the highest execution time of the loader (updates in real-time)
-- `averageExecutionTime` - the average execution time of the loader (updates in real-time)
-- `lastLoaderInfo` - the last loader info object (updates in real-time), includes execution time, request headers and response headers.
-- `lastActionInfo` - the last action info object (updates in real-time), includes execution time, request headers and response headers.
-- `loaderCalls` - an array of loaderInfo objects ordered from most recent to least recent (updates in real-time)
-- `actionCalls` - an array of actionInfo objects ordered from most recent to least recent (updates in real-time)
-
 ### handles
 
 The handles section contains all the handles for the current segment.
@@ -98,7 +72,7 @@ The timeline section on the right contains useful information on navigation and
 
 Every time there is a navigation or submission event, a new entry will be added to the timeline on the top.
 
-It is limited to 50 entries and will remove the oldest entry when the limit is reached.
+It is limited to 30 entries and will remove the oldest entry when the limit is reached.
 
 The timeline will contain the following information for each event:
 - `type` - the type of event (navigation or submission, fetcher or normal)

docs/content/02-features/01-shortcuts.mdx

@@ -4,6 +4,17 @@ summary: "The Devtools context provides tracing utilities for loaders and action
 description: "Using the devtools context to trace events and send them to the network tab"
 ---
 
+## TanStack DevTools Integration
+
+React Router Devtools v6+ integrates with [TanStack DevTools](https://tanstack.com/devtools), providing enhanced debugging capabilities alongside React Router specific features. The devtools now include:
+
+- React Router specific tabs (Active Page, Routes, Network, Timeline, Settings)
+- TanStack DevTools panels for advanced state inspection
+- Unified debugging experience with seamless integration
+
+You can configure TanStack-specific behavior through the [general configuration](/configuration/general#tanstack-devtools-integration).
+
+---
 
 ## Devtools extended context
 
@@ -19,9 +30,9 @@ export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing.start("my-event")
+  const end = tracing.start("my-event")
   // do something here, eg DB call
-  tracing.end("my-event", startTime!)
+  end()
   return "data"
 }
 ```
@@ -33,9 +44,9 @@ export const action = async ({ request, devTools }: ActionFunctionArgs) => {
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something
-  tracing?.end("my-event", startTime!)
+  end()
   return "data"
 }
 ```
@@ -47,9 +58,9 @@ export const clientLoader = async ({ request, devTools }: ClientLoaderFunctionAr
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something
-  tracing?.end("my-event", startTime!)
+   end()
   return "data"
 }
 ```
@@ -59,9 +70,9 @@ export const clientAction = async ({ request, devTools }: ClientActionFunctionAr
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something
-  tracing?.end("my-event", startTime!)
+   end()
   return "data"
 }
 ```
@@ -103,10 +114,9 @@ const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
 The tracing object contains all the utilities related to network tab tracing feature of react-router-devtools.
 
 
-There are three functions you can use:
+There are two functions you can use:
 - trace
 - start
-- end
 
 
 
@@ -143,18 +153,18 @@ This is used together with `end` to trace the time of the event.
 export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
   const tracing = devTools?.tracing;
   // this will be traced in the network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something here, eg DB call
 
   // End the trace
-  tracing?.end("my-event", startTime!)
+   end()
   return "data"
 }
 ```
 
 <WarningAlert title="Warning">
- This function relies on you using the `end` with the same name as the start event, otherwise
-you will end up having a never ending loading bar in the network tab!
+ This function relies on you using the `end`returned from it, otherwise the event
+ will never end in your devtools
 </WarningAlert>
 
 
@@ -164,32 +174,4 @@ you will end up having a never ending loading bar in the network tab!
 
 #### Returns
 
-The start time of the event
-
-### end
-
-The `end` function is a function that will end a trace for the name provided to it and return the end time.
-
-```ts
-export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // this will be traced in the network tab of react-router-devtools
-  const startTime = tracing?.start("get user")
-  // do something here, eg DB call
-  const user = await getUser();
-  // End the trace
-  tracing?.end("get user", startTime!, { user })
-  return "data"
-
-}
-```
-
-#### Parameters
-
-- `name` - The name of the event
-- `startTime` - The start time of the sendEvent
-- `data` - The data to be sent with the event
-
-#### Returns
-
-The data provided in the last parameter
+The end trace function

…cs/content/02-features/03-routes-tab.mdx …cs/content/02-features/02-routes-tab.mdxdocs/content/02-features/03-routes-tab.mdx renamed to docs/content/02-features/02-routes-tab.mdx docs/content/02-features/03-routes-tab.mdx renamed to docs/content/02-features/02-routes-tab.mdx

@@ -13,21 +13,32 @@ To shuffle through the requests, press the `←` and `→` keys.
 
 ## Request types
 
-There are four types of requests in react-router-devtools:
+There are six types of data handling exports in react-router-devtools:
 - **client-loader** - A client-loader is a request that is initiated by the client and is used to load data for a route.
 - **client-action** - A client-action is a request that is initiated by the client and is used to submit data to a route.
 - **loader** - A loader is a request that is initiated by the server and is used to load data for a route.
 - **action** - An action is a request that is initiated by the server and is used to submit data to a route.
+- **middleware** - A middleware is run before and after all your loaders on the server
+- **client-middleware** - A client-middleware is run before and after all your client-loaders on the client
 
 <InfoAlert>
   Each of these is colored differently for you to be able to quickly identify them.
 - loader - green
 - client-loader - blue
 - action - purple
 - client-action - yellow
+- middleware - orange
+- client-middleware - pink
 -	aborted requests - red
+
 </InfoAlert>
 
+
+## Filtering
+
+You can filter the requests by their type by clicking on the filter buttons at the top of the network tab.
+You can also filter by route as well
+
 ## Request info
 
 Clicking on any request name will show you detailed information about that request. This includes the request's name, the