diff --git a/.changeset/wicked-toes-beg.md b/.changeset/wicked-toes-beg.md
new file mode 100644
index 000000000000..19ffc7aff816
--- /dev/null
+++ b/.changeset/wicked-toes-beg.md
@@ -0,0 +1,9 @@
+---
+'@integration-test/devtools': minor
+'@modern-js/devtools-client': minor
+'@modern-js/plugin-devtools': minor
+'@modern-js/devtools-kit': minor
+---
+
+feat(devtools): add new doctor tab to show overview of rsdoctor
+feat(devtools): 新增 doctor 页面展示 Rsdoctor 概览信息
diff --git a/packages/devtools/client/modern.config.ts b/packages/devtools/client/modern.config.ts
index e2459b0c811e..1b3ffc94d7d3 100644
--- a/packages/devtools/client/modern.config.ts
+++ b/packages/devtools/client/modern.config.ts
@@ -46,6 +46,22 @@ export default defineConfig<'rspack'>({
     disableInlineRuntimeChunk: true,
     disableSourceMap: process.env.NODE_ENV === 'production',
   },
+  performance: {
+    chunkSplit: {
+      strategy: 'split-by-experience',
+      override: {
+        cacheGroups: {
+          components: {
+            test: /\/src\/components\/.*\.(scss|css)$/,
+            chunks: 'all',
+            name: 'components',
+            enforce: true,
+            priority: 9999,
+          },
+        },
+      },
+    },
+  },
   tools: {
     postcss: (config, { addPlugins }) => {
       addPlugins(require('postcss-custom-media'));
diff --git a/packages/devtools/client/src/assets/NotoSans-latin-subset.woff2 b/packages/devtools/client/src/assets/NotoSans-latin-subset.woff2
new file mode 100644
index 000000000000..d2f454384d4d
Binary files /dev/null and b/packages/devtools/client/src/assets/NotoSans-latin-subset.woff2 differ
diff --git a/packages/devtools/client/src/components/Card/Indicate.module.scss b/packages/devtools/client/src/components/Card/Indicate.module.scss
new file mode 100644
index 000000000000..08cfc156efd2
--- /dev/null
+++ b/packages/devtools/client/src/components/Card/Indicate.module.scss
@@ -0,0 +1,8 @@
+.indicate-card {
+  border-radius: var(--radius-5);
+  box-shadow: var(--shadow-4);
+  padding: var(--space-5);
+  :global(.dark) & {
+    background-color: var(--gray-1);
+  }
+}
diff --git a/packages/devtools/client/src/components/Card/Indicate.tsx b/packages/devtools/client/src/components/Card/Indicate.tsx
new file mode 100644
index 000000000000..25be8691694d
--- /dev/null
+++ b/packages/devtools/client/src/components/Card/Indicate.tsx
@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import clsx from 'clsx';
+import { Box, Flex } from '@radix-ui/themes';
+import type { BoxProps } from '@radix-ui/themes/dist/cjs/components/box';
+import type { FlexProps } from '@radix-ui/themes/dist/cjs/components/flex';
+import styles from './Indicate.module.scss';
+
+export type IndicateCardProps = BoxProps & React.RefAttributes<HTMLDivElement>;
+
+const Card: FC<IndicateCardProps> = ({ children, className, ...props }) => {
+  return (
+    <Box {...props} className={clsx(styles.indicateCard, className)}>
+      {children}
+    </Box>
+  );
+};
+
+Card.displayName = 'IndicateCard';
+
+const Column: FC<FlexProps> = props => (
+  <Flex
+    gap="2"
+    height="100%"
+    justify="center"
+    direction="column"
+    align="start"
+    {...props}
+  />
+);
+
+Column.displayName = 'IndicateCard.Column';
+
+export const IndicateCard = Object.assign(Card, {
+  Column,
+});
diff --git a/packages/devtools/client/src/components/Card/index.ts b/packages/devtools/client/src/components/Card/index.ts
new file mode 100644
index 000000000000..65cde4cb5201
--- /dev/null
+++ b/packages/devtools/client/src/components/Card/index.ts
@@ -0,0 +1 @@
+export * from './Indicate';
diff --git a/packages/devtools/client/src/components/Devtools/Capsule.tsx b/packages/devtools/client/src/components/Devtools/Capsule.tsx
index 50228cf8016f..3943bdc76a8e 100644
--- a/packages/devtools/client/src/components/Devtools/Capsule.tsx
+++ b/packages/devtools/client/src/components/Devtools/Capsule.tsx
@@ -1,7 +1,7 @@
 import { SetupClientParams } from '@modern-js/devtools-kit/runtime';
 import { Flex, Theme } from '@radix-ui/themes';
 import React, { useEffect, useState } from 'react';
-import { useEvent, useToggle } from 'react-use';
+import { useAsync, useEvent, useToggle } from 'react-use';
 import { HiMiniCursorArrowRipple } from 'react-icons/hi2';
 import { withQuery } from 'ufo';
 import Visible from '../Visible';
@@ -13,9 +13,21 @@ import { $client, wallAgent } from '@/entries/mount/state';
 import { pTimeout } from '@/utils/promise';
 import { ReactDevtoolsWallListener } from '@/utils/react-devtools';
 
+const parseDeepLink = (url = window.location) => {
+  // Expected: #/__devtools/doctor
+  const { hash } = url;
+  // Parse pathname from hash.
+  const pathname = hash.match(/^#\/__devtools(.*)/)?.[1];
+  // Check if match the expected pattern.
+  if (typeof pathname !== 'string') return null;
+  if (pathname === '') return '/';
+  return pathname;
+};
+
 export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
   const logoSrc = props.def.assets.logo;
-  const [showDevtools, toggleDevtools] = useToggle(false);
+  const deepLink = parseDeepLink();
+  const [showDevtools, toggleDevtools] = useToggle(Boolean(deepLink));
   const [loadDevtools, setLoadDevtools] = useState(false);
 
   const src = withQuery(props.endpoint, { src: props.dataSource });
@@ -64,13 +76,19 @@ export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
     setLoadDevtools(true);
     try {
       const client = await pTimeout($client, 10_000);
-      client.remote.pullUpReactInspector();
+      client.remote.pullUp('/react/components#inspecting');
     } catch (e) {
       console.error(e);
       document.documentElement.style.removeProperty('cursor');
     }
   };
 
+  useAsync(async () => {
+    if (!deepLink) return;
+    const client = await pTimeout($client, 10_000);
+    client.remote.pullUp(deepLink);
+  }, []);
+
   return (
     <Theme appearance={appearance} className={appearance}>
       <Visible when={showDevtools} keepAlive={true} load={loadDevtools}>
diff --git a/packages/devtools/client/src/components/Devtools/Puller.tsx b/packages/devtools/client/src/components/Devtools/Puller.tsx
index d3110cccb074..b105097740e2 100644
--- a/packages/devtools/client/src/components/Devtools/Puller.tsx
+++ b/packages/devtools/client/src/components/Devtools/Puller.tsx
@@ -2,32 +2,23 @@ import React, { useEffect } from 'react';
 import { useNavigate } from '@modern-js/runtime/router';
 import { useThrowable } from '@/utils';
 import { $mountPoint } from '@/entries/client/routes/state';
-import { wallAgent } from '@/entries/client/routes/react/state';
 
-let _intendPullUp = false;
+let _intendPullUp = '';
 
 $mountPoint.then(({ hooks }) => {
-  hooks.hookOnce('pullUpReactInspector', async () => {
-    _intendPullUp = true;
+  hooks.hookOnce('pullUp', async target => {
+    _intendPullUp = target;
   });
 });
 
-export const DevtoolsPuller: React.FC = () => {
+export const Puller: React.FC = () => {
   const navigate = useNavigate();
   const mountPoint = useThrowable($mountPoint);
-  const handlePullUp = async () => {
-    navigate('/react');
-    if (wallAgent.status === 'active') {
-      wallAgent.send('startInspectingNative', null);
-    } else {
-      wallAgent.hookOnce('active', () => {
-        wallAgent.send('startInspectingNative', null);
-      });
-    }
-  };
   useEffect(() => {
-    _intendPullUp && handlePullUp();
-    mountPoint.hooks.hook('pullUpReactInspector', handlePullUp);
+    _intendPullUp && navigate(_intendPullUp);
+    mountPoint.hooks.hook('pullUp', async target => {
+      navigate(target);
+    });
   }, []);
   return null;
 };
diff --git a/packages/devtools/client/src/components/ErrorFallback/ErrorFallback.tsx b/packages/devtools/client/src/components/Error/Fallback.tsx
similarity index 77%
rename from packages/devtools/client/src/components/ErrorFallback/ErrorFallback.tsx
rename to packages/devtools/client/src/components/Error/Fallback.tsx
index f0356b35f15b..899cf53e7a89 100644
--- a/packages/devtools/client/src/components/ErrorFallback/ErrorFallback.tsx
+++ b/packages/devtools/client/src/components/Error/Fallback.tsx
@@ -21,14 +21,12 @@ export const ErrorFallback: React.FC<ErrorFallbackProps> = props => {
       <Heading as="h4" mb="4">
         <Text as="span">{title}</Text>
       </Heading>
-      <TextArea disabled style={{ height: '50vh' }}>
-        {description}
-      </TextArea>
+      <TextArea disabled style={{ height: '50vh' }} value={description} />
     </Box>
   );
 };
 
-export const ErrorRouteHandler: React.FC<ErrorFallbackProps> = props => {
+export const ErrorRouteHandler: React.FC = () => {
   const error = useRouteError();
-  return <ErrorFallback {...props} error={error} />;
+  return <ErrorFallback resetErrorBoundary={() => null} error={error} />;
 };
diff --git a/packages/devtools/client/src/components/Error/FeatureDisabled.module.scss b/packages/devtools/client/src/components/Error/FeatureDisabled.module.scss
new file mode 100644
index 000000000000..75812d6f9904
--- /dev/null
+++ b/packages/devtools/client/src/components/Error/FeatureDisabled.module.scss
@@ -0,0 +1,9 @@
+.container {
+  width: max-content;
+  min-width: var(--space-9);
+  color: var(--gray-11);
+}
+
+.children {
+  color: var(--gray-9);
+}
diff --git a/packages/devtools/client/src/components/Error/FeatureDisabled.tsx b/packages/devtools/client/src/components/Error/FeatureDisabled.tsx
new file mode 100644
index 000000000000..779cabdfd3c3
--- /dev/null
+++ b/packages/devtools/client/src/components/Error/FeatureDisabled.tsx
@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { HiExclamationCircle } from 'react-icons/hi2';
+import styles from './FeatureDisabled.module.scss';
+
+export interface FeatureDisabledProps extends PropsWithChildren {
+  title: string;
+}
+
+export const FeatureDisabled: React.FC<FeatureDisabledProps> = props => {
+  const { title, children } = props;
+  return (
+    <Flex className={styles.container} mt="9" mx="auto" gap="2">
+      <Flex height="9" align="center">
+        <HiExclamationCircle size="36" />
+      </Flex>
+      <Box>
+        <Flex height="9" align="center">
+          <Heading>{title}</Heading>
+        </Flex>
+        <Box className={styles.children}>{children}</Box>
+      </Box>
+    </Flex>
+  );
+};
diff --git a/packages/devtools/client/src/components/ErrorFallback/index.ts b/packages/devtools/client/src/components/ErrorFallback/index.ts
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/devtools/client/src/entries/client/routes/config/error.tsx b/packages/devtools/client/src/entries/client/routes/config/error.tsx
index fc315e95a4f8..23d8d6dbd39c 100644
--- a/packages/devtools/client/src/entries/client/routes/config/error.tsx
+++ b/packages/devtools/client/src/entries/client/routes/config/error.tsx
@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/context/error.tsx b/packages/devtools/client/src/entries/client/routes/context/error.tsx
index fc315e95a4f8..23d8d6dbd39c 100644
--- a/packages/devtools/client/src/entries/client/routes/context/error.tsx
+++ b/packages/devtools/client/src/entries/client/routes/context/error.tsx
@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/doctor/error.tsx b/packages/devtools/client/src/entries/client/routes/doctor/error.tsx
new file mode 100644
index 000000000000..4636e5a4e873
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/doctor/error.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { useRouteError } from '@modern-js/runtime/router';
+import { Box, Link } from '@radix-ui/themes';
+import { useSnapshot } from 'valtio';
+import { parseURL } from 'ufo';
+import { $definition } from '../state';
+import {
+  ErrorFallbackProps,
+  ErrorRouteHandler,
+} from '@/components/Error/Fallback';
+import { FeatureDisabled } from '@/components/Error/FeatureDisabled';
+
+const Handler: FC<ErrorFallbackProps> = () => {
+  const error = useRouteError();
+  const def = useSnapshot($definition);
+  const isStateError =
+    error && typeof error === 'object' && Object.keys(error).length === 0;
+  if (isStateError) {
+    const websiteDisplay = parseURL(def.doctor.quickStart).host;
+    const websiteLink = (
+      <Link
+        href={def.doctor.quickStart}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        🔗{websiteDisplay}
+      </Link>
+    );
+    return (
+      <Box width="100%">
+        <FeatureDisabled title="Doctor is not working">
+          Visit the website of {websiteLink} to learn more.
+        </FeatureDisabled>
+      </Box>
+    );
+  } else {
+    return <ErrorRouteHandler />;
+  }
+};
+
+export default Handler;
diff --git a/packages/devtools/client/src/entries/client/routes/doctor/layout.config.ts b/packages/devtools/client/src/entries/client/routes/doctor/layout.config.ts
new file mode 100644
index 000000000000..559fec86039e
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/doctor/layout.config.ts
@@ -0,0 +1,5 @@
+export const handle = {
+  breadcrumb: {
+    title: 'Doctor',
+  },
+};
diff --git a/packages/devtools/client/src/entries/client/routes/doctor/page.module.scss b/packages/devtools/client/src/entries/client/routes/doctor/page.module.scss
new file mode 100644
index 000000000000..d4b89267e479
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/doctor/page.module.scss
@@ -0,0 +1,101 @@
+.container {
+  max-width: 40rem;
+  width: 100%;
+}
+
+.primary-card {
+  flex: 4;
+  min-width: max-content;
+  background-color: var(--amber-9);
+  :global(.dark) & {
+    background-color: var(--amber-9);
+  }
+  button {
+    border: none;
+    border-radius: var(--radius-thumb);
+    color: var(--black-a8);
+    font-size: var(--font-size-1);
+    font-weight: var(--font-weight-regular);
+    padding: var(--space-1) var(--space-2);
+    overflow: hidden;
+    background-color: var(--black-a2);
+    &:hover,
+    &:active {
+      background-color: var(--black-a1);
+    }
+  }
+}
+
+.info-card {
+  flex: 2;
+  min-width: max-content;
+}
+
+.count-card {
+  flex: 1;
+  min-width: max-content;
+}
+
+.compile-cost-card {
+  flex: 4;
+}
+
+.logo {
+  width: var(--space-8);
+  opacity: 0.5;
+}
+
+.count-text {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.error-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--space-1);
+  color: var(--gray-11);
+}
+
+.text-truncation {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cost-box {
+  min-width: var(--space-2);
+
+  .cost-bar {
+    height: var(--space-1);
+    width: 100%;
+    border-radius: var(--radius-thumb);
+  }
+
+  &:nth-child(odd) {
+    .cost-bar {
+      background-color: var(--red-9);
+    }
+  }
+
+  &:nth-child(even) {
+    .cost-bar {
+      background-color: var(--orange-9);
+    }
+  }
+
+  .cost-label {
+    word-break: keep-all;
+    display: block;
+    margin-bottom: var(--space-2);
+  }
+}
+
+.heading {
+  font-family: 'NotoSans';
+  font-weight: 900;
+  font-size: var(--font-size-7);
+}
diff --git a/packages/devtools/client/src/entries/client/routes/doctor/page.tsx b/packages/devtools/client/src/entries/client/routes/doctor/page.tsx
new file mode 100644
index 000000000000..ec7ae68eb3c9
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/doctor/page.tsx
@@ -0,0 +1,217 @@
+import { FC } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Box,
+  Flex,
+  Heading,
+  HoverCard,
+  Link,
+  Text,
+  Theme,
+} from '@radix-ui/themes';
+import {
+  HiChartBar,
+  HiLink,
+  HiMiniArchiveBox,
+  HiMiniExclamationCircle,
+  HiMiniInboxStack,
+  HiMiniRectangleStack,
+} from 'react-icons/hi2';
+import _ from 'lodash';
+import { parseURL } from 'ufo';
+import clsx from 'clsx';
+import { $definition, $dependencies } from '../state';
+import logo from './rsdoctor-large.png';
+import { $doctor } from './state';
+import styles from './page.module.scss';
+import { IndicateCard } from '@/components/Card';
+
+interface SummaryCostsData {
+  title: string;
+  name: string;
+  startAt: number;
+  costs: number;
+}
+
+const WEBPACK_HOOKS_PREFIX = 'https://webpack.js.org/api/compiler-hooks';
+
+const GraphBar: FC<{ cost: SummaryCostsData }> = ({ cost }) => {
+  const [leftHook, rightHook] = cost.name.split('->');
+  const [leftHref, rightHref] = [leftHook, rightHook].map(hook =>
+    ['bootstrap', 'done'].includes(hook)
+      ? undefined
+      : `${WEBPACK_HOOKS_PREFIX}#${hook.toLowerCase()}`,
+  );
+  const formattedCost =
+    cost.costs > 1_000
+      ? `${(cost.costs / 1_000).toFixed(2)}s`
+      : `${cost.costs}ms`;
+  return (
+    <HoverCard.Root>
+      <HoverCard.Trigger>
+        <Box className={styles.costBox} style={{ flex: cost.costs }}>
+          <Text
+            size="1"
+            color="gray"
+            className={clsx(styles.textTruncation, styles.costLabel)}
+          >
+            {_.startCase(cost.title)}({formattedCost})
+          </Text>
+          <Box className={styles.costBar} />
+        </Box>
+      </HoverCard.Trigger>
+      <HoverCard.Content size="1">
+        <Text size="1" color="gray">
+          <Link target="_blank" href={leftHref}>
+            {leftHook}
+          </Link>
+          <Text> ···{formattedCost}··· </Text>
+          <Link target="_blank" href={rightHref}>
+            {rightHook}
+          </Link>
+        </Text>
+      </HoverCard.Content>
+    </HoverCard.Root>
+  );
+};
+
+const Page: FC = () => {
+  const doctor = useSnapshot($doctor);
+
+  const dependencies = useSnapshot($dependencies);
+  const def = useSnapshot($definition);
+  const isWebDoctor = Object.keys(dependencies).find(key =>
+    key.startsWith('@web-doctor/'),
+  );
+  const implementation = isWebDoctor ? 'Web Doctor' : 'Rsdoctor';
+  const version =
+    dependencies['@web-doctor/webpack-plugin(builder)'] ??
+    dependencies['@web-doctor/rspack-plugin(builder)'] ??
+    dependencies['@web-doctor/webpack-plugin'] ??
+    dependencies['@web-doctor/rspack-plugin'] ??
+    dependencies['@rsdoctor/rspack-plugin'] ??
+    dependencies['@rsdoctor/webpack-plugin'] ??
+    dependencies['@rsdoctor/core'];
+
+  const costs: SummaryCostsData[] = _(doctor.summary.costs)
+    .sortBy(['startAt', 'name', 'costs'])
+    .sortedUniqBy('name')
+    .cloneDeep()
+    .map(cost => {
+      if (cost.name === 'bootstrap->beforeCompile') {
+        return { ...cost, title: 'prepare' };
+      } else if (cost.name === 'beforeCompile->afterCompile') {
+        return { ...cost, title: 'compile' };
+      } else if (cost.name === 'afterCompile->done') {
+        return { ...cost, title: 'optimize' };
+      }
+      return { ...cost, title: 'unknown' };
+    });
+
+  const errors = _.groupBy(doctor.errors, 'description');
+
+  return (
+    <Flex direction="column" align="center" p="4">
+      <Flex
+        wrap="wrap"
+        gap="4"
+        mb="8"
+        justify="center"
+        className={styles.container}
+      >
+        <IndicateCard className={styles.primaryCard}>
+          <Theme appearance="light" hasBackground={false} asChild>
+            <IndicateCard.Column>
+              <Heading as="h1" color="gray" className={styles.heading}>
+                {implementation}
+              </Heading>
+              <Flex gap="2">
+                <button type="button">
+                  {version ? `v${version}` : 'Unknown'}
+                </button>
+              </Flex>
+              <Link
+                href={def.doctor.quickStart}
+                color="gray"
+                size="1"
+                underline="always"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Launch {implementation} with complete features.
+              </Link>
+            </IndicateCard.Column>
+          </Theme>
+        </IndicateCard>
+        <IndicateCard className={styles.infoCard}>
+          <Flex justify="between" gap="2" align="center" height="100%">
+            <Box>
+              <Text color="gray">Visit our website</Text>
+              <Flex align="center" asChild>
+                <Link
+                  href={def.doctor.home}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <HiLink />
+                  <Text>{parseURL(def.doctor.home).host}</Text>
+                </Link>
+              </Flex>
+            </Box>
+            <img className={styles.logo} src={logo} />
+          </Flex>
+        </IndicateCard>
+        <IndicateCard className={styles.countCard}>
+          <IndicateCard.Column>
+            <Text className={styles.countText} size="1">
+              <HiMiniRectangleStack /> {doctor.numModules} modules
+            </Text>
+            <Text className={styles.countText} size="1">
+              <HiMiniInboxStack /> {doctor.numPackages} packages
+            </Text>
+            <Text className={styles.countText} size="1">
+              <HiMiniArchiveBox /> {doctor.numChunks} chunks
+            </Text>
+          </IndicateCard.Column>
+        </IndicateCard>
+        <IndicateCard className={styles.compileCostCard}>
+          <IndicateCard.Column>
+            <Flex asChild align="center" gap="1">
+              <Heading as="h3" size="2" color="gray">
+                <HiChartBar />
+                Compile Overall
+              </Heading>
+            </Flex>
+            <Flex width="100%" gap="1">
+              {costs.map(cost => (
+                <GraphBar key={cost.name} cost={cost} />
+              ))}
+            </Flex>
+          </IndicateCard.Column>
+        </IndicateCard>
+        <IndicateCard width="100%">
+          <IndicateCard.Column>
+            <Text weight="bold" size="1" color="gray">
+              Found {_.size(errors)} {_.size(errors) > 1 ? 'errors' : 'error'}
+            </Text>
+            {Object.entries(errors).map(([desc, errs]) => (
+              <Box key={desc} className={styles.errorItem}>
+                <HiMiniExclamationCircle className={styles.errorIcon} />{' '}
+                <Text size="1" className={styles.textTruncation}>
+                  {desc}
+                </Text>
+                {errs.length > 1 && (
+                  <Text size="1" className={styles.errorCount}>
+                    (x{errs.length})
+                  </Text>
+                )}
+              </Box>
+            ))}
+          </IndicateCard.Column>
+        </IndicateCard>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Page;
diff --git a/packages/devtools/client/src/entries/client/routes/doctor/rsdoctor-large.png b/packages/devtools/client/src/entries/client/routes/doctor/rsdoctor-large.png
new file mode 100644
index 000000000000..1656dad727a9
Binary files /dev/null and b/packages/devtools/client/src/entries/client/routes/doctor/rsdoctor-large.png differ
diff --git a/packages/devtools/client/src/entries/client/routes/doctor/state.ts b/packages/devtools/client/src/entries/client/routes/doctor/state.ts
new file mode 100644
index 000000000000..3c93ce395d2d
--- /dev/null
+++ b/packages/devtools/client/src/entries/client/routes/doctor/state.ts
@@ -0,0 +1,12 @@
+import { proxy } from 'valtio';
+import { $server } from '../state';
+
+const _request = $server.then(server => server.remote.getDoctorOverview());
+
+export const $doctor = proxy({
+  errors: _request.then(res => res.errors),
+  numChunks: _request.then(res => res.numChunks),
+  numModules: _request.then(res => res.numModules),
+  numPackages: _request.then(res => res.numPackages),
+  summary: _request.then(res => res.summary),
+});
diff --git a/packages/devtools/client/src/entries/client/routes/error.tsx b/packages/devtools/client/src/entries/client/routes/error.tsx
index fc315e95a4f8..23d8d6dbd39c 100644
--- a/packages/devtools/client/src/entries/client/routes/error.tsx
+++ b/packages/devtools/client/src/entries/client/routes/error.tsx
@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/headers/error.tsx b/packages/devtools/client/src/entries/client/routes/headers/error.tsx
index fc315e95a4f8..23d8d6dbd39c 100644
--- a/packages/devtools/client/src/entries/client/routes/headers/error.tsx
+++ b/packages/devtools/client/src/entries/client/routes/headers/error.tsx
@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/layout.tsx b/packages/devtools/client/src/entries/client/routes/layout.tsx
index a991298c5e7c..2283173d7580 100644
--- a/packages/devtools/client/src/entries/client/routes/layout.tsx
+++ b/packages/devtools/client/src/entries/client/routes/layout.tsx
@@ -16,7 +16,7 @@ import { $tabs } from './state';
 import { Theme } from '@/components/Theme';
 import { InternalTab } from '@/entries/client/types';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
-import { DevtoolsPuller } from '@/components/Devtools/Puller';
+import { Puller } from '@/components/Devtools/Puller';
 
 const NavigateButton: React.FC<{ tab: InternalTab }> = ({ tab }) => {
   let to = '';
@@ -107,7 +107,7 @@ export default function Layout() {
       <ThemePanel defaultOpen={false} style={{ display }} />
       <Navigator />
       <Breadcrumbs className={styles.breadcrumbs} />
-      <DevtoolsPuller />
+      <Puller />
     </Theme>
   );
 }
diff --git a/packages/devtools/client/src/entries/client/routes/overview/error.tsx b/packages/devtools/client/src/entries/client/routes/overview/error.tsx
index fc315e95a4f8..23d8d6dbd39c 100644
--- a/packages/devtools/client/src/entries/client/routes/overview/error.tsx
+++ b/packages/devtools/client/src/entries/client/routes/overview/error.tsx
@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/overview/heading.svg b/packages/devtools/client/src/entries/client/routes/overview/heading.svg
deleted file mode 100644
index c25179e14745..000000000000
--- a/packages/devtools/client/src/entries/client/routes/overview/heading.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="455.127" height="76.954" viewBox="0 0 455.127 76.954" xmlns="http://www.w3.org/2000/svg">
-  <g id="svgGroup" stroke-linecap="round" fill="white" fill-rule="evenodd" font-size="9pt">
-    <path d="M 23.096 75.977 L 0 75.977 L 0 4.59 L 24.707 4.59 A 55.919 55.919 0 0 1 33.49 5.243 Q 38.313 6.01 42.334 7.681 A 32.184 32.184 0 0 1 44.238 8.545 Q 52.246 12.5 56.421 20.117 A 32.438 32.438 0 0 1 59.678 29.175 Q 60.481 33.044 60.581 37.488 A 56.775 56.775 0 0 1 60.596 38.77 A 55.441 55.441 0 0 1 59.943 47.517 Q 58.856 54.315 55.957 59.473 Q 51.318 67.725 42.896 71.851 Q 34.473 75.977 23.096 75.977 Z M 24.902 20.166 L 19.287 20.166 L 19.287 60.156 L 23.584 60.156 A 23.978 23.978 0 0 0 28.389 59.707 Q 33.591 58.641 36.475 55.054 A 15.925 15.925 0 0 0 39.053 50.244 Q 40.576 45.85 40.576 39.453 A 40.21 40.21 0 0 0 40.342 34.984 Q 39.94 31.39 38.843 28.687 A 14.688 14.688 0 0 0 36.837 25.153 A 11.922 11.922 0 0 0 33.643 22.29 A 13.658 13.658 0 0 0 29.587 20.664 Q 27.856 20.259 25.845 20.184 A 24.996 24.996 0 0 0 24.902 20.166 Z" id="0" vector-effect="non-scaling-stroke"/>
-    <path d="M 123.291 44.971 L 123.291 53.467 L 89.16 53.467 A 10.988 10.988 0 0 0 90.044 57.31 A 9.877 9.877 0 0 0 92.407 60.596 Q 95.41 63.379 101.27 63.379 Q 106.445 63.379 110.767 62.354 A 42.981 42.981 0 0 0 116.273 60.633 A 52.544 52.544 0 0 0 119.678 59.18 L 119.678 72.9 Q 115.674 75 110.938 75.977 A 41.172 41.172 0 0 1 107.079 76.567 Q 103.519 76.953 98.975 76.953 A 40.077 40.077 0 0 1 90.603 76.113 A 32.226 32.226 0 0 1 84.033 73.975 A 22.906 22.906 0 0 1 73.657 64.746 Q 70.368 59.314 69.938 51.19 A 47.413 47.413 0 0 1 69.873 48.682 Q 69.873 38.721 73.291 32.3 A 22.599 22.599 0 0 1 78.792 25.436 A 21.455 21.455 0 0 1 82.861 22.778 A 28.536 28.536 0 0 1 91.334 20.114 A 37.588 37.588 0 0 1 97.168 19.678 Q 105.083 19.678 110.877 22.388 A 24.328 24.328 0 0 1 111.084 22.485 Q 116.943 25.293 120.117 30.908 A 23.114 23.114 0 0 1 122.498 37.231 Q 123.13 40.033 123.258 43.284 A 42.733 42.733 0 0 1 123.291 44.971 Z M 89.551 41.455 L 105.957 41.455 A 11.664 11.664 0 0 0 105.553 38.576 A 10.108 10.108 0 0 0 104.98 37.012 Q 104.053 35.01 102.271 33.838 A 6.912 6.912 0 0 0 99.862 32.861 A 9.817 9.817 0 0 0 97.852 32.666 A 8.801 8.801 0 0 0 94.934 33.133 A 7.628 7.628 0 0 0 92.212 34.79 A 7.286 7.286 0 0 0 90.54 37.211 Q 90.08 38.257 89.817 39.557 A 16.942 16.942 0 0 0 89.551 41.455 Z" id="1" vector-effect="non-scaling-stroke"/>
-    <path d="M 167.48 75.977 L 148.584 75.977 L 127.49 20.654 L 147.412 20.654 L 156.787 53.369 Q 156.924 53.78 157.254 55.389 A 112.258 112.258 0 0 1 157.3 55.615 A 19.061 19.061 0 0 1 157.591 57.518 A 14.863 14.863 0 0 1 157.666 58.984 L 158.008 58.984 A 14.573 14.573 0 0 1 158.26 56.239 A 13.298 13.298 0 0 1 158.35 55.811 Q 158.611 54.652 158.787 53.893 A 136.744 136.744 0 0 1 158.887 53.467 L 168.701 20.654 L 188.574 20.654 L 167.48 75.977 Z" id="2" vector-effect="non-scaling-stroke"/>
-    <path d="M 227.783 20.361 L 227.783 75.977 L 208.496 75.977 L 208.496 20.361 L 191.064 20.361 L 191.064 4.59 L 245.166 4.59 L 245.166 20.361 L 227.783 20.361 Z" id="3" vector-effect="non-scaling-stroke"/>
-    <path d="M 306.662 54.35 A 43.23 43.23 0 0 0 307.08 48.193 Q 307.08 43.89 306.302 40.21 A 26.737 26.737 0 0 0 303.54 32.666 A 23.91 23.91 0 0 0 293.799 22.998 A 27.016 27.016 0 0 0 287.599 20.615 A 32.596 32.596 0 0 0 279.639 19.678 A 37.958 37.958 0 0 0 272.777 20.269 A 27.435 27.435 0 0 0 264.771 22.998 A 22.673 22.673 0 0 0 255.2 32.666 A 24.588 24.588 0 0 0 254.552 33.991 Q 251.855 39.95 251.855 48.193 A 41.077 41.077 0 0 0 252.243 53.961 A 30.674 30.674 0 0 0 253.882 60.498 A 28.789 28.789 0 0 0 254.738 62.531 A 24.022 24.022 0 0 0 259.619 69.531 A 24.539 24.539 0 0 0 268.335 75.073 A 28.236 28.236 0 0 0 272.567 76.29 A 33.502 33.502 0 0 0 279.346 76.953 A 39.162 39.162 0 0 0 284.365 76.643 A 30.239 30.239 0 0 0 290.918 75.073 A 26.901 26.901 0 0 0 291.395 74.893 A 23.287 23.287 0 0 0 299.658 69.531 Q 303.271 65.869 305.176 60.498 A 32.011 32.011 0 0 0 306.662 54.35 Z M 271.24 48.193 Q 271.24 52.93 272.07 56.177 Q 272.9 59.424 274.731 61.108 A 6.244 6.244 0 0 0 277.833 62.637 A 8.91 8.91 0 0 0 279.541 62.793 A 8.544 8.544 0 0 0 281.524 62.575 A 5.857 5.857 0 0 0 284.277 61.108 A 7.765 7.765 0 0 0 285.716 59.186 Q 286.195 58.303 286.547 57.212 A 15.643 15.643 0 0 0 286.841 56.177 A 24.171 24.171 0 0 0 287.332 53.532 Q 287.527 52.055 287.601 50.353 A 49.717 49.717 0 0 0 287.646 48.193 A 46.12 46.12 0 0 0 287.536 44.893 Q 287.348 42.279 286.841 40.283 Q 286.035 37.109 284.253 35.498 A 6.007 6.007 0 0 0 281.618 34.133 Q 280.696 33.904 279.609 33.888 A 11.184 11.184 0 0 0 279.443 33.887 A 8.132 8.132 0 0 0 276.824 34.285 Q 274.568 35.049 273.292 37.277 A 8.551 8.551 0 0 0 273.169 37.5 A 13.288 13.288 0 0 0 272.091 40.319 Q 271.24 43.492 271.24 48.193 Z" id="4" vector-effect="non-scaling-stroke"/>
-    <path d="M 370.382 54.35 A 43.23 43.23 0 0 0 370.801 48.193 Q 370.801 43.89 370.023 40.21 A 26.737 26.737 0 0 0 367.261 32.666 A 23.91 23.91 0 0 0 357.52 22.998 A 27.016 27.016 0 0 0 351.32 20.615 A 32.596 32.596 0 0 0 343.359 19.678 A 37.958 37.958 0 0 0 336.497 20.269 A 27.435 27.435 0 0 0 328.491 22.998 A 22.673 22.673 0 0 0 318.921 32.666 A 24.588 24.588 0 0 0 318.273 33.991 Q 315.576 39.95 315.576 48.193 A 41.077 41.077 0 0 0 315.964 53.961 A 30.674 30.674 0 0 0 317.603 60.498 A 28.789 28.789 0 0 0 318.458 62.531 A 24.022 24.022 0 0 0 323.34 69.531 A 24.539 24.539 0 0 0 332.056 75.073 A 28.236 28.236 0 0 0 336.287 76.29 A 33.502 33.502 0 0 0 343.066 76.953 A 39.162 39.162 0 0 0 348.086 76.643 A 30.239 30.239 0 0 0 354.639 75.073 A 26.901 26.901 0 0 0 355.116 74.893 A 23.287 23.287 0 0 0 363.379 69.531 Q 366.992 65.869 368.896 60.498 A 32.011 32.011 0 0 0 370.382 54.35 Z M 334.961 48.193 Q 334.961 52.93 335.791 56.177 Q 336.621 59.424 338.452 61.108 A 6.244 6.244 0 0 0 341.553 62.637 A 8.91 8.91 0 0 0 343.262 62.793 A 8.544 8.544 0 0 0 345.245 62.575 A 5.857 5.857 0 0 0 347.998 61.108 A 7.765 7.765 0 0 0 349.437 59.186 Q 349.916 58.303 350.268 57.212 A 15.643 15.643 0 0 0 350.562 56.177 A 24.171 24.171 0 0 0 351.052 53.532 Q 351.248 52.055 351.322 50.353 A 49.717 49.717 0 0 0 351.367 48.193 A 46.12 46.12 0 0 0 351.256 44.893 Q 351.068 42.279 350.562 40.283 Q 349.756 37.109 347.974 35.498 A 6.007 6.007 0 0 0 345.339 34.133 Q 344.416 33.904 343.329 33.888 A 11.184 11.184 0 0 0 343.164 33.887 A 8.132 8.132 0 0 0 340.545 34.285 Q 338.289 35.049 337.013 37.277 A 8.551 8.551 0 0 0 336.89 37.5 A 13.288 13.288 0 0 0 335.811 40.319 Q 334.961 43.492 334.961 48.193 Z" id="5" vector-effect="non-scaling-stroke"/>
-    <path d="M 400.781 0 L 400.781 75.977 L 381.689 75.977 L 381.689 0 L 400.781 0 Z" id="6" vector-effect="non-scaling-stroke"/>
-    <path d="M 411.719 73.877 L 411.719 58.594 A 46.942 46.942 0 0 0 422.363 62.036 Q 426.83 62.901 429.739 63.053 A 22.453 22.453 0 0 0 430.908 63.086 A 23.338 23.338 0 0 0 432.541 63.033 Q 434.538 62.892 435.62 62.378 A 3.273 3.273 0 0 0 436.357 61.909 A 2.089 2.089 0 0 0 437.109 60.254 Q 437.109 59.033 436.108 58.179 A 6.393 6.393 0 0 0 435.444 57.691 Q 434.691 57.202 433.504 56.638 A 34.704 34.704 0 0 0 432.544 56.201 Q 430.581 55.341 427.402 54.024 A 655.312 655.312 0 0 0 425.342 53.174 Q 420.752 51.27 417.7 49.023 A 15.29 15.29 0 0 1 414.486 45.872 A 13.596 13.596 0 0 1 413.135 43.652 A 14.224 14.224 0 0 1 412.024 40.293 Q 411.703 38.727 411.638 36.922 A 25.946 25.946 0 0 1 411.621 35.986 A 16.624 16.624 0 0 1 412.394 30.782 A 13.104 13.104 0 0 1 417.871 23.779 Q 423.083 20.359 431.115 19.791 A 46.937 46.937 0 0 1 434.424 19.678 A 44.511 44.511 0 0 1 441.957 20.296 A 38.904 38.904 0 0 1 444.727 20.874 A 56.912 56.912 0 0 1 451.218 22.917 A 69.134 69.134 0 0 1 454.736 24.365 L 449.512 36.67 Q 445.41 34.814 441.211 33.691 Q 437.323 32.652 434.9 32.575 A 11.911 11.911 0 0 0 434.521 32.568 Q 432.275 32.568 431.055 33.154 A 2.789 2.789 0 0 0 430.465 33.526 A 1.672 1.672 0 0 0 429.834 34.863 A 2.288 2.288 0 0 0 430.42 36.394 A 3.206 3.206 0 0 0 430.688 36.67 Q 431.337 37.263 432.872 37.997 A 28.563 28.563 0 0 0 433.936 38.477 Q 436.328 39.502 440.918 41.357 A 51.888 51.888 0 0 1 444.568 42.989 Q 446.261 43.83 447.675 44.717 A 27.253 27.253 0 0 1 448.901 45.532 A 14.95 14.95 0 0 1 452.141 48.593 A 13.247 13.247 0 0 1 453.589 50.928 A 14.028 14.028 0 0 1 454.64 54.032 Q 455.127 56.238 455.127 58.984 A 20.16 20.16 0 0 1 454.465 64.243 A 16.821 16.821 0 0 1 452.783 68.311 A 14.139 14.139 0 0 1 448.563 72.827 A 19.641 19.641 0 0 1 445.288 74.658 A 23.27 23.27 0 0 1 440.768 76.101 Q 438.568 76.58 435.986 76.79 A 52.548 52.548 0 0 1 431.738 76.953 A 94.534 94.534 0 0 1 426.473 76.814 Q 423.644 76.656 421.167 76.318 A 42.222 42.222 0 0 1 413.509 74.513 A 48.282 48.282 0 0 1 411.719 73.877 Z" id="7" vector-effect="non-scaling-stroke"/>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/packages/devtools/client/src/entries/client/routes/overview/page.module.scss b/packages/devtools/client/src/entries/client/routes/overview/page.module.scss
index 9f6f4c9cc64a..747f659e9f05 100644
--- a/packages/devtools/client/src/entries/client/routes/overview/page.module.scss
+++ b/packages/devtools/client/src/entries/client/routes/overview/page.module.scss
@@ -1,5 +1,6 @@
 .container {
   max-width: 40rem;
+  width: 100%;
 }
 
 .bottom-tip {
@@ -10,19 +11,10 @@
   }
 }
 
-.indicate-card {
-  border-radius: var(--radius-6);
-  box-shadow: var(--shadow-4);
-  padding: var(--space-5);
-  :global(.dark) & {
-    background-color: var(--gray-1);
-  }
-}
-
 .primary-card {
   flex: 4;
   min-width: max-content;
-  background-color: var(--blue-9);
+  background-color: var(--blue-10);
   :global(.dark) & {
     background-color: var(--blue-10);
   }
@@ -77,3 +69,9 @@
     background-color: var(--red-9);
   }
 }
+
+.heading {
+  font-family: 'NotoSans';
+  font-weight: 900;
+  font-size: var(--font-size-7);
+}
diff --git a/packages/devtools/client/src/entries/client/routes/overview/page.tsx b/packages/devtools/client/src/entries/client/routes/overview/page.tsx
index d5bc9a4320f1..c5a0af1bfabb 100644
--- a/packages/devtools/client/src/entries/client/routes/overview/page.tsx
+++ b/packages/devtools/client/src/entries/client/routes/overview/page.tsx
@@ -1,11 +1,9 @@
-import { Box, Flex, Kbd, Link, Text, Theme } from '@radix-ui/themes';
-import type { BoxProps } from '@radix-ui/themes/dist/cjs/components/box';
-import { clsx } from 'clsx';
+import { Box, Flex, Heading, Kbd, Link, Text, Theme } from '@radix-ui/themes';
 import React from 'react';
 import {
-  HiOutlineDocumentText,
   HiLink,
   HiOutlineClock,
+  HiOutlineDocumentText,
   HiOutlinePuzzlePiece,
 } from 'react-icons/hi2';
 import { parseURL } from 'ufo';
@@ -18,24 +16,15 @@ import {
   $perf,
   VERSION,
 } from '../state';
-import srcHeading from './heading.svg';
+import '@/components/Card/Indicate.module.scss';
 import styles from './page.module.scss';
+import { IndicateCard } from '@/components/Card';
 
 const BUNDLER_PACKAGE_NAMES = {
   webpack: 'webpack',
   rspack: '@rspack/core',
 } as const;
 
-const IndicateCard: React.FC<
-  BoxProps & React.RefAttributes<HTMLDivElement>
-> = ({ children, className, ...props }) => {
-  return (
-    <Box {...props} className={clsx(styles.indicateCard, className)}>
-      {children}
-    </Box>
-  );
-};
-
 const Page: React.FC = () => {
   const framework = useSnapshot($framework);
   const def = useSnapshot($definition);
@@ -67,21 +56,17 @@ const Page: React.FC = () => {
       >
         <IndicateCard className={styles.primaryCard}>
           <Theme appearance="dark" hasBackground={false} asChild>
-            <Flex
-              gap="2"
-              height="100%"
-              justify="center"
-              direction="column"
-              align="start"
-            >
-              <img src={srcHeading} style={{ width: '8rem' }} />
+            <IndicateCard.Column>
+              <Heading as="h1" className={styles.heading}>
+                DevTools
+              </Heading>
               <Flex gap="2">
                 <button type="button">v{VERSION}</button>
               </Flex>
               <Text as="p" size="1">
                 Powered by {toolsPackage}@{toolsPackageVer}
               </Text>
-            </Flex>
+            </IndicateCard.Column>
           </Theme>
         </IndicateCard>
         <IndicateCard className={styles.infoCard}>
diff --git a/packages/devtools/client/src/entries/client/routes/pages/error.tsx b/packages/devtools/client/src/entries/client/routes/pages/error.tsx
index fc315e95a4f8..23d8d6dbd39c 100644
--- a/packages/devtools/client/src/entries/client/routes/pages/error.tsx
+++ b/packages/devtools/client/src/entries/client/routes/pages/error.tsx
@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/react/[tab]/page.tsx b/packages/devtools/client/src/entries/client/routes/react/[tab]/page.tsx
index 62338423f56c..d8c1f4c75a24 100644
--- a/packages/devtools/client/src/entries/client/routes/react/[tab]/page.tsx
+++ b/packages/devtools/client/src/entries/client/routes/react/[tab]/page.tsx
@@ -1,4 +1,4 @@
-import { useParams } from '@modern-js/runtime/router';
+import { useLocation, useNavigate, useParams } from '@modern-js/runtime/router';
 import { Box, useThemeContext } from '@radix-ui/themes';
 import React, { useEffect, useMemo } from 'react';
 import {
@@ -13,6 +13,8 @@ import { useThrowable } from '@/utils';
 const Page: React.FC = () => {
   const params = useParams();
   const ctx = useThemeContext();
+  const location = useLocation();
+  const navigate = useNavigate();
   const browserTheme = ctx.appearance === 'light' ? 'light' : 'dark';
 
   const mountPoint = useThrowable($mountPoint);
@@ -20,6 +22,21 @@ const Page: React.FC = () => {
     mountPoint.remote.activateReactDevtools();
   }, []);
 
+  useEffect(() => {
+    // 检查URL的hash部分
+    if (location.hash === '#inspecting') {
+      const startInspecting = () => {
+        wallAgent.send('startInspectingNative', null);
+        navigate(location.pathname, { replace: true });
+      };
+      if (wallAgent.status === 'active') {
+        startInspecting();
+      } else {
+        wallAgent.hookOnce('active', startInspecting);
+      }
+    }
+  }, [location, navigate]);
+
   const InnerView = useMemo(() => {
     const bridge = createBridge(window.parent, wallAgent);
     const store = createStore(bridge);
diff --git a/packages/devtools/client/src/entries/client/routes/react/error.tsx b/packages/devtools/client/src/entries/client/routes/react/error.tsx
index fc315e95a4f8..23d8d6dbd39c 100644
--- a/packages/devtools/client/src/entries/client/routes/react/error.tsx
+++ b/packages/devtools/client/src/entries/client/routes/react/error.tsx
@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;
diff --git a/packages/devtools/client/src/entries/client/routes/state.tsx b/packages/devtools/client/src/entries/client/routes/state.tsx
index 65dfd8d4aa83..d6e50598f609 100644
--- a/packages/devtools/client/src/entries/client/routes/state.tsx
+++ b/packages/devtools/client/src/entries/client/routes/state.tsx
@@ -13,7 +13,7 @@ import {
   HiOutlineHome,
   HiOutlineRectangleGroup,
 } from 'react-icons/hi2';
-import { RiReactjsLine } from 'react-icons/ri';
+import { RiReactjsLine, RiShieldCrossLine } from 'react-icons/ri';
 import { stringifyParsedURL } from 'ufo';
 import { proxy, ref } from 'valtio';
 import { InternalTab } from '../types';
@@ -36,8 +36,8 @@ export const $mountPointChannel = MessagePortChannel.link(
 export const $mountPoint = $mountPointChannel.then(async channel => {
   const hooks = createHooks<ToMountPointFunctions>();
   const definitions: ToMountPointFunctions = {
-    async pullUpReactInspector() {
-      await hooks.callHook('pullUpReactInspector');
+    async pullUp(target) {
+      await hooks.callHook('pullUp', target);
     },
   };
   const remote = createBirpc<MountPointFunctions, ToMountPointFunctions>(
@@ -134,6 +134,12 @@ export const $tabs = proxy<InternalTab[]>([
     icon: ref(<HiOutlineAcademicCap />),
     view: { type: 'builtin', url: '/headers' },
   },
+  {
+    name: 'doctor',
+    title: 'Doctor',
+    icon: ref(<RiShieldCrossLine />),
+    view: { type: 'builtin', url: '/doctor' },
+  },
 ]);
 
 export const VERSION = process.env.PKG_VERSION;
@@ -147,10 +153,17 @@ export const $definition = proxy({
   packages: _definitionTask.then(def => def.packages),
   assets: _definitionTask.then(def => def.assets),
   announcement: _definitionTask.then(def => def.announcement),
+  doctor: _definitionTask.then(def => def.doctor),
 });
 
+export const _dependenciesTask = $server.then(({ remote }) =>
+  remote.getDependencies(),
+);
+
 export const $dependencies = proxy<Record<string, string>>({});
 
+_dependenciesTask.then(def => Object.assign($dependencies, def));
+
 export const $perf = proxy({
   compileDuration: $server.then(({ remote }) => remote.getCompileTimeCost()),
 });
diff --git a/packages/devtools/client/src/styles/fonts.scss b/packages/devtools/client/src/styles/fonts.scss
new file mode 100644
index 000000000000..e8ea4fad20f9
--- /dev/null
+++ b/packages/devtools/client/src/styles/fonts.scss
@@ -0,0 +1,11 @@
+/*
+ * This subset is modified from the Noto Sans font,
+ * which is distributed under the Open Font License.
+ * You can learn more about it at the following link.
+ * https://openfontlicense.org/
+ * https://fonts.google.com/noto/specimen/Noto+Sans
+ */
+@font-face {
+  font-family: 'NotoSans';
+  src: url('@/assets/NotoSans-latin-subset.woff2');
+}
diff --git a/packages/devtools/client/src/styles/theme.scss b/packages/devtools/client/src/styles/theme.scss
index 0c53f57d61c0..8d986f5c6766 100644
--- a/packages/devtools/client/src/styles/theme.scss
+++ b/packages/devtools/client/src/styles/theme.scss
@@ -1,5 +1,6 @@
 @import '@radix-ui/themes/styles.css';
 @import './breakpoints.scss';
+@import './fonts.scss';
 
 :root {
   --color-page-background: var(--gray-2) !important;
diff --git a/packages/devtools/client/src/types/rpc.ts b/packages/devtools/client/src/types/rpc.ts
index e088576a7412..621d0b6f6ccb 100644
--- a/packages/devtools/client/src/types/rpc.ts
+++ b/packages/devtools/client/src/types/rpc.ts
@@ -1,5 +1,5 @@
 export interface ClientFunctions {
-  pullUpReactInspector: () => Promise<void>;
+  pullUp: (target: string) => Promise<void>;
 }
 
 export interface MountPointFunctions {
diff --git a/packages/devtools/kit/package.json b/packages/devtools/kit/package.json
index 95a915bfe8e8..87cfd973a797 100644
--- a/packages/devtools/kit/package.json
+++ b/packages/devtools/kit/package.json
@@ -69,7 +69,9 @@
     "hookable": "^5.5.3",
     "ufo": "^1.3.0",
     "flatted": "^3.2.9",
-    "ws": "^8.13.0"
+    "ws": "^8.13.0",
+    "@rsdoctor/types": "^0.1.3",
+    "@rsdoctor/utils": "^0.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -90,22 +92,10 @@
     "nanoid": "3.3.4",
     "react": "~18.2.0",
     "type-fest": "^4.1.0",
-    "typescript": "^5",
-    "@rsdoctor/types": "^0.1.0",
-    "@rsdoctor/utils": "^0.1.0"
+    "typescript": "^5"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "@rsdoctor/types": "^0.1.0",
-    "@rsdoctor/utils": "^0.1.0"
-  },
-  "peerDependenciesMeta": {
-    "@rsdoctor/types": {
-      "optional": true
-    },
-    "@rsdoctor/utils": {
-      "optional": true
-    }
+    "react": "~18.2.0"
   },
   "sideEffects": false,
   "publishConfig": {
diff --git a/packages/devtools/kit/src/client.ts b/packages/devtools/kit/src/client.ts
index 21fc33d62ecb..82c3671cb60e 100644
--- a/packages/devtools/kit/src/client.ts
+++ b/packages/devtools/kit/src/client.ts
@@ -39,6 +39,12 @@ export class AnnouncementDefinition {
   fallback: string = 'https://modernjs.dev/';
 }
 
+export class DoctorDefinition {
+  home: string = 'https://rsdoctor.dev';
+
+  quickStart: string = 'https://rsdoctor.dev/guide/start/quick-start';
+}
+
 export class ClientDefinition {
   name: NameDefinition = new NameDefinition();
 
@@ -46,6 +52,8 @@ export class ClientDefinition {
 
   assets: AssetDefinition = new AssetDefinition();
 
+  doctor: DoctorDefinition = new DoctorDefinition();
+
   announcement: AnnouncementDefinition = new AnnouncementDefinition();
 }
 
diff --git a/packages/devtools/kit/src/node.ts b/packages/devtools/kit/src/node.ts
index 7c9f426f3dd9..4d979d87a802 100644
--- a/packages/devtools/kit/src/node.ts
+++ b/packages/devtools/kit/src/node.ts
@@ -4,3 +4,4 @@ export * from './mount-point';
 export * from './utils';
 export * from './constants';
 export * from './channel';
+export * from './rsdoctor';
diff --git a/packages/devtools/kit/src/rsdoctor.ts b/packages/devtools/kit/src/rsdoctor.ts
new file mode 100644
index 000000000000..9f66e373de21
--- /dev/null
+++ b/packages/devtools/kit/src/rsdoctor.ts
@@ -0,0 +1,62 @@
+import path from 'path';
+import type { Manifest } from '@rsdoctor/types';
+import fs from '@modern-js/utils/fs-extra';
+import * as utils from '@rsdoctor/utils/common';
+
+export async function fetchShardingFile(url: string): Promise<string> {
+  const { Url } = await import('@rsdoctor/utils/common');
+  if (Url.isUrl(url)) {
+    const resp = await fetch(url);
+    return resp.text();
+  }
+  // json string
+  return url;
+}
+
+export async function parseManifest(
+  json: Manifest.RsdoctorManifestWithShardingFiles,
+): Promise<Manifest.RsdoctorManifest> {
+  // try to load cloud data first
+  if ('cloudManifestUrl' in json && 'cloudData' in json) {
+    try {
+      const data = await utils.Manifest.fetchShardingFiles(
+        json.data,
+        fetchShardingFile,
+      );
+      return { ...json, data };
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  // fallback to load local data.
+  const data = await utils.Manifest.fetchShardingFiles(json.data, url =>
+    fs.readFile(url, 'utf-8'),
+  );
+
+  return { ...json, data };
+}
+
+const MANIFEST_DIRS = ['.rsdoctor', '.web-doctor'];
+
+const MANIFEST_NAME = 'manifest.json';
+
+/**
+ * @throws {Error} Cannot find manifest.json in ${rootPath}
+ */
+export async function findManifest(
+  dirname: string,
+  silent = false,
+): Promise<string> {
+  for (const dir of MANIFEST_DIRS) {
+    const manifestPath = path.resolve(dirname, dir, MANIFEST_NAME);
+    if (fs.existsSync(manifestPath)) {
+      return manifestPath;
+    }
+  }
+
+  if (silent) {
+    return '';
+  } else {
+    throw new Error(`Cannot find manifest.json in ${dirname}`);
+  }
+}
diff --git a/packages/devtools/kit/src/runtime.ts b/packages/devtools/kit/src/runtime.ts
index 2fea9a625fbe..1822327aa619 100644
--- a/packages/devtools/kit/src/runtime.ts
+++ b/packages/devtools/kit/src/runtime.ts
@@ -4,3 +4,4 @@ export * from './mount-point';
 export * from './utils';
 export * from './constants';
 export * from './channel';
+export type * from './rsdoctor';
diff --git a/packages/devtools/kit/src/server.ts b/packages/devtools/kit/src/server.ts
index 83b28c74ee71..e1d28753d2f5 100644
--- a/packages/devtools/kit/src/server.ts
+++ b/packages/devtools/kit/src/server.ts
@@ -10,6 +10,7 @@ import type {
 } from '@modern-js/uni-builder';
 import { NormalizedConfig } from '@modern-js/core';
 import { RouteLegacy, NestedRouteForCli, PageRoute } from '@modern-js/types';
+import type { Manifest } from '@rsdoctor/types';
 import type { ClientDefinition } from './client';
 
 export type BuilderContext = RsbuildContext;
@@ -40,6 +41,14 @@ export type FileSystemRoutes =
   | RouteLegacy[]
   | (NestedRouteForCli | PageRoute)[];
 
+export interface DoctorManifestOverview {
+  numModules: number;
+  numChunks: number;
+  numPackages: number;
+  summary: Manifest.RsdoctorManifest['data']['summary'];
+  errors: Manifest.RsdoctorManifest['data']['errors'];
+}
+
 export interface ServerFunctions {
   getFrameworkConfig: () => Promise<FrameworkConfig>;
   getTransformedFrameworkConfig: () => Promise<TransformedFrameworkConfig>;
@@ -53,5 +62,6 @@ export interface ServerFunctions {
   getDependencies: () => Promise<Record<string, string>>;
   getCompileTimeCost: () => Promise<number>;
   getClientDefinition: () => Promise<ClientDefinition>;
+  getDoctorOverview: () => Promise<DoctorManifestOverview>;
   echo: (content: string) => string;
 }
diff --git a/packages/devtools/plugin/package.json b/packages/devtools/plugin/package.json
index 8484e714790f..e76b155f1f2f 100644
--- a/packages/devtools/plugin/package.json
+++ b/packages/devtools/plugin/package.json
@@ -28,15 +28,18 @@
         "jsnext:source": "./src/index.ts",
         "require": "./dist/index.js"
       },
-      "default": "./dist/index.js"
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
     "./cli": {
       "jsnext:source": "./src/cli.ts",
-      "default": "./dist/cli.js"
+      "default": "./dist/cli.js",
+      "types": "./dist/cli.d.ts"
     },
     "./runtime": {
       "jsnext:source": "./src/runtime.ts",
-      "default": "./dist/runtime.js"
+      "default": "./dist/runtime.js",
+      "types": "./dist/runtime.d.ts"
     }
   },
   "scripts": {
diff --git a/packages/devtools/plugin/src/cli.ts b/packages/devtools/plugin/src/cli.ts
index 0589e0f1fd8c..262c37005de4 100644
--- a/packages/devtools/plugin/src/cli.ts
+++ b/packages/devtools/plugin/src/cli.ts
@@ -5,126 +5,131 @@ import { ProxyDetail } from '@modern-js/types';
 import { getPort, logger } from '@modern-js/utils';
 import createServeMiddleware from 'serve-static';
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
-import { ROUTE_BASENAME } from '@modern-js/devtools-kit/node';
-import {
-  DevtoolsPluginOptions,
-  DevtoolsPluginInlineOptions,
-  resolveContext,
-} from './config';
+import { ClientDefinition, ROUTE_BASENAME } from '@modern-js/devtools-kit/node';
+import { DevtoolsPluginOptions, resolveContext } from './config';
 import { setupClientConnection } from './rpc';
 import { SocketServer } from './utils/socket';
 
-export type { DevtoolsPluginOptions, DevtoolsPluginInlineOptions };
+export type { DevtoolsPluginOptions };
 
-export const devtoolsPlugin = (
-  inlineOptions: DevtoolsPluginInlineOptions = {},
-): CliPlugin<AppTools> => ({
-  name: '@modern-js/plugin-devtools',
-  usePlugins: [],
-  setup: async api => {
-    const ctx = resolveContext(inlineOptions);
-    if (!ctx.enable) {
-      return {};
-    }
+export type DevtoolsPlugin = CliPlugin<AppTools> & {
+  setClientDefinition: (def: ClientDefinition) => void;
+};
 
-    const httpServer = await setupHttpServer();
-    const socketServer = new SocketServer({
-      server: httpServer.instance,
-      path: '/rpc',
-    });
-    const rpc = await setupClientConnection({ api, server: socketServer });
+export const devtoolsPlugin = (
+  inlineOptions: DevtoolsPluginOptions = {},
+): DevtoolsPlugin => {
+  const ctx = resolveContext(inlineOptions);
+  return {
+    name: '@modern-js/plugin-devtools',
+    usePlugins: [],
+    setClientDefinition(def) {
+      Object.assign(ctx.def, def);
+    },
+    async setup(api) {
+      if (!ctx.enable) return {};
 
-    return {
-      prepare: rpc.hooks.prepare,
-      modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
-      beforeRestart() {
-        return new Promise((resolve, reject) =>
-          httpServer.instance.close(err => (err ? reject(err) : resolve())),
-        );
-      },
-      modifyServerRoutes({ routes }) {
-        routes.push({
-          urlPath: '/sw-proxy.js',
-          isSPA: true,
-          isSSR: false,
-          entryPath: 'public/sw-proxy.js',
-        });
-        return { routes };
-      },
-      config() {
-        const config = api.useConfigContext().devtools ?? {};
-        Object.assign(ctx, resolveContext(ctx, config), {
-          __keep: true, // Keep resource query always existing.
-        });
-        logger.info(`${ctx.def.name.formalName} Devtools is enabled`);
+      const httpServer = await setupHttpServer();
+      const socketServer = new SocketServer({
+        server: httpServer.instance,
+        path: '/rpc',
+      });
+      const rpc = await setupClientConnection({
+        api,
+        server: socketServer,
+        def: ctx.def,
+      });
 
-        const swProxyEntry = require.resolve(
-          '@modern-js/devtools-client/sw-proxy',
-        );
+      return {
+        prepare: rpc.hooks.prepare,
+        modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
+        beforeRestart() {
+          return new Promise((resolve, reject) =>
+            httpServer.instance.close(err => (err ? reject(err) : resolve())),
+          );
+        },
+        modifyServerRoutes({ routes }) {
+          routes.push({
+            urlPath: '/sw-proxy.js',
+            isSPA: true,
+            isSSR: false,
+            entryPath: 'public/sw-proxy.js',
+          });
+          return { routes };
+        },
+        config() {
+          const config = api.useConfigContext().devtools ?? {};
+          Object.assign(ctx, resolveContext(ctx, config));
+          logger.info(`${ctx.def.name.formalName} DevTools is enabled`);
 
-        // Inject options to client.
-        const serializedOptions = JSON.stringify(ctx);
-        const tags: AppTools['normalizedConfig']['html']['tags'] = [
-          {
-            tag: 'script',
-            children: `window.__MODERN_JS_DEVTOOLS_OPTIONS__ = ${serializedOptions};`,
-            head: true,
-            append: false,
-          },
-        ];
+          const swProxyEntry = require.resolve(
+            '@modern-js/devtools-client/sw-proxy',
+          );
 
-        const styles: string[] = [];
-        const manifest = require('@modern-js/devtools-client/manifest');
-        // Inject JavaScript chunks to client.
-        for (const src of manifest.routeAssets.mount.assets) {
-          assert(typeof src === 'string');
-          if (src.endsWith('.js')) {
-            tags.push({
+          // Inject options to client.
+          const serializedOptions = JSON.stringify(ctx);
+          const tags: AppTools['normalizedConfig']['html']['tags'] = [
+            {
               tag: 'script',
-              attrs: { src },
+              children: `window.__MODERN_JS_DEVTOOLS_OPTIONS__ = ${serializedOptions};`,
               head: true,
               append: false,
-            });
-          } else if (src.endsWith('.css')) {
-            styles.push(src);
+            },
+          ];
+
+          const styles: string[] = [];
+          const manifest = require('@modern-js/devtools-client/manifest');
+          // Inject JavaScript chunks to client.
+          for (const src of manifest.routeAssets.mount.assets) {
+            assert(typeof src === 'string');
+            if (src.endsWith('.js')) {
+              tags.push({
+                tag: 'script',
+                attrs: { src },
+                head: true,
+                append: false,
+              });
+            } else if (src.endsWith('.css')) {
+              styles.push(src);
+            }
           }
-        }
-        // Inject CSS chunks to client inside of template to avoid polluting global.
-        tags.push({
-          tag: 'template',
-          attrs: { id: '_modern_js_devtools_styles' },
-          append: true,
-          head: false,
-          children: styles
-            .map(src => `<link rel="stylesheet" href="${src}">`)
-            .join(''),
-        });
+          // Inject CSS chunks to client inside of template to avoid polluting global.
+          tags.push({
+            tag: 'template',
+            attrs: { id: '_modern_js_devtools_styles' },
+            append: true,
+            head: false,
+            children: styles
+              .map(src => `<link rel="stylesheet" href="${src}">`)
+              .join(''),
+          });
 
-        return {
-          builderPlugins: [rpc.builderPlugin],
-          source: {},
-          output: {
-            copy: [{ from: swProxyEntry, to: 'public' }],
-          },
-          html: { tags },
-          tools: {
-            devServer: {
-              proxy: {
-                [ROUTE_BASENAME]: {
-                  target: `http://localhost:${httpServer.port}`,
-                  pathRewrite: {
-                    [`^${ROUTE_BASENAME}`]: '',
+          return {
+            builderPlugins: [rpc.builderPlugin],
+            source: {},
+            output: {
+              copy: [{ from: swProxyEntry, to: 'public' }],
+            },
+            html: { tags },
+            tools: {
+              devServer: {
+                proxy: {
+                  [ROUTE_BASENAME]: {
+                    target: `http://localhost:${httpServer.port}`,
+                    pathRewrite: {
+                      [`^${ROUTE_BASENAME}`]: '',
+                    },
+                    ws: true,
                   },
-                  ws: true,
-                },
-              } as Record<string, ProxyDetail>,
+                } as Record<string, ProxyDetail>,
+              },
             },
-          },
-        };
-      },
-    };
-  },
-});
+          };
+        },
+      };
+    },
+  };
+};
 
 export default devtoolsPlugin;
 
diff --git a/packages/devtools/plugin/src/config.ts b/packages/devtools/plugin/src/config.ts
index d0df86d65959..8d9a992a5200 100644
--- a/packages/devtools/plugin/src/config.ts
+++ b/packages/devtools/plugin/src/config.ts
@@ -1,25 +1,18 @@
-import {
-  ClientDefinition,
-  ROUTE_BASENAME,
-  SetupClientParams,
-} from '@modern-js/devtools-kit/node';
+import { ClientDefinition, ROUTE_BASENAME } from '@modern-js/devtools-kit/node';
 import type { RequiredDeep } from 'type-fest';
 
-export type DevtoolsPluginOptions = Partial<SetupClientParams>;
-
-export interface DevtoolsPluginInlineOptions extends DevtoolsPluginOptions {
+export interface DevtoolsPluginOptions {
   enable?: boolean;
+  endpoint?: string;
+  dataSource?: string;
 }
 
-export type DevtoolsContext = RequiredDeep<DevtoolsPluginInlineOptions>;
-
-export const getDefaultOptions = () =>
-  ({
-    def: new ClientDefinition(),
-  } satisfies DevtoolsPluginOptions);
+export interface DevtoolsContext extends RequiredDeep<DevtoolsPluginOptions> {
+  def: ClientDefinition;
+}
 
 export const resolveContext = (
-  ...sources: DevtoolsPluginInlineOptions[]
+  ...sources: Partial<DevtoolsContext>[]
 ): DevtoolsContext => {
   const ret: DevtoolsContext = {
     enable: process.env.NODE_ENV === 'development',
@@ -27,24 +20,15 @@ export const resolveContext = (
     endpoint: ROUTE_BASENAME,
     def: new ClientDefinition(),
   };
+
+  // Keep resource query always existing.
+  Object.assign(ret, { __keep: true });
+
   for (const opts of sources) {
     ret.enable = opts.enable ?? ret.enable;
     ret.dataSource = opts.dataSource ?? ret.dataSource;
     ret.endpoint = opts.endpoint ?? ret.endpoint;
-    if (opts.def) {
-      if (opts.def.announcement) {
-        Object.assign(ret.def.announcement, opts.def.announcement);
-      }
-      if (opts.def.assets) {
-        Object.assign(ret.def.assets, opts.def.assets);
-      }
-      if (opts.def.name) {
-        Object.assign(ret.def.name, opts.def.name);
-      }
-      if (opts.def.packages) {
-        Object.assign(ret.def.packages, opts.def.packages);
-      }
-    }
+    ret.def = opts.def ?? ret.def;
   }
   return ret;
 };
diff --git a/packages/devtools/plugin/src/index.ts b/packages/devtools/plugin/src/index.ts
index 27d7e7f2e141..d14858945181 100644
--- a/packages/devtools/plugin/src/index.ts
+++ b/packages/devtools/plugin/src/index.ts
@@ -1,2 +1,2 @@
 export { devtoolsPlugin, default } from './cli';
-export type { DevtoolsPluginOptions, DevtoolsPluginInlineOptions } from './cli';
+export type { DevtoolsPluginOptions } from './cli';
diff --git a/packages/devtools/plugin/src/rpc/index.ts b/packages/devtools/plugin/src/rpc/index.ts
index ec2dd3a883f0..c54dc1934483 100644
--- a/packages/devtools/plugin/src/rpc/index.ts
+++ b/packages/devtools/plugin/src/rpc/index.ts
@@ -7,8 +7,10 @@ import {
   type FileSystemRoutes,
   type NormalizedBuilderConfig,
   type ServerFunctions,
+  findManifest,
+  parseManifest,
 } from '@modern-js/devtools-kit/node';
-import type { JsonValue, PartialDeep } from 'type-fest';
+import type { JsonValue } from 'type-fest';
 import { createBirpc, BirpcOptions } from 'birpc';
 import * as flatted from 'flatted';
 import createDeferPromise from 'p-defer';
@@ -21,16 +23,13 @@ import { requireModule } from '../utils/module';
 export interface SetupClientConnectionOptions {
   api: CliPluginAPI;
   server: SocketServer;
+  def: ClientDefinition;
 }
 
 export const setupClientConnection = async (
   options: SetupClientConnectionOptions,
 ) => {
-  const { api, server } = options;
-  let def: PartialDeep<ClientDefinition> = {};
-  const setDefinition = (definition: PartialDeep<ClientDefinition>) => {
-    def = definition;
-  };
+  const { api, server, def } = options;
 
   const _fileSystemRoutesMap: Record<string, FileSystemRoutes> = {};
 
@@ -123,6 +122,33 @@ export const setupClientConnection = async (
           '@rsbuild/core',
           '@rspack/core/package.json',
         ],
+        '@rsdoctor/rspack-plugin': [
+          ctx.rootPath,
+          '@rsdoctor/rspack-plugin/package.json',
+        ],
+        '@rsdoctor/webpack-plugin': [
+          ctx.rootPath,
+          '@rsdoctor/webpack-plugin/package.json',
+        ],
+        '@web-doctor/webpack-plugin': [
+          ctx.rootPath,
+          '@web-doctor/webpack-plugin/package.json',
+        ],
+        '@web-doctor/rspack-plugin': [
+          ctx.rootPath,
+          '@web-doctor/rspack-plugin/package.json',
+        ],
+        '@web-doctor/webpack-plugin(builder)': [
+          ctx.rootPath,
+          '@edenx/builder-plugin-web-doctor',
+          '@web-doctor/webpack-plugin/package.json',
+        ],
+        '@web-doctor/rspack-plugin(builder)': [
+          ctx.rootPath,
+          '@edenx/builder-plugin-web-doctor',
+          '@web-doctor/rspack-plugin/package.json',
+        ],
+        '@rsdoctor/core': [ctx.rootPath, '@rsdoctor/core/package.json'],
       };
 
       for (const [name, expr] of Object.entries(resolveExprs)) {
@@ -136,12 +162,20 @@ export const setupClientConnection = async (
       return deferred.compileTimeCost.promise;
     },
     async getClientDefinition() {
-      const ret = new ClientDefinition();
-      Object.assign(ret.name, def.name);
-      Object.assign(ret.packages, def.packages);
-      Object.assign(ret.assets, def.assets);
-      Object.assign(ret.announcement, def.announcement);
-      return ret;
+      return def;
+    },
+    async getDoctorOverview() {
+      const ctx = api.useAppContext();
+      const manifestPath = await findManifest(ctx.distDirectory);
+      const json = await parseManifest(require(manifestPath));
+      const data = {
+        numModules: json.data.moduleGraph.modules.length,
+        numChunks: json.data.chunkGraph.chunks.length,
+        numPackages: json.data.packageGraph.packages.length,
+        summary: json.data.summary,
+        errors: json.data.errors,
+      };
+      return data;
     },
     echo(content) {
       return content;
@@ -187,20 +221,25 @@ export const setupClientConnection = async (
         );
       });
 
-      const modifyBundlerConfig =
-        api.context.bundlerType === 'webpack'
-          ? api.modifyWebpackConfig
-          : api.modifyRspackConfig;
       const expectBundlerNum = _.castArray(api.context.targets).length;
       const bundlerConfigs: JsonValue[] = [];
-      modifyBundlerConfig((config: any) => {
-        bundlerConfigs.push(config as JsonValue);
+      const handleBundlerConfig = (config: JsonValue) => {
+        bundlerConfigs.push(config);
         if (bundlerConfigs.length >= expectBundlerNum) {
           deferred.bundler.config.resolved.resolve(
             _.cloneDeep(bundlerConfigs) as any,
           );
         }
-      });
+      };
+      if (api.context.bundlerType === 'webpack') {
+        api.modifyWebpackConfig(config => {
+          handleBundlerConfig(config as JsonValue);
+        });
+      } else {
+        api.modifyRspackConfig(config => {
+          handleBundlerConfig(config as JsonValue);
+        });
+      }
 
       api.onBeforeCreateCompiler(({ bundlerConfigs }) => {
         deferred.bundler.config.transformed.resolve(
@@ -221,5 +260,5 @@ export const setupClientConnection = async (
     },
   };
 
-  return { client: clientConn, hooks, builderPlugin, setDefinition };
+  return { client: clientConn, hooks, builderPlugin };
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 842ac9c5586c..4d15f6636f99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -945,6 +945,12 @@ importers:
       '@modern-js/utils':
         specifier: workspace:*
         version: link:../../toolkit/utils
+      '@rsdoctor/types':
+        specifier: ^0.1.3
+        version: 0.1.3(esbuild@0.17.19)
+      '@rsdoctor/utils':
+        specifier: ^0.1.3
+        version: 0.1.3(esbuild@0.17.19)
       birpc:
         specifier: 0.2.13
         version: 0.2.13
@@ -982,12 +988,6 @@ importers:
       '@modern-js/uni-builder':
         specifier: workspace:*
         version: link:../../cli/uni-builder
-      '@rsdoctor/types':
-        specifier: ^0.1.0
-        version: 0.1.0(@swc/helpers@0.5.3)(esbuild@0.17.19)
-      '@rsdoctor/utils':
-        specifier: ^0.1.0
-        version: 0.1.0(@swc/helpers@0.5.3)(esbuild@0.17.19)
       '@scripts/build':
         specifier: workspace:*
         version: link:../../../scripts/build
@@ -4324,13 +4324,13 @@ importers:
         version: 0.4.5
       '@storybook/components':
         specifier: ~7.6.12
-        version: 7.6.16(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.17(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-common':
         specifier: ~7.6.12
-        version: 7.6.16
+        version: 7.6.17
       '@storybook/csf-plugin':
         specifier: ~7.6.12
-        version: 7.6.16
+        version: 7.6.17
       '@storybook/global':
         specifier: ~5.0.0
         version: 5.0.0
@@ -4342,19 +4342,19 @@ importers:
         version: 1.1.0
       '@storybook/preview':
         specifier: ~7.6.12
-        version: 7.6.16
+        version: 7.6.17
       '@storybook/preview-api':
         specifier: ~7.6.12
-        version: 7.6.16
+        version: 7.6.17
       '@storybook/react-docgen-typescript-plugin':
         specifier: 1.0.6--canary.9.0c3f3b7.0
         version: 1.0.6--canary.9.0c3f3b7.0(typescript@5.3.3)(webpack@5.89.0)
       '@storybook/router':
         specifier: ~7.6.12
-        version: 7.6.16
+        version: 7.6.17
       '@storybook/theming':
         specifier: ~7.6.12
-        version: 7.6.16(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.17(react-dom@18.2.0)(react@18.2.0)
       ast-types:
         specifier: ^0.14.2
         version: 0.14.2
@@ -4385,7 +4385,7 @@ importers:
         version: link:../../../scripts/build
       '@storybook/types':
         specifier: ~7.6.12
-        version: 7.6.16
+        version: 7.6.17
       '@types/babel__core':
         specifier: ^7.20.1
         version: 7.20.3
@@ -4416,7 +4416,7 @@ importers:
     devDependencies:
       '@storybook/types':
         specifier: ~7.6.12
-        version: 7.6.16
+        version: 7.6.17
       '@types/node':
         specifier: ^20.5.6
         version: 20.8.8
@@ -6159,6 +6159,9 @@ importers:
       '@modern-js/plugin-devtools':
         specifier: workspace:*
         version: link:../../../packages/devtools/plugin
+      '@rsdoctor/rspack-plugin':
+        specifier: ^0.1.0
+        version: 0.1.0(esbuild@0.17.19)
       '@types/jest':
         specifier: ^29
         version: 29.2.6
@@ -7950,7 +7953,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/highlight': 7.23.4
-    dev: true
 
   /@babel/code-frame@7.23.5:
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
@@ -9959,7 +9961,6 @@ packages:
   /@discoveryjs/json-ext@0.5.7:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
-    dev: false
 
   /@emotion/hash@0.8.0:
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
@@ -11501,7 +11502,7 @@ packages:
     dependencies:
       '@modern-js/utils': 2.39.2
       '@swc/helpers': 0.5.1
-      axios: 1.6.0
+      axios: 1.6.7
       tar: 6.2.0
     transitivePeerDependencies:
       - debug
@@ -11658,7 +11659,7 @@ packages:
     resolution: {integrity: sha512-51Uv2oueWru4BvoE7VHai03wT0VZ1VFNPrDXR3Rd3DanRdM5BDBs28mB6+pz68SFQPjK7/f2ZgqRr0FjGWhUvg==}
     dependencies:
       '@swc/helpers': 0.5.1
-      caniuse-lite: 1.0.30001566
+      caniuse-lite: 1.0.30001588
       lodash: 4.17.21
       rslog: 1.1.0
 
@@ -13676,7 +13677,7 @@ packages:
       '@rsbuild/core': 0.4.0
       '@rsbuild/plugin-react': 0.4.0(@rsbuild/core@0.4.0)
       '@rsbuild/shared': 0.4.0(@swc/helpers@0.5.3)
-      '@svgr/core': 8.1.0(typescript@5.3.3)
+      '@svgr/core': 8.1.0
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
       '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.3.3)
     transitivePeerDependencies:
@@ -13693,7 +13694,7 @@ packages:
       '@rsbuild/core': 0.4.4
       '@rsbuild/plugin-react': 0.4.4(@rsbuild/core@0.4.4)(@swc/helpers@0.5.3)
       '@rsbuild/shared': 0.4.4(@swc/helpers@0.5.3)
-      '@svgr/core': 8.1.0(typescript@5.3.3)
+      '@svgr/core': 8.1.0
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
       '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.3.3)
     transitivePeerDependencies:
@@ -13795,10 +13796,112 @@ packages:
       - webpack-cli
     dev: false
 
-  /@rsdoctor/types@0.1.0(@swc/helpers@0.5.3)(esbuild@0.17.19):
+  /@rsdoctor/client@0.1.0:
+    resolution: {integrity: sha512-IT2yoEWRWmdc1gPYTycImxARARutlm4NszjY+75qUMA3TQtnmPuLYHR1RJPWmgIggR6rjLqUyS7KJtDS/LU2oA==}
+    dev: true
+
+  /@rsdoctor/core@0.1.0(esbuild@0.17.19):
+    resolution: {integrity: sha512-wUfg/gtUA1CMBVjLOazH+lMRqTZMa2nHlxKaw49221896rUZDikdsA4iwYnPcIaWrfkg9gEbRqfPeWvUNz0ejA==}
+    dependencies:
+      '@rsdoctor/graph': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/sdk': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/types': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/utils': 0.1.0(esbuild@0.17.19)
+      '@rspack/core': 0.5.1
+      axios: 1.6.7
+      bytes: 3.1.2
+      enhanced-resolve: 5.12.0
+      fs-extra: 11.2.0
+      loader-utils: 2.0.4
+      lodash: 4.17.21
+      path-browserify: 1.0.1
+      semver: 7.6.0
+      source-map: 0.7.4
+      webpack-bundle-analyzer: 4.9.1
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/helpers'
+      - bufferutil
+      - debug
+      - esbuild
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - webpack-cli
+    dev: true
+
+  /@rsdoctor/graph@0.1.0(esbuild@0.17.19):
+    resolution: {integrity: sha512-BT4yM+yajBMA+rrD83OG6JK9nfMmR9B5XP8YgK/BbuPBOfflAwtmAsUnp2s0zwlz8z+E+16gFa++SwqoUgNPBA==}
+    dependencies:
+      '@rsdoctor/types': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/utils': 0.1.0(esbuild@0.17.19)
+      lodash: 4.17.21
+      socket.io: 4.7.2
+      source-map: 0.7.4
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/helpers'
+      - bufferutil
+      - esbuild
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - webpack-cli
+    dev: true
+
+  /@rsdoctor/rspack-plugin@0.1.0(esbuild@0.17.19):
+    resolution: {integrity: sha512-CD3gM6vlv+7NL5qo6qsDfctQpNfjCe84r8U1SlYoQ8wTj+ixoXCMXdaZm71X5A9WqLPE/vhSNiyj0RUsv3IUtg==}
+    dependencies:
+      '@rsdoctor/core': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/graph': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/sdk': 0.1.0(esbuild@0.17.19)
+      '@rspack/core': 0.5.1
+      loader-utils: 2.0.4
+      lodash: 4.17.21
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/helpers'
+      - bufferutil
+      - debug
+      - esbuild
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - webpack-cli
+    dev: true
+
+  /@rsdoctor/sdk@0.1.0(esbuild@0.17.19):
+    resolution: {integrity: sha512-Eov7KfK0yHbAlhjOCFU7HgGCLF+cexJ/MQ3VaYPTPfJyuNbcS1Qo9+40u053JO5TERHSG6R63jdZMyyDXxyd5w==}
+    dependencies:
+      '@rsdoctor/client': 0.1.0
+      '@rsdoctor/graph': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/types': 0.1.0(esbuild@0.17.19)
+      '@rsdoctor/utils': 0.1.0(esbuild@0.17.19)
+      body-parser: 1.20.1
+      cors: 2.8.5
+      dayjs: 1.11.6
+      ip: 1.1.8
+      lodash: 4.17.21
+      open: 8.4.0
+      serve-static: 1.15.0
+      socket.io: 4.7.2
+      source-map: 0.7.4
+      tapable: 2.2.1
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/helpers'
+      - bufferutil
+      - esbuild
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - webpack-cli
+    dev: true
+
+  /@rsdoctor/types@0.1.0(esbuild@0.17.19):
     resolution: {integrity: sha512-1aFC75rjvWiK5C4jjYIyHrK7ynkm4Ks1SJByTt1ugIEgTmhku2Ywmzrk+jO67FiZTHbAO2oac1qCJRO9+zAsUw==}
     dependencies:
-      '@rspack/core': 0.5.1(@swc/helpers@0.5.3)
+      '@rspack/core': 0.5.1
       '@types/connect': 3.4.35
       '@types/estree': 1.0.0
       '@types/tapable': 2.2.2
@@ -13812,11 +13915,31 @@ packages:
       - webpack-cli
     dev: true
 
-  /@rsdoctor/utils@0.1.0(@swc/helpers@0.5.3)(esbuild@0.17.19):
+  /@rsdoctor/types@0.1.3(esbuild@0.17.19):
+    resolution: {integrity: sha512-MWmSYtwz4qCf3ytcCcYt5ICVSgVFVxBt9O+OqB/D9HgKdCx56moJTIOgA7VeoKca8ax0Z4RQNnHB+v1IBxDkYQ==}
+    peerDependencies:
+      '@rspack/core': ^0.5.1
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+    dependencies:
+      '@types/connect': 3.4.35
+      '@types/estree': 1.0.0
+      '@types/tapable': 2.2.2
+      '@types/webpack': 5.28.0(esbuild@0.17.19)
+      source-map: 0.7.4
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+      - webpack-cli
+    dev: false
+
+  /@rsdoctor/utils@0.1.0(esbuild@0.17.19):
     resolution: {integrity: sha512-5kjoQLojazUyKdwsNmISMD+VPKh75mFPBgT18xnV+rczI+RHMQz55enNJ9v3bgZ20cCHl7oJKpyJV/lROnEHTA==}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@rsdoctor/types': 0.1.0(@swc/helpers@0.5.3)(esbuild@0.17.19)
+      '@rsdoctor/types': 0.1.0(esbuild@0.17.19)
       '@types/estree': 1.0.0
       acorn: 8.11.2
       acorn-import-assertions: 1.8.0(acorn@8.11.2)
@@ -13841,6 +13964,36 @@ packages:
       - webpack-cli
     dev: true
 
+  /@rsdoctor/utils@0.1.3(esbuild@0.17.19):
+    resolution: {integrity: sha512-H0KBRopsldvTH4glxIje+7yCs2fxv6gJDR8SPqXwNpHiF1UHEc3m+KOmMTmxzIkb4mOIxmLzNBJlx1sw/UpsLg==}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@rsdoctor/types': 0.1.3(esbuild@0.17.19)
+      '@types/estree': 1.0.0
+      acorn: 8.11.2
+      acorn-import-assertions: 1.8.0(acorn@8.11.2)
+      acorn-walk: 8.2.0
+      bytes: 3.1.2
+      chalk: 4.1.2
+      connect: 3.7.0
+      deep-eql: 4.1.0
+      envinfo: 7.8.1
+      fs-extra: 11.2.0
+      get-port: 5.1.1
+      json-stream-stringify: 3.0.1
+      lines-and-columns: 2.0.4
+      lodash: 4.17.21
+      rslog: 1.2.1
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - '@swc/core'
+      - esbuild
+      - supports-color
+      - uglify-js
+      - webpack-cli
+    dev: false
+
   /@rspack/binding-darwin-arm64@0.5.1:
     resolution: {integrity: sha512-Kc0b94ZN1ecUu2Gyj20kGLWzOrdJbeN1JUTMKZx6jlLa3m7uJ+FhRjnsqFmZ5kdK2zx722ejoKr7xkrl7hOkuw==}
     cpu: [arm64]
@@ -14089,7 +14242,7 @@ packages:
       '@rspack/binding-win32-ia32-msvc': 0.5.4
       '@rspack/binding-win32-x64-msvc': 0.5.4
 
-  /@rspack/core@0.5.1(@swc/helpers@0.5.3):
+  /@rspack/core@0.5.1:
     resolution: {integrity: sha512-fsUKPhnBCV7UOE31W03GBfqp7lSRZBcRuvLwrUt1bmTAvl9SRrR0HuWhJAs4O8LvrjKgxRzXPM8Fpysqerfo4w==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -14100,7 +14253,6 @@ packages:
     dependencies:
       '@module-federation/runtime-tools': 0.0.8
       '@rspack/binding': 0.5.1
-      '@swc/helpers': 0.5.3
       browserslist: 4.22.2
       enhanced-resolve: 5.12.0
       graceful-fs: 4.2.10
@@ -14514,6 +14666,10 @@ packages:
     dependencies:
       '@sinonjs/commons': 2.0.0
 
+  /@socket.io/component-emitter@3.1.0:
+    resolution: {integrity: sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==}
+    dev: true
+
   /@stitches/core@1.2.8:
     resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
     dev: false
@@ -14707,11 +14863,11 @@ packages:
       - supports-color
     dev: false
 
-  /@storybook/channels@7.6.16:
-    resolution: {integrity: sha512-LKB0t4OGISez1O4TRJ/CDPxlb2wAW7gg8YRL91VVUHeffVyr4bnpklvMbLbuEcYrysM82Q2UMB9ipQdyK6Issg==}
+  /@storybook/channels@7.6.17:
+    resolution: {integrity: sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==}
     dependencies:
-      '@storybook/client-logger': 7.6.16
-      '@storybook/core-events': 7.6.16
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-events': 7.6.17
       '@storybook/global': 5.0.0
       qs: 6.11.2
       telejson: 7.2.0
@@ -14779,8 +14935,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@storybook/client-logger@7.6.16:
-    resolution: {integrity: sha512-Vquhmgk/SO0VeAkojcA1juuicBHoTST+f4XwBvyUNiebOSOdGIkxHVxpDFXu2kS0aKflFBEutX2IgoysDup+fQ==}
+  /@storybook/client-logger@7.6.17:
+    resolution: {integrity: sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==}
     dependencies:
       '@storybook/global': 5.0.0
 
@@ -14810,19 +14966,19 @@ packages:
       - supports-color
     dev: false
 
-  /@storybook/components@7.6.16(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-5KZQqxFiVEGM485ceF/7PmiNEkHgouEa8ZUJvDGrW9Ap5MfN0xqAuyTTveHvZzGrKp0YlOcOnpqwu/cSk0HQKA==}
+  /@storybook/components@7.6.17(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lbh7GynMidA+CZcJnstVku6Nhs+YkqjYaZ+mKPugvlVhGVWv0DaaeQFVuZ8cJtUGJ/5FFU4Y+n+gylYUHkGBMA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@radix-ui/react-select': 1.2.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-toolbar': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.6.16
+      '@storybook/client-logger': 7.6.17
       '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/theming': 7.6.16(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.16
+      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.17
       memoizerific: 1.11.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -14863,12 +15019,12 @@ packages:
       '@storybook/preview-api': 7.6.3
     dev: false
 
-  /@storybook/core-common@7.6.16:
-    resolution: {integrity: sha512-Xn3Fbo4k9RRKgYzOBx9CeJFpWgS9gkcdo3J9XMMzmUqdZ+MUGT74kl2sMmzSypcH5aI1AUl5vZIKvLwloliejw==}
+  /@storybook/core-common@7.6.17:
+    resolution: {integrity: sha512-me2TP3Q9/qzqCLoDHUSsUF+VS1MHxfHbTVF6vAz0D/COTxzsxLpu9TxTbzJoBCxse6XRb6wWI1RgF1mIcjic7g==}
     dependencies:
-      '@storybook/core-events': 7.6.16
-      '@storybook/node-logger': 7.6.16
-      '@storybook/types': 7.6.16
+      '@storybook/core-events': 7.6.17
+      '@storybook/node-logger': 7.6.17
+      '@storybook/types': 7.6.17
       '@types/find-cache-dir': 3.2.1
       '@types/node': 18.11.17
       '@types/node-fetch': 2.6.7
@@ -14924,8 +15080,8 @@ packages:
       - encoding
       - supports-color
 
-  /@storybook/core-events@7.6.16:
-    resolution: {integrity: sha512-mkBqzrbp6vmdjo0fBZGrFQQ4YdvMFxF6AesdKTf8EzPa69FoxnhQLrmQ4aXF+9vXkxfXVJF2HfpoTEdfqqAo+w==}
+  /@storybook/core-events@7.6.17:
+    resolution: {integrity: sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==}
     dependencies:
       ts-dedent: 2.2.0
 
@@ -14985,10 +15141,10 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@storybook/csf-plugin@7.6.16:
-    resolution: {integrity: sha512-hslhGtnijMpL7HAcYYgIuo6acVLP7BDptflMwIyGFWKK3MHjMxqWTZ3Sj+BV1yg/pYZdqC2NYyUypeuuSpivSA==}
+  /@storybook/csf-plugin@7.6.17:
+    resolution: {integrity: sha512-xTHv9BUh3bkDVCvcbmdfVF0/e96BdrEgqPJ3G3RmKbSzWLOkQ2U9yiPfHzT0KJWPhVwj12fjfZp0zunu+pcS6Q==}
     dependencies:
-      '@storybook/csf-tools': 7.6.16
+      '@storybook/csf-tools': 7.6.17
       unplugin: 1.5.0
     transitivePeerDependencies:
       - supports-color
@@ -15003,15 +15159,15 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/csf-tools@7.6.16:
-    resolution: {integrity: sha512-8kVBq3UKDrEQq7rTHlNMoe1TDOTdO8iL8Jtv/FMDu/Qzj6AoT8/bjrtPsGjGMfVjP7QwBDeiLn6rStT4TlVGog==}
+  /@storybook/csf-tools@7.6.17:
+    resolution: {integrity: sha512-dAQtam0EBPeTJYcQPLxXgz4L9JFqD+HWbLFG9CmNIhMMjticrB0mpk1EFIS6vPXk/VsVWpBgMLD7dZlD6YMKcQ==}
     dependencies:
       '@babel/generator': 7.23.6
       '@babel/parser': 7.23.6
       '@babel/traverse': 7.23.6(supports-color@5.5.0)
       '@babel/types': 7.23.6
       '@storybook/csf': 0.1.2
-      '@storybook/types': 7.6.16
+      '@storybook/types': 7.6.17
       fs-extra: 11.2.0
       recast: 0.23.4
       ts-dedent: 2.2.0
@@ -15100,8 +15256,8 @@ packages:
   /@storybook/mdx2-csf@1.1.0:
     resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==}
 
-  /@storybook/node-logger@7.6.16:
-    resolution: {integrity: sha512-s18wgtLynLWnunz47lkVIpjk8J6LxT/OmfzkggieU8cG2XYRbf//t7/EOUpOqK77+Xqm3epSwgDAxOXGfjOjAA==}
+  /@storybook/node-logger@7.6.17:
+    resolution: {integrity: sha512-w59MQuXhhUNrUVmVkXhMwIg2nvFWjdDczLTwYLorhfsE36CWeUOY5QCZWQy0Qf/h+jz8Uo7Evy64qn18v9C4wA==}
     dev: false
 
   /@storybook/node-logger@7.6.3:
@@ -15111,15 +15267,15 @@ packages:
     resolution: {integrity: sha512-WpgdpJpY6rionluxjFZLbKiSDjvQJ5cPgufjvBRuXTsnVOsH3JNRWnPdkQkJLT9uTUMoNcyBMxbjYkK3vU6wSg==}
     dev: true
 
-  /@storybook/preview-api@7.6.16:
-    resolution: {integrity: sha512-V9x9HOhi4CJuiX+0a7GU0JlfRAp6txStGMkV0DrCATbxSWpK+6d5x2Te521z16V3RIMMmYn33aEyarOp5WjTqw==}
+  /@storybook/preview-api@7.6.17:
+    resolution: {integrity: sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==}
     dependencies:
-      '@storybook/channels': 7.6.16
-      '@storybook/client-logger': 7.6.16
-      '@storybook/core-events': 7.6.16
+      '@storybook/channels': 7.6.17
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-events': 7.6.17
       '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/types': 7.6.16
+      '@storybook/types': 7.6.17
       '@types/qs': 6.9.7
       dequal: 2.0.3
       lodash: 4.17.21
@@ -15148,8 +15304,8 @@ packages:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
 
-  /@storybook/preview@7.6.16:
-    resolution: {integrity: sha512-q4DbLn9kEK8JM9s+2oIjXBPHQhY0tQzsZ5hFeq833vNFcmuHnXS+WYk20b+UkmzL6j+E8pLm8WpI7rdbi0ZUVA==}
+  /@storybook/preview@7.6.17:
+    resolution: {integrity: sha512-LvkMYK/y6alGjwRVNDIKL1lFlbyZ0H0c8iAbcQkiMoaFiujMQyVswMDKlWcj42Upfr/B1igydiruomc+eUt0mw==}
     dev: false
 
   /@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.3.3)(webpack@5.89.0):
@@ -15220,10 +15376,10 @@ packages:
       - supports-color
     dev: false
 
-  /@storybook/router@7.6.16:
-    resolution: {integrity: sha512-PgVuzs83g4dq2r1qdcc0wvS1Pe1UpKdq54uy4TkBrrei7hBzB/+POztPXs0rVXXBXdCQT/jomLmRo/yC45bsGg==}
+  /@storybook/router@7.6.17:
+    resolution: {integrity: sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==}
     dependencies:
-      '@storybook/client-logger': 7.6.16
+      '@storybook/client-logger': 7.6.17
       memoizerific: 1.11.3
       qs: 6.11.2
     dev: false
@@ -15252,14 +15408,14 @@ packages:
       - supports-color
     dev: false
 
-  /@storybook/theming@7.6.16(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-ZiUyakApTzAiAR28JwqbqY426U1OlJPG/Y7ddQgYgTsdoRFR1iMewAxWW1LId1q3B1dtiIHAccqhocEMNcYkLA==}
+  /@storybook/theming@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@storybook/client-logger': 7.6.16
+      '@storybook/client-logger': 7.6.17
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
       react: 18.2.0
@@ -15280,10 +15436,10 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/types@7.6.16:
-    resolution: {integrity: sha512-Ld4dKbgSbvqThdBNwNlOxQu5AiS6U9DXI5evf/j83eWs6skO3OBdQp+GWa6sUCI9eRqH8tFsw/YmMcIZ4uZrBQ==}
+  /@storybook/types@7.6.17:
+    resolution: {integrity: sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==}
     dependencies:
-      '@storybook/channels': 7.6.16
+      '@storybook/channels': 7.6.17
       '@types/babel__core': 7.20.3
       '@types/express': 4.17.13
       file-system-cache: 2.3.0
@@ -15388,19 +15544,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@svgr/core@8.1.0(typescript@5.3.3):
-    resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==}
-    engines: {node: '>=14'}
-    dependencies:
-      '@babel/core': 7.23.6
-      '@svgr/babel-preset': 8.1.0(@babel/core@7.23.6)
-      camelcase: 6.3.0
-      cosmiconfig: 8.3.6(typescript@5.3.3)
-      snake-case: 3.0.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   /@svgr/hast-util-to-babel-ast@8.0.0:
     resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==}
     engines: {node: '>=14'}
@@ -15440,7 +15583,7 @@ packages:
     peerDependencies:
       '@svgr/core': '*'
     dependencies:
-      '@svgr/core': 8.1.0(typescript@5.3.3)
+      '@svgr/core': 8.1.0
       cosmiconfig: 8.3.6(typescript@5.3.3)
       deepmerge: 4.3.1
       svgo: 3.0.2
@@ -15738,7 +15881,6 @@ packages:
 
   /@types/cookie@0.4.1:
     resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
-    dev: false
 
   /@types/cookie@0.5.1:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
@@ -15757,6 +15899,12 @@ packages:
       '@types/node': 18.11.17
     dev: true
 
+  /@types/cors@2.8.17:
+    resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
+    dependencies:
+      '@types/node': 18.11.17
+    dev: true
+
   /@types/cross-spawn@6.0.2:
     resolution: {integrity: sha512-KuwNhp3eza+Rhu8IFI5HUXRP0LIhqH5cAjubUvGXXthh4YYBuP2ntwEX+Cz8GJoZUHlKo247wPWOfA9LYEq4cw==}
     dependencies:
@@ -16290,7 +16438,6 @@ packages:
     resolution: {integrity: sha512-ujqOVJEeLcwpDVJPnp/k3u1UXmTKq5urJq9fO8aUKg8Vlel5RNOFbVKEfqfh6wGfF/M+HiTJlBJMLC1aDfyf0Q==}
     dependencies:
       tapable: 2.2.1
-    dev: true
 
   /@types/testing-library__jest-dom@5.14.5:
     resolution: {integrity: sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==}
@@ -16377,7 +16524,6 @@ packages:
       - esbuild
       - uglify-js
       - webpack-cli
-    dev: true
 
   /@types/ws@8.5.5:
     resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==}
@@ -16908,7 +17054,6 @@ packages:
       acorn: ^8
     dependencies:
       acorn: 8.11.2
-    dev: true
 
   /acorn-import-assertions@1.9.0(acorn@8.11.2):
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
@@ -16948,7 +17093,6 @@ packages:
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn-walk@8.3.1:
     resolution: {integrity: sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==}
@@ -17452,7 +17596,7 @@ packages:
   /axios@0.27.2:
     resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
     dependencies:
-      follow-redirects: 1.15.1
+      follow-redirects: 1.15.5
       form-data: 4.0.0
     transitivePeerDependencies:
       - debug
@@ -17467,6 +17611,15 @@ packages:
     transitivePeerDependencies:
       - debug
 
+  /axios@1.6.7:
+    resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==}
+    dependencies:
+      follow-redirects: 1.15.5
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   /b-tween@0.3.3:
     resolution: {integrity: sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA==}
     dev: false
@@ -17708,6 +17861,11 @@ packages:
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  /base64id@2.0.0:
+    resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==}
+    engines: {node: ^4.5.0 || >= 5.9}
+    dev: true
+
   /basic-auth@1.0.0:
     resolution: {integrity: sha512-qzxS7/bW/LSiKZzdZw3isPjiVmzXbJLM3ImZZ62WMR3oJQAyqy094Nnb0TA2ZZm65xB7nu0acfTQ99z7wwCDCw==}
     dev: false
@@ -17776,6 +17934,26 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /body-parser@1.20.1:
+    resolution: {integrity: sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.4
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.0
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.11.0
+      raw-body: 2.5.1
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /body-scroll-lock@4.0.0-beta.0:
     resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
     dev: true
@@ -18704,7 +18882,6 @@ packages:
   /cookie@0.4.2:
     resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
     engines: {node: '>= 0.6'}
-    dev: false
 
   /cookie@0.5.0:
     resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
@@ -18748,6 +18925,14 @@ packages:
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  /cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+    dev: true
+
   /cosmiconfig-typescript-loader@4.3.0(@types/node@18.11.17)(cosmiconfig@8.1.3)(ts-node@10.9.2)(typescript@5.3.3):
     resolution: {integrity: sha512-NTxV1MFfZDLPiBMjxbHRwSh5LaLcPMwNdCutmnHJCKoVnlvldPWlllonKwrsRJ5pYZBIBGRWWU2tfvzxgeSW5Q==}
     engines: {node: '>=12', npm: '>=6'}
@@ -19190,6 +19375,10 @@ packages:
     resolution: {integrity: sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==}
     dev: false
 
+  /dayjs@1.11.6:
+    resolution: {integrity: sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==}
+    dev: true
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -19292,7 +19481,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       type-detect: 4.0.8
-    dev: true
 
   /deep-eql@4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
@@ -19752,6 +19940,31 @@ packages:
       objectorarray: 1.0.5
     dev: false
 
+  /engine.io-parser@5.2.1:
+    resolution: {integrity: sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==}
+    engines: {node: '>=10.0.0'}
+    dev: true
+
+  /engine.io@6.5.4:
+    resolution: {integrity: sha512-KdVSDKhVKyOi+r5uEabrDLZw2qXStVvCsEB/LN3mw4WFi6Gx50jTyuxYVCwAAC0U46FdnzP/ScKRBTXb/NiEOg==}
+    engines: {node: '>=10.2.0'}
+    dependencies:
+      '@types/cookie': 0.4.1
+      '@types/cors': 2.8.17
+      '@types/node': 18.11.17
+      accepts: 1.3.8
+      base64id: 2.0.0
+      cookie: 0.4.2
+      cors: 2.8.5
+      debug: 4.3.4(supports-color@5.5.0)
+      engine.io-parser: 5.2.1
+      ws: 8.11.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /enhanced-resolve@5.12.0:
     resolution: {integrity: sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==}
     engines: {node: '>=10.13.0'}
@@ -19789,7 +20002,6 @@ packages:
     resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /eol@0.9.1:
     resolution: {integrity: sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==}
@@ -21231,6 +21443,15 @@ packages:
       debug:
         optional: true
 
+  /follow-redirects@1.15.5:
+    resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -22565,6 +22786,10 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /ip@1.1.8:
+    resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==}
+    dev: true
+
   /ip@2.0.0:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     dev: false
@@ -22834,7 +23059,6 @@ packages:
   /is-plain-object@5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
@@ -23899,7 +24123,6 @@ packages:
 
   /json-stream-stringify@3.0.1:
     resolution: {integrity: sha512-vuxs3G1ocFDiAQ/SX0okcZbtqXwgj1g71qE9+vrjJ2EkjKQlEFDAcUNRxRU8O+GekV4v5cM2qXP0Wyt/EMDBiQ==}
-    dev: true
 
   /json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
@@ -24143,7 +24366,6 @@ packages:
   /lines-and-columns@2.0.4:
     resolution: {integrity: sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
 
   /lint-staged@13.1.4:
     resolution: {integrity: sha512-pJRmnRA4I4Rcc1k9GZIh9LQJlolCVDHqtJpIgPY7t99XY3uXXmUeDfhRLELYLgUFJPmEsWevTqarex9acSfx2A==}
@@ -24276,10 +24498,18 @@ packages:
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  /lodash.escape@4.0.1:
+    resolution: {integrity: sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==}
+    dev: true
+
   /lodash.flatmap@4.5.0:
     resolution: {integrity: sha512-/OcpcAGWlrZyoHGeHh3cAoa6nGdX6QYtmzNP84Jqol6UEQQ2gIaU3H+0eICcjcKGl0/XF8LWOujNn9lffsnaOg==}
     dev: false
 
+  /lodash.flatten@4.4.0:
+    resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
+    dev: true
+
   /lodash.flow@3.5.0:
     resolution: {integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==}
     dev: true
@@ -24288,6 +24518,10 @@ packages:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: false
 
+  /lodash.invokemap@4.6.0:
+    resolution: {integrity: sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==}
+    dev: true
+
   /lodash.isequal@4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
     dev: false
@@ -24313,6 +24547,10 @@ packages:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
     dev: true
 
+  /lodash.pullall@4.2.0:
+    resolution: {integrity: sha512-VhqxBKH0ZxPpLhiu68YD1KnHmbhQJQctcipvmFnqIBDYzcIHzf3Zpu0tpeOKtR4x76p9yohc506eGdOjTmyIBg==}
+    dev: true
+
   /lodash.snakecase@4.1.1:
     resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
 
@@ -24330,6 +24568,10 @@ packages:
   /lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
+  /lodash.uniqby@4.7.0:
+    resolution: {integrity: sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==}
+    dev: true
+
   /lodash.upperfirst@4.3.1:
     resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
 
@@ -25798,6 +26040,11 @@ packages:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
+  /opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+    dev: true
+
   /optionator@0.9.1:
     resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
     engines: {node: '>= 0.8.0'}
@@ -29237,6 +29484,11 @@ packages:
     resolution: {integrity: sha512-wtTijPuwUhyVG7YvnIVzlefhlto4qJ9vm42ewwJtqrOBP/vKdZCIyfiYm0odVCR3ajR1CIUqaloIzbqhlbyaZA==}
     engines: {node: '>=14.17.6'}
 
+  /rslog@1.2.1:
+    resolution: {integrity: sha512-XDMoa858LLZnf4i2kUwyjBQGplXaoSoIfMQf9iji2ano5t1OfSiJsSYpHeOH26DJEc5hdje/4K3wiT6TWL3cRA==}
+    engines: {node: '>=14.17.6'}
+    dev: false
+
   /rspack-manifest-plugin@5.0.0-alpha0(webpack@5.89.0):
     resolution: {integrity: sha512-a84H6P/lK0x3kb0I8Qdiwxrnjt1oNW0j+7kwPMWcODJu8eYFBrTXa1t+14n18Jvg9RKIR6llCH16mYxf2d0s8A==}
     engines: {node: '>=14'}
@@ -29704,6 +29956,42 @@ packages:
     resolution: {integrity: sha512-YMN2SdbrNjA4OWzpMUe7sZzUvvfEKl2JToyBLfFJMK+EpkU4bJEAkePqYE3YjZtgdLCoUaK0Lo84MjM8UqF38w==}
     dev: false
 
+  /socket.io-adapter@2.5.2:
+    resolution: {integrity: sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==}
+    dependencies:
+      ws: 8.11.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
+  /socket.io-parser@4.2.4:
+    resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@socket.io/component-emitter': 3.1.0
+      debug: 4.3.4(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /socket.io@4.7.2:
+    resolution: {integrity: sha512-bvKVS29/I5fl2FGLNHuXlQaUH/BlzX1IN6S+NKLNZpBsPZIDH+90eQmCs2Railn4YUiww4SzUedJ6+uzwFnKLw==}
+    engines: {node: '>=10.2.0'}
+    dependencies:
+      accepts: 1.3.8
+      base64id: 2.0.0
+      cors: 2.8.5
+      debug: 4.3.4(supports-color@5.5.0)
+      engine.io: 6.5.4
+      socket.io-adapter: 2.5.2
+      socket.io-parser: 4.2.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /sockx@0.2.0:
     resolution: {integrity: sha512-vVCmnzhVCKRp5bu+uJmqbYoocX5qpC96PRiij0HzyEvk9N0E2ZVpuR/ffHweijAcWDBEHA0bYzZdkR1jUSiOcg==}
     engines: {node: '>=0.10.0'}
@@ -30516,8 +30804,8 @@ packages:
       webpack: 5.89.0(esbuild@0.17.19)
     dev: false
 
-  /terser-webpack-plugin@5.3.9(esbuild@0.17.19)(webpack@5.89.0):
-    resolution: {integrity: sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==}
+  /terser-webpack-plugin@5.3.10(esbuild@0.18.20)(webpack@5.89.0):
+    resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
       '@swc/core': '*'
@@ -30533,14 +30821,14 @@ packages:
         optional: true
     dependencies:
       '@jridgewell/trace-mapping': 0.3.20
-      esbuild: 0.17.19
+      esbuild: 0.18.20
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.1
-      terser: 5.19.2
-      webpack: 5.89.0(esbuild@0.17.19)
+      terser: 5.27.0
+      webpack: 5.89.0(esbuild@0.18.20)
 
-  /terser-webpack-plugin@5.3.9(esbuild@0.18.20)(webpack@5.89.0):
+  /terser-webpack-plugin@5.3.9(esbuild@0.17.19)(webpack@5.89.0):
     resolution: {integrity: sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -30557,12 +30845,12 @@ packages:
         optional: true
     dependencies:
       '@jridgewell/trace-mapping': 0.3.20
-      esbuild: 0.18.20
+      esbuild: 0.17.19
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.1
       terser: 5.19.2
-      webpack: 5.89.0(esbuild@0.18.20)
+      webpack: 5.89.0(esbuild@0.17.19)
 
   /terser@5.19.2:
     resolution: {integrity: sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==}
@@ -30583,7 +30871,6 @@ packages:
       acorn: 8.11.2
       commander: 2.20.3
       source-map-support: 0.5.21
-    dev: false
 
   /terser@5.27.2:
     resolution: {integrity: sha512-sHXmLSkImesJ4p5apTeT63DsV4Obe1s37qT8qvwHRmVxKTBH7Rv9Wr26VcAMmLbmk9UliiwK8z+657NyJHHy/w==}
@@ -31943,6 +32230,33 @@ packages:
       javascript-stringify: 2.1.0
     dev: true
 
+  /webpack-bundle-analyzer@4.9.1:
+    resolution: {integrity: sha512-jnd6EoYrf9yMxCyYDPj8eutJvtjQNp8PHmni/e/ulydHBWhT5J3menXt3HEkScsu9YqMAcG4CfFjs3rj5pVU1w==}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      acorn: 8.11.2
+      acorn-walk: 8.3.1
+      commander: 7.2.0
+      escape-string-regexp: 4.0.0
+      gzip-size: 6.0.0
+      is-plain-object: 5.0.0
+      lodash.debounce: 4.0.8
+      lodash.escape: 4.0.1
+      lodash.flatten: 4.4.0
+      lodash.invokemap: 4.6.0
+      lodash.pullall: 4.2.0
+      lodash.uniqby: 4.7.0
+      opener: 1.5.2
+      picocolors: 1.0.0
+      sirv: 2.0.3
+      ws: 7.5.8
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
   /webpack-hot-middleware@2.25.4:
     resolution: {integrity: sha512-IRmTspuHM06aZh98OhBJtqLpeWFM8FXJS5UYpKYxCJzyFoyWj1w6VGFfomZU7OPA55dMLrQK0pRT1eQ3PACr4w==}
     dependencies:
@@ -32062,7 +32376,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.9(esbuild@0.18.20)(webpack@5.89.0)
+      terser-webpack-plugin: 5.3.10(esbuild@0.18.20)(webpack@5.89.0)
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -32323,6 +32637,32 @@ packages:
       async-limiter: 1.0.1
     dev: false
 
+  /ws@7.5.8:
+    resolution: {integrity: sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
+  /ws@8.11.0:
+    resolution: {integrity: sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
   /ws@8.13.0:
     resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
     engines: {node: '>=10.0.0'}
diff --git a/tests/integration/devtools/modern.config.ts b/tests/integration/devtools/modern.config.ts
index 92a3353d3f19..9973a1d67ec0 100644
--- a/tests/integration/devtools/modern.config.ts
+++ b/tests/integration/devtools/modern.config.ts
@@ -1,5 +1,8 @@
 import { devtoolsPlugin } from '@modern-js/plugin-devtools';
 import { defineConfig, appTools } from '@modern-js/app-tools';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+const disableClientServer = !process.env.DOCTOR_SERVER;
 
 export default defineConfig({
   runtime: {
@@ -19,6 +22,9 @@ export default defineConfig({
   },
   tools: {
     devServer: {},
+    rspack(config, { appendPlugins }) {
+      appendPlugins(new RsdoctorRspackPlugin({ disableClientServer }));
+    },
   },
-  plugins: [appTools(), devtoolsPlugin()],
+  plugins: [appTools({ bundler: 'experimental-rspack' }), devtoolsPlugin()],
 });
diff --git a/tests/integration/devtools/package.json b/tests/integration/devtools/package.json
index 8411b04c66dc..5004bde31eae 100644
--- a/tests/integration/devtools/package.json
+++ b/tests/integration/devtools/package.json
@@ -15,10 +15,11 @@
   "devDependencies": {
     "@modern-js/app-tools": "workspace:*",
     "@modern-js/plugin-devtools": "workspace:*",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@rsdoctor/rspack-plugin": "^0.1.0",
     "@types/jest": "^29",
     "@types/node": "^14",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "typescript": "^5"
   },
   "browserslist": {}