@tanstack/router-devtools 0.0.1-beta.99 → 1.0.0

package/src/devtools.tsx

@@ -1,14 +1,19 @@
 import React from 'react'
 import {
-  last,
-  routerContext,
   invariant,
   AnyRouter,
-  useStore,
-} from '@tanstack/router'
+  Route,
+  AnyRoute,
+  AnyRootRoute,
+  trimPath,
+  useRouter,
+  useRouterState,
+  AnyRouteMatch,
+} from '@tanstack/react-router'
 
 import useLocalStorage from './useLocalStorage'
 import {
+  getRouteStatusColor,
   getStatusColor,
   multiSortBy,
   useIsMounted,
@@ -336,16 +341,16 @@ export function TanStackRouterDevtools({
                     right: '0',
                   }
                 : position === 'top-left'
-                ? {
-                    left: '0',
-                  }
-                : position === 'bottom-right'
-                ? {
-                    right: '0',
-                  }
-                : {
-                    left: '0',
-                  }),
+                  ? {
+                      left: '0',
+                    }
+                  : position === 'bottom-right'
+                    ? {
+                        right: '0',
+                      }
+                    : {
+                        left: '0',
+                      }),
               ...closeButtonStyle,
             }}
           >
@@ -380,19 +385,19 @@ export function TanStackRouterDevtools({
                   right: '0',
                 }
               : position === 'top-left'
-              ? {
-                  top: '0',
-                  left: '0',
-                }
-              : position === 'bottom-right'
-              ? {
-                  bottom: '0',
-                  right: '0',
-                }
-              : {
-                  bottom: '0',
-                  left: '0',
-                }),
+                ? {
+                    top: '0',
+                    left: '0',
+                  }
+                : position === 'bottom-right'
+                  ? {
+                      bottom: '0',
+                      right: '0',
+                    }
+                  : {
+                      bottom: '0',
+                      left: '0',
+                    }),
             ...toggleButtonStyle,
           }}
         >
@@ -403,6 +408,111 @@ export function TanStackRouterDevtools({
   )
 }
 
+function RouteComp({
+  route,
+  isRoot,
+  activeId,
+  setActiveId,
+}: {
+  route: AnyRootRoute | AnyRoute
+  isRoot?: boolean
+  activeId: string | undefined
+  setActiveId: (id: string) => void
+}) {
+  const routerState = useRouterState()
+  const matches =
+    routerState.status === 'pending'
+      ? routerState.pendingMatches ?? []
+      : routerState.matches
+
+  const match = routerState.matches.find((d) => d.routeId === route.id)
+
+  return (
+    <div>
+      <div
+        role="button"
+        aria-label={`Open match details for ${route.id}`}
+        onClick={() => {
+          if (match) {
+            setActiveId(activeId === route.id ? '' : route.id)
+          }
+        }}
+        style={{
+          display: 'flex',
+          borderBottom: `solid 1px ${theme.grayAlt}`,
+          cursor: match ? 'pointer' : 'default',
+          alignItems: 'center',
+          background:
+            route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,
+          padding: '.25rem .5rem',
+          gap: '.5rem',
+        }}
+      >
+        {isRoot ? null : (
+          <div
+            style={{
+              flex: '0 0 auto',
+              width: '.7rem',
+              height: '.7rem',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontWeight: 'bold',
+              borderRadius: '100%',
+              transition: 'all .2s ease-out',
+              background: getRouteStatusColor(matches, route, theme),
+              opacity: match ? 1 : 0.3,
+            }}
+          />
+        )}
+        <div
+          style={{
+            flex: '1 0 auto',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: isRoot ? '0 .25rem' : 0,
+            opacity: match ? 1 : 0.7,
+            fontSize: '0.7rem',
+          }}
+        >
+          <Code>{route.path || trimPath(route.id)} </Code>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '.5rem',
+            }}
+          >
+            {match ? <Code style={{ opacity: 0.3 }}>{match.id}</Code> : null}
+            <AgeTicker match={match} />
+          </div>
+        </div>
+      </div>
+      {(route.children as Route[])?.length ? (
+        <div
+          style={{
+            marginLeft: isRoot ? 0 : '1rem',
+            borderLeft: isRoot ? '' : `solid 1px ${theme.grayAlt}`,
+          }}
+        >
+          {[...(route.children as Route[])]
+            .sort((a, b) => {
+              return a.rank - b.rank
+            })
+            .map((r) => (
+              <RouteComp
+                key={r.id}
+                route={r}
+                activeId={activeId}
+                setActiveId={setActiveId}
+              />
+            ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
 export const TanStackRouterDevtoolsPanel = React.forwardRef<
   HTMLDivElement,
   DevtoolsPanelOptions
@@ -415,41 +525,43 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     ...panelProps
   } = props
 
-  const routerContextValue = React.useContext(routerContext)
-  const router = userRouter ?? routerContextValue?.router
+  const router = useRouter()
+  const routerState = useRouterState()
+
+  const matches = [
+    ...(routerState.pendingMatches ?? []),
+    ...routerState.matches,
+    ...routerState.cachedMatches,
+  ]
 
   invariant(
     router,
     'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',
   )
 
-  useStore(router.__store)
+  // useStore(router.__store)
 
-  const [activeRouteId, setActiveRouteId] = useLocalStorage(
-    'tanstackRouterDevtoolsActiveRouteId',
-    '',
+  const [showMatches, setShowMatches] = useLocalStorage(
+    'tanstackRouterDevtoolsShowMatches',
+    true,
   )
 
-  const [activeMatchId, setActiveMatchId] = useLocalStorage(
-    'tanstackRouterDevtoolsActiveMatchId',
+  const [activeId, setActiveId] = useLocalStorage(
+    'tanstackRouterDevtoolsActiveRouteId',
     '',
   )
 
-  React.useEffect(() => {
-    setActiveMatchId('')
-  }, [activeRouteId])
-
-  const allMatches = React.useMemo(
-    () => [
-      ...Object.values(router.state.currentMatches),
-      ...Object.values(router.state.pendingMatches ?? []),
-    ],
-    [router.state.currentMatches, router.state.pendingMatches],
+  const activeMatch = React.useMemo(
+    () => matches.find((d) => d.routeId === activeId || d.id === activeId),
+    [matches, activeId],
   )
 
-  const activeMatch =
-    allMatches?.find((d) => d.id === activeMatchId) ||
-    allMatches?.find((d) => d.route.id === activeRouteId)
+  const hasSearch = Object.keys(routerState.location.search || {}).length
+
+  const explorerState = {
+    ...router,
+    state: router.state,
+  }
 
   return (
     <ThemeProvider theme={theme}>
@@ -562,7 +674,49 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 padding: '.5em',
               }}
             >
-              <Explorer label="Router" value={router} defaultExpanded={{}} />
+              <Explorer
+                label="Router"
+                value={Object.fromEntries(
+                  multiSortBy(
+                    Object.keys(explorerState),
+                    (
+                      [
+                        'state',
+                        'routesById',
+                        'routesByPath',
+                        'flatRoutes',
+                        'options',
+                      ] as const
+                    ).map((d) => (dd) => dd !== d),
+                  )
+                    .map((key) => [key, (explorerState as any)[key]])
+                    .filter(
+                      (d) =>
+                        typeof d[1] !== 'function' &&
+                        ![
+                          '__store',
+                          'basepath',
+                          'injectedHtml',
+                          'subscribers',
+                          'latestLoadPromise',
+                          'navigateTimeout',
+                          'resetNextScroll',
+                          'tempLocationKey',
+                          'latestLocation',
+                          'routeTree',
+                          'history',
+                        ].includes(d[0]),
+                    ),
+                )}
+                defaultExpanded={{
+                  state: {} as any,
+                  context: {} as any,
+                  options: {} as any,
+                }}
+                filterSubEntries={(subEntries) => {
+                  return subEntries.filter((d) => typeof d.value !== 'function')
+                }}
+              />
             </div>
           </div>
         </div>
@@ -579,220 +733,280 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
         >
           <div
             style={{
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
+              flex: '1 1 auto',
+              overflowY: 'auto',
             }}
           >
-            Active Matches
-          </div>
-          {router.state.currentMatches.map((match, i) => {
-            return (
+            <div
+              style={{
+                padding: '.5em',
+                background: theme.backgroundAlt,
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: '.5rem',
+                fontWeight: 'bold',
+              }}
+            >
+              Pathname{' '}
+              {routerState.location.maskedLocation ? (
+                <div
+                  style={{
+                    padding: '.1rem .5rem',
+                    background: theme.warning,
+                    color: 'black',
+                    borderRadius: '.5rem',
+                  }}
+                >
+                  Masked
+                </div>
+              ) : null}
+            </div>
+            <div
+              style={{
+                padding: '.5rem',
+                display: 'flex',
+                gap: '.5rem',
+                alignItems: 'center',
+              }}
+            >
+              <code
+                style={{
+                  opacity: 0.6,
+                }}
+              >
+                {routerState.location.pathname}
+              </code>
+              {routerState.location.maskedLocation ? (
+                <code
+                  style={{
+                    color: theme.warning,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {routerState.location.maskedLocation.pathname}
+                </code>
+              ) : null}
+            </div>
+            <div
+              style={{
+                padding: '.5em',
+                background: theme.backgroundAlt,
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '.5rem',
+                fontWeight: 'bold',
+              }}
+            >
               <div
-                key={match.route.id || i}
-                role="button"
-                aria-label={`Open match details for ${match.route.id}`}
-                onClick={() =>
-                  setActiveRouteId(
-                    activeRouteId === match.route.id ? '' : match.route.id,
-                  )
-                }
                 style={{
                   display: 'flex',
-                  borderBottom: `solid 1px ${theme.grayAlt}`,
-                  cursor: 'pointer',
                   alignItems: 'center',
-                  background:
-                    match === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
+                  gap: '.5rem',
                 }}
               >
-                <div
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowMatches(false)
+                  }}
+                  disabled={!showMatches}
                   style={{
-                    flex: '0 0 auto',
-                    width: '1.3rem',
-                    height: '1.3rem',
-                    marginLeft: '.25rem',
-                    background: getStatusColor(match, theme),
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontWeight: 'bold',
-                    borderRadius: '.25rem',
-                    transition: 'all .2s ease-out',
+                    appearance: 'none',
+                    opacity: showMatches ? 0.5 : 1,
+                    border: 0,
+                    background: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
                   }}
-                />
-
-                <Code
+                >
+                  Routes
+                </button>
+                /
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowMatches(true)
+                  }}
+                  disabled={showMatches}
                   style={{
-                    padding: '.5em',
+                    appearance: 'none',
+                    opacity: !showMatches ? 0.5 : 1,
+                    border: 0,
+                    background: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
                   }}
                 >
-                  {`${match.id}`}
-                </Code>
+                  Matches
+                </button>
               </div>
-            )
-          })}
-          {router.state.pendingMatches?.length ? (
-            <>
               <div
                 style={{
-                  marginTop: '2rem',
-                  padding: '.5em',
-                  background: theme.backgroundAlt,
-                  position: 'sticky',
-                  top: 0,
-                  zIndex: 1,
+                  opacity: 0.3,
+                  fontSize: '0.7rem',
+                  fontWeight: 'normal',
                 }}
               >
-                Pending Matches
+                age / staleTime / gcTime
               </div>
-              {router.state.pendingMatches?.map((match, i) => {
-                return (
-                  <div
-                    key={match.route.id || i}
-                    role="button"
-                    aria-label={`Open match details for ${match.route.id}`}
-                    onClick={() =>
-                      setActiveRouteId(
-                        activeRouteId === match.route.id ? '' : match.route.id,
-                      )
-                    }
-                    style={{
-                      display: 'flex',
-                      borderBottom: `solid 1px ${theme.grayAlt}`,
-                      cursor: 'pointer',
-                      background:
-                        match === activeMatch
-                          ? 'rgba(255,255,255,.1)'
-                          : undefined,
-                    }}
-                  >
+            </div>
+            {!showMatches ? (
+              <RouteComp
+                route={router.routeTree}
+                isRoot
+                activeId={activeId}
+                setActiveId={setActiveId}
+              />
+            ) : (
+              <div>
+                {(routerState.status === 'pending'
+                  ? routerState.pendingMatches ?? []
+                  : routerState.matches
+                ).map((match, i) => {
+                  return (
                     <div
+                      key={match.id || i}
+                      role="button"
+                      aria-label={`Open match details for ${match.id}`}
+                      onClick={() =>
+                        setActiveId(activeId === match.id ? '' : match.id)
+                      }
                       style={{
-                        flex: '0 0 auto',
-                        width: '1.3rem',
-                        height: '1.3rem',
-                        marginLeft: '.25rem',
-                        background: getStatusColor(match, theme),
+                        display: 'flex',
+                        borderBottom: `solid 1px ${theme.grayAlt}`,
+                        cursor: 'pointer',
                         alignItems: 'center',
-                        justifyContent: 'center',
-                        fontWeight: 'bold',
-                        borderRadius: '.25rem',
-                        transition: 'all .2s ease-out',
-                      }}
-                    />
-
-                    <Code
-                      style={{
-                        padding: '.5em',
+                        background:
+                          match === activeMatch
+                            ? 'rgba(255,255,255,.1)'
+                            : undefined,
                       }}
                     >
-                      {`${match.id}`}
-                    </Code>
-                  </div>
-                )
-              })}
-            </>
-          ) : null}
-          {/* {matchCacheValues.length ? (
-            <>
+                      <div
+                        style={{
+                          flex: '0 0 auto',
+                          width: '1.3rem',
+                          height: '1.3rem',
+                          marginLeft: '.25rem',
+                          background: getStatusColor(match, theme),
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          fontWeight: 'bold',
+                          borderRadius: '.25rem',
+                          transition: 'all .2s ease-out',
+                        }}
+                      />
+
+                      <Code
+                        style={{
+                          padding: '.5em',
+                          fontSize: '0.7rem',
+                        }}
+                      >
+                        {`${match.id}`}
+                      </Code>
+                      <AgeTicker match={match} />
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+          {routerState.cachedMatches?.length ? (
+            <div
+              style={{
+                flex: '1 1 auto',
+                overflowY: 'auto',
+                maxHeight: '50%',
+              }}
+            >
               <div
                 style={{
-                  marginTop: '2rem',
                   padding: '.5em',
                   background: theme.backgroundAlt,
                   position: 'sticky',
                   top: 0,
-                  bottom: 0,
                   zIndex: 1,
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'space-between',
+                  gap: '.5rem',
+                  fontWeight: 'bold',
                 }}
               >
-                <div>Match Cache</div>
-                <Button
-                  onClick={() => {
-                    router.store.setState((s) => (s.matchCache = {}))
+                <div>Cached Matches</div>
+                <div
+                  style={{
+                    opacity: 0.3,
+                    fontSize: '0.7rem',
+                    fontWeight: 'normal',
                   }}
                 >
-                  Clear
-                </Button>
+                  age / staleTime / gcTime
+                </div>
               </div>
-              {matchCacheValues.map((d, i) => {
-                const { match, gc } = d
-
-                return (
-                  <div
-                    key={match.id || i}
-                    role="button"
-                    aria-label={`Open match details for ${match.id}`}
-                    onClick={() =>
-                      setActiveMatchId(
-                        activeMatchId === match.id ? '' : match.id,
-                      )
-                    }
-                    style={{
-                      display: 'flex',
-                      borderBottom: `solid 1px ${theme.grayAlt}`,
-                      cursor: 'pointer',
-                      background:
-                        match === activeMatch
-                          ? 'rgba(255,255,255,.1)'
-                          : undefined,
-                    }}
-                  >
+              <div>
+                {routerState.cachedMatches.map((match) => {
+                  return (
                     <div
+                      key={match.id}
+                      role="button"
+                      aria-label={`Open match details for ${match.id}`}
+                      onClick={() =>
+                        setActiveId(activeId === match.id ? '' : match.id)
+                      }
                       style={{
                         display: 'flex',
-                        flexDirection: 'column',
-                        padding: '.5rem',
-                        gap: '.3rem',
+                        borderBottom: `solid 1px ${theme.grayAlt}`,
+                        cursor: 'pointer',
+                        alignItems: 'center',
+                        background:
+                          match === activeMatch
+                            ? 'rgba(255,255,255,.1)'
+                            : undefined,
+                        fontSize: '0.7rem',
                       }}
                     >
                       <div
                         style={{
-                          display: 'flex',
+                          flex: '0 0 auto',
+                          width: '.75rem',
+                          height: '.75rem',
+                          marginLeft: '.25rem',
+                          background: getStatusColor(match, theme),
                           alignItems: 'center',
-                          gap: '.5rem',
+                          justifyContent: 'center',
+                          fontWeight: 'bold',
+                          borderRadius: '100%',
+                          transition: 'all 1s ease-out',
                         }}
-                      >
-                        <div
-                          style={{
-                            flex: '0 0 auto',
-                            width: '1.3rem',
-                            height: '1.3rem',
-                            background: getStatusColor(match, theme),
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            fontWeight: 'bold',
-                            borderRadius: '.25rem',
-                            transition: 'all .2s ease-out',
-                          }}
-                        />
-                        <Code>{`${match.id}`}</Code>
-                      </div>
-                      <span
+                      />
+
+                      <Code
                         style={{
-                          fontSize: '.7rem',
-                          opacity: '.5',
-                          lineHeight: 1,
+                          padding: '.5em',
                         }}
                       >
-                        Expires{' '}
-                        {formatDistanceStrict(new Date(gc), new Date(), {
-                          addSuffix: true,
-                        })}
-                      </span>
+                        {`${match.id}`}
+                      </Code>
+
+                      <div style={{ marginLeft: 'auto' }}>
+                        <AgeTicker match={match} />
+                      </div>
                     </div>
-                  </div>
-                )
-              })}
-            </>
-          ) : null} */}
+                  )
+                })}
+              </div>
+            </div>
+          ) : null}
         </div>
-
         {activeMatch ? (
           <ActivePanel>
             <div
@@ -808,7 +1022,11 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               Match Details
             </div>
             <div>
-              <table>
+              <table
+                style={{
+                  fontSize: '0.8rem',
+                }}
+              >
                 <tbody>
                   <tr>
                     <td style={{ opacity: '.5' }}>ID</td>
@@ -824,7 +1042,18 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Status</td>
-                    <td>{activeMatch.state.status}</td>
+                    <td>
+                      {routerState.pendingMatches?.find(
+                        (d) => d.id === activeMatch.id,
+                      )
+                        ? 'Pending'
+                        : routerState.matches?.find(
+                              (d) => d.id === activeMatch.id,
+                            )
+                          ? 'Active'
+                          : 'Cached'}{' '}
+                      - {activeMatch.status}
+                    </td>
                   </tr>
                   {/* <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
@@ -833,9 +1062,9 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   <tr>
                     <td style={{ opacity: '.5' }}>Last Updated</td>
                     <td>
-                      {activeMatch.state.updatedAt
+                      {activeMatch.updatedAt
                         ? new Date(
-                            activeMatch.state.updatedAt as number,
+                            activeMatch.updatedAt as number,
                           ).toLocaleTimeString()
                         : 'N/A'}
                     </td>
@@ -843,7 +1072,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 </tbody>
               </table>
             </div>
-            <div
+            {/* <div
               style={{
                 background: theme.backgroundAlt,
                 padding: '.5em',
@@ -862,14 +1091,41 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             >
               <Button
                 type="button"
-                onClick={() => activeMatch.load()}
+                onClick={() => activeMatch.__store.setState(d => ({...d, status: 'pending'}))}
                 style={{
                   background: theme.gray,
                 }}
               >
                 Reload
               </Button>
-            </div>
+            </div> */}
+            {activeMatch.loaderData ? (
+              <>
+                <div
+                  style={{
+                    background: theme.backgroundAlt,
+                    padding: '.5em',
+                    position: 'sticky',
+                    top: 0,
+                    bottom: 0,
+                    zIndex: 1,
+                  }}
+                >
+                  Loader Data
+                </div>
+                <div
+                  style={{
+                    padding: '.5em',
+                  }}
+                >
+                  <Explorer
+                    label="loaderData"
+                    value={activeMatch.loaderData}
+                    defaultExpanded={{}}
+                  />
+                </div>
+              </>
+            ) : null}
             <div
               style={{
                 background: theme.backgroundAlt,
@@ -895,89 +1151,120 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             </div>
           </ActivePanel>
         ) : null}
-        <div
-          style={{
-            flex: '1 1 500px',
-            minHeight: '40%',
-            maxHeight: '100%',
-            overflow: 'auto',
-            borderRight: `1px solid ${theme.grayAlt}`,
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          {/* <div
-            style={{
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              bottom: 0,
-              zIndex: 1,
-            }}
-          >
-            All Loader Data
-          </div>
+        {hasSearch ? (
           <div
             style={{
-              padding: '.5em',
-            }}
-          >
-            {Object.keys(
-              last(router.state.currentMatches)?.state.loaderData ||
-                {},
-            ).length ? (
-              <Explorer
-                value={
-                  last(router.state.currentMatches)?.state
-                    .loaderData || {}
-                }
-                defaultExpanded={Object.keys(
-                  (last(router.state.currentMatches)?.state
-                    .loaderData as {}) || {},
-                ).reduce((obj: any, next) => {
-                  obj[next] = {}
-                  return obj
-                }, {})}
-              />
-            ) : (
-              <em style={{ opacity: 0.5 }}>{'{ }'}</em>
-            )}
-          </div> */}
-          <div
-            style={{
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              bottom: 0,
-              zIndex: 1,
-            }}
-          >
-            Search Params
-          </div>
-          <div
-            style={{
-              padding: '.5em',
+              flex: '1 1 500px',
+              minHeight: '40%',
+              maxHeight: '100%',
+              overflow: 'auto',
+              borderRight: `1px solid ${theme.grayAlt}`,
+              display: 'flex',
+              flexDirection: 'column',
             }}
           >
-            {Object.keys(last(router.state.currentMatches)?.state.search || {})
-              .length ? (
+            <div
+              style={{
+                padding: '.5em',
+                background: theme.backgroundAlt,
+                position: 'sticky',
+                top: 0,
+                bottom: 0,
+                zIndex: 1,
+                fontWeight: 'bold',
+              }}
+            >
+              Search Params
+            </div>
+            <div
+              style={{
+                padding: '.5em',
+              }}
+            >
               <Explorer
-                value={last(router.state.currentMatches)?.state.search || {}}
+                value={routerState.location.search || {}}
                 defaultExpanded={Object.keys(
-                  (last(router.state.currentMatches)?.state.search as {}) || {},
+                  (routerState.location.search as {}) || {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj
                 }, {})}
               />
-            ) : (
-              <em style={{ opacity: 0.5 }}>{'{ }'}</em>
-            )}
+            </div>
           </div>
-        </div>
+        ) : null}
       </Panel>
     </ThemeProvider>
   )
 })
+
+function AgeTicker({ match }: { match?: AnyRouteMatch }) {
+  const router = useRouter()
+
+  const rerender = React.useReducer(
+    () => ({}),
+    () => ({}),
+  )[1]
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      rerender()
+    }, 1000)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  if (!match) {
+    return null
+  }
+
+  const route = router.looseRoutesById[match?.routeId]!
+
+  if (!route.options.loader) {
+    return null
+  }
+
+  const age = Date.now() - match?.updatedAt
+  const staleTime =
+    route.options.staleTime ?? router.options.defaultStaleTime ?? 0
+  const gcTime =
+    route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1000
+
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '.25rem',
+        color: age > staleTime ? theme.warning : undefined,
+      }}
+    >
+      <div style={{}}>{formatTime(age)}</div>
+      <div>/</div>
+      <div>{formatTime(staleTime)}</div>
+      <div>/</div>
+      <div>{formatTime(gcTime)}</div>
+    </div>
+  )
+}
+
+function formatTime(ms: number) {
+  const units = ['s', 'min', 'h', 'd']
+  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]
+
+  let chosenUnitIndex = 0
+  for (let i = 1; i < values.length; i++) {
+    if (values[i]! < 1) break
+    chosenUnitIndex = i
+  }
+
+  const formatter = new Intl.NumberFormat(navigator.language, {
+    compactDisplay: 'short',
+    notation: 'compact',
+    maximumFractionDigits: 0,
+  })
+
+  return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]
+}