diff --git a/.circleci/config.yml b/.circleci/config.yml
index 801c5a6a69a6..70b387f58cb5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -6,6 +6,14 @@ parameters:
     type: enum
     enum: ["normal", "merged", "daily", "skipped", "docs"]
     default: "skipped"
+  ghPrNumber:
+    description: The PR number
+    type: string
+    default: ""
+  ghBaseBranch:
+    description: The name of the base branch (the target of the PR)
+    type: string
+    default: "next"
 
 executors:
   sb_node_18_classic:
@@ -500,7 +508,7 @@ jobs:
           command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit
       - run:
           name: Uploading results
-          command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench)
+          command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) << pipeline.parameters.ghPrNumber >> << pipeline.parameters.ghBaseBranch >>
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench)
   test-empty-init:
@@ -833,6 +841,10 @@ workflows:
                 # --smoke-test is not supported for the angular builder right now
                 # - "angular-cli"
                 - "lit-vite-ts"
+      - bench:
+          parallelism: 5
+          requires:
+            - build-sandboxes
 
       # TODO: reenable once we find out the source of flakyness
       # - test-runner-dev:
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 954092e8d2e2..e56e437088eb 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -72,3 +72,6 @@ This PR does not have a canary release associated. You can request a canary rele
 _core team members can create a canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>`_
 
 <!-- CANARY_RELEASE_SECTION -->
+
+<!-- BENCHMARK_SECTION -->
+<!-- BENCHMARK_SECTION -->
\ No newline at end of file
diff --git a/.github/workflows/trigger-circle-ci-workflow.yml b/.github/workflows/trigger-circle-ci-workflow.yml
index 66bcc0f1a7ce..c4c280dc8c40 100644
--- a/.github/workflows/trigger-circle-ci-workflow.yml
+++ b/.github/workflows/trigger-circle-ci-workflow.yml
@@ -36,79 +36,31 @@ jobs:
     outputs:
       branch: ${{ env.branch }}
 
-  trigger-normal-tests:
+  get-parameters:
     runs-on: ubuntu-latest
-    needs: get-branch
-    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:normal') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:normal')))
     steps:
-      - name: Trigger Normal tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "normal"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
-  trigger-docs-tests:
-    runs-on: ubuntu-latest
-    needs: get-branch
-    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:docs') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:docs')))
-    steps:
-      - name: Trigger docs tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "docs"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
-  trigger-merged-tests:
-    runs-on: ubuntu-latest
-    needs: get-branch
-    if: github.event_name == 'push' || (github.event.action == 'labeled' && github.event.label.name == 'ci:merged') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:merged'))
-    steps:
-      - name: Trigger merged tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "merged"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
-  trigger-daily-tests:
+      - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:normal') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:normal')))
+        run: echo "workflow=normal" >> $GITHUB_ENV
+      - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:docs') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:docs')))
+        run: echo "workflow=docs" >> $GITHUB_ENV
+      - if: github.event_name == 'push' || (github.event.action == 'labeled' && github.event.label.name == 'ci:merged') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:merged'))
+        run: echo "workflow=merged" >> $GITHUB_ENV
+      - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:daily') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:daily')))
+        run: echo "workflow=daily" >> $GITHUB_ENV
+    outputs:
+      workflow: ${{ env.workflow }}
+      ghBaseBranch: ${{ github.event.pull_request.base.ref }}
+      ghPrNumber: ${{ github.event.pull_request.number }}
+
+  trigger-circle-ci-workflow:
     runs-on: ubuntu-latest
-    needs: get-branch
-    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:daily') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:daily')))
+    needs: [get-branch, get-parameters]
+    if: needs.get-parameters.outputs.workflow != ''
     steps:
-      - name: Trigger the daily tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "daily"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
+      - name: Trigger Normal tests
+        uses: fjogeleit/http-request-action@v1
+        with:
+          url: 'https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline'
+          method: 'POST'
+          customHeaders: '{"Content-Type": "application/json", "Circle-Token": "${{ secrets.CIRCLE_CI_TOKEN }}"}'
+          data: '{ "branch": "${{needs.get-branch.outputs.branch}}", "parameters": ${{toJson(needs.get-parameters.outputs)}} }'
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2a07504e271..b1bffa805860 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 8.2.2
+
+- CPC: Add `ESM` export to `docs-tools` & `node-logger` packages - [#28539](https://github.com/storybookjs/storybook/pull/28539), thanks @ndelangen!
+- CPC: Fix missing dependency in `@storybook/addon-interactions` - [#28518](https://github.com/storybookjs/storybook/pull/28518), thanks @ndelangen!
+- CPC: Revert renames of panels, addon_ids - [#28524](https://github.com/storybookjs/storybook/pull/28524), thanks @ndelangen!
+
 ## 8.2.1
 
 - CPC: Fix type generation - [#28507](https://github.com/storybookjs/storybook/pull/28507), thanks @ndelangen!
diff --git a/CODEOWNERS b/CODEOWNERS
index 9d8ca4f6c5b9..7c7aee5e09ed 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -6,7 +6,7 @@
 # .yarnrc.yml @ndelangen @JReinhold
 
 # Docs
-# /docs/ @kylegach @jonniebigodes
+/docs/ @kylegach @jonniebigodes
 
 # Scripts
 # /scripts/         @ndelangen @kasperpeulen
diff --git a/MIGRATION.md b/MIGRATION.md
index 33dfe17f0532..3dd1311dd620 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
+  - [Failed to resolve import "@storybook/X" error](#failed-to-resolve-import-storybookx-error)
   - [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals)
 - [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
   - [Portable stories](#portable-stories)
@@ -415,6 +416,26 @@
 
 ## From version 8.1.x to 8.2.x
 
+### Failed to resolve import "@storybook/X" error
+
+Storybook's package structure changed in 8.2. It is a non-breaking change, but can expose missing project dependencies.
+
+This happens when `@storybook/X` is missing in your `package.json`, but your project references `@storybook/X` in your source code (typically in a story file or in a `.storybook` config file). This is a problem with your project, and if it worked in earlier versions of Storybook, it was purely accidental.
+
+Now in Storybook 8.2, that incorrect project configuration no longer works. The solution is to install `@storybook/X` as a dev dependency and re-run.
+
+Example errors:
+
+```sh
+Cannot find module @storybook/preview-api or its corresponding type declarations
+```
+
+```sh
+Internal server error: Failed to resolve import "@storybook/theming/create" from ".storybook/theme.ts". Does the file exist?
+```
+
+To protect your project from missing dependencies, try the `no-extraneous-dependencies` rule in [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import).
+
 ### Preview.js globals renamed to initialGlobals
 
 Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `initialGlobals`. We will remove `preview.js` `globals` in 9.0.
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 9f50f7d9a254..0ad19b34bd58 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -70,6 +70,8 @@ async function webpack(
    */
   const cliPath = require.resolve('storybook/package.json');
   const themingPath = join(cliPath, '..', 'core', 'theming', 'index.js');
+  const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
+
   const componentsPath = join(cliPath, '..', 'core', 'components', 'index.js');
   const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
   if (Array.isArray(webpackConfig.resolve?.alias)) {
@@ -87,6 +89,10 @@ async function webpack(
         name: '@mdx-js/react',
         alias: mdx,
       },
+      {
+        name: '@storybook/theming/create',
+        alias: themingCreatePath,
+      },
       {
         name: '@storybook/theming',
         alias: themingPath,
@@ -104,6 +110,7 @@ async function webpack(
     alias = {
       ...webpackConfig.resolve?.alias,
       react,
+      '@storybook/theming/create': themingCreatePath,
       '@storybook/theming': themingPath,
       '@storybook/components': componentsPath,
       '@storybook/blocks': blocksPath,
@@ -168,6 +175,7 @@ export const viteFinal = async (config: any, options: Options) => {
 
   const cliPath = dirname(require.resolve('storybook/package.json'));
   const themingPath = join(cliPath, 'core', 'theming', 'index.js');
+  const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
   const componentsPath = join(cliPath, 'core', 'components', 'index.js');
   const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
 
@@ -187,6 +195,7 @@ export const viteFinal = async (config: any, options: Options) => {
            *
            * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they should be singletons in the future due to the peerDependency on `storybook` package.
            */
+          '@storybook/theming/create': themingCreatePath,
           '@storybook/theming': themingPath,
           '@storybook/components': componentsPath,
           '@storybook/blocks': blocksPath,
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index dd06ce60155a..2a965dbacffc 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -65,7 +65,7 @@ export async function commonConfig(
     base: './',
     plugins: await pluginConfig(options),
     resolve: {
-      conditions: ['storybook', 'stories', 'test', 'browser', 'import', 'module', 'default'],
+      conditions: ['storybook', 'stories', 'test'],
       preserveSymlinks: isPreservingSymlinks(),
       alias: {
         assert: require.resolve('browser-assert'),
diff --git a/code/core/package.json b/code/core/package.json
index 49a46f20a7d4..326b6d18f517 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -277,7 +277,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
-    "@storybook/docs-mdx": "3.1.0-next.0",
+    "@storybook/docs-mdx": "4.0.0-next.0",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@tanstack/react-virtual": "^3.3.0",
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 29f71429bf95..dfcf2d4a5f51 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -23,7 +23,6 @@ import { commonGlobOptions, normalizeStoryPath } from '@storybook/core/common';
 import { logger, once } from '@storybook/core/node-logger';
 import { getStorySortParameter, loadConfig } from '@storybook/core/csf-tools';
 import { storyNameFromExport, toId, combineTags } from '@storybook/csf';
-import { analyze } from '@storybook/docs-mdx';
 import { dedent } from 'ts-dedent';
 import { autoName } from './autoName';
 import { IndexingError, MultipleIndexingError } from './IndexingError';
@@ -408,7 +407,8 @@ export class StoryIndexGenerator {
 
       const content = await fs.readFile(absolutePath, 'utf8');
 
-      const result = analyze(content);
+      const { analyze } = await import('@storybook/docs-mdx');
+      const result = await analyze(content);
 
       // Templates are not indexed
       if (result.isTemplate) return false;
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index f748d1d2d4ba..2ab3bfa27408 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -3,7 +3,7 @@ import { readFile, writeFile } from 'node:fs/promises';
 import { dedent } from 'ts-dedent';
 
 import * as t from '@babel/types';
-import bg from '@babel/generator';
+import bg, { type GeneratorOptions } from '@babel/generator';
 import bt from '@babel/traverse';
 
 import * as recast from 'recast';
@@ -599,15 +599,9 @@ export const loadCsf = (code: string, options: CsfOptions) => {
   return new CsfFile(ast, options);
 };
 
-interface FormatOptions {
-  sourceMaps?: boolean;
-  preserveStyle?: boolean;
-  inputSourceMap?: any;
-}
-
 export const formatCsf = (
   csf: CsfFile,
-  options: FormatOptions = { sourceMaps: false },
+  options: GeneratorOptions & { inputSourceMap?: any } = { sourceMaps: false },
   code?: string
 ) => {
   const result = generate(csf._ast, options, code);
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 647fa492a0e1..37893aa4c035 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -263,10 +263,7 @@ type UnwrappedJSXStoryRef = {
   __pw_type: 'jsx';
   type: UnwrappedImportStoryRef;
 };
-type UnwrappedImportStoryRef = ComposedStoryFn & {
-  playPromise?: Promise<void>;
-  renderingEnded?: PromiseWithResolvers<void>;
-};
+type UnwrappedImportStoryRef = ComposedStoryFn;
 
 declare global {
   function __pwUnwrapObject(
diff --git a/code/deprecated/core-events/shim.js b/code/deprecated/core-events/shim.js
index 4c4b44a5716d..217389a630ed 100644
--- a/code/deprecated/core-events/shim.js
+++ b/code/deprecated/core-events/shim.js
@@ -1 +1 @@
-module.exports = require('storybook/internal/core-errors');
+module.exports = require('storybook/internal/core-events');
diff --git a/code/frameworks/nextjs/template/cli/js/Configure.mdx b/code/frameworks/nextjs/template/cli/js/Configure.mdx
index 055a3c564efc..cc3292373f73 100644
--- a/code/frameworks/nextjs/template/cli/js/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/js/Configure.mdx
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
index 055a3c564efc..cc3292373f73 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
index 055a3c564efc..cc3292373f73 100644
--- a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>
diff --git a/code/lib/cli/rendererAssets/common/Configure.mdx b/code/lib/cli/rendererAssets/common/Configure.mdx
index a3d3c80985fb..54813ea1f8c3 100644
--- a/code/lib/cli/rendererAssets/common/Configure.mdx
+++ b/code/lib/cli/rendererAssets/common/Configure.mdx
@@ -48,7 +48,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/{{renderer}}/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer={{renderer}}"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -60,7 +60,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/{{renderer}}/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer={{renderer}}#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -72,7 +72,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -94,7 +94,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -103,7 +103,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer={{renderer}}#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer={{renderer}}#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -123,7 +123,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -132,7 +132,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -141,7 +141,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -153,7 +153,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>
diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts
index cffea359a871..f2256e11c2b8 100644
--- a/code/lib/cli/src/helpers.ts
+++ b/code/lib/cli/src/helpers.ts
@@ -221,7 +221,9 @@ export async function copyTemplateFiles({
   await fse.copy(await templatePath(), destinationPath, { overwrite: true });
 
   if (includeCommonAssets) {
-    const rendererType = frameworkToRenderer[renderer] || 'react';
+    let rendererType = frameworkToRenderer[renderer] || 'react';
+    // This is only used for docs links and the docs site uses `vue` for both `vue` & `vue3` renderers
+    if (rendererType === 'vue3') rendererType = 'vue';
     await adjustTemplate(join(destinationPath, 'Configure.mdx'), { renderer: rendererType });
   }
 }
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 30773df41ea6..e7a55f4ba360 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -514,7 +514,7 @@ const baseTemplates = {
   },
   'qwik-vite/default-ts': {
     name: 'Qwik CLI Latest (Vite | TypeScript)',
-    script: 'npm create qwik basic {{beforeDir}}',
+    script: 'npm create qwik playground {{beforeDir}}',
     // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does.
     inDevelopment: true,
     expected: {
diff --git a/code/lib/csf-plugin/src/webpack-loader.ts b/code/lib/csf-plugin/src/webpack-loader.ts
index a4c7aeb825eb..1d27053918b1 100644
--- a/code/lib/csf-plugin/src/webpack-loader.ts
+++ b/code/lib/csf-plugin/src/webpack-loader.ts
@@ -20,7 +20,11 @@ async function loader(this: LoaderContext, content: string, map: any) {
     const csf = loadCsf(content, { makeTitle }).parse();
     const csfSource = loadCsf(sourceCode, { makeTitle }).parse();
     enrichCsf(csf, csfSource, options);
-    const formattedCsf = formatCsf(csf, { sourceMaps: true, inputSourceMap: map }, content);
+    const formattedCsf = formatCsf(
+      csf,
+      { sourceMaps: true, inputSourceMap: map, sourceFileName: id },
+      content
+    );
 
     if (typeof formattedCsf === 'string') {
       return callback(null, formattedCsf, map);
diff --git a/code/package.json b/code/package.json
index 2a6bbac1a387..a4310abef8ba 100644
--- a/code/package.json
+++ b/code/package.json
@@ -54,7 +54,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint-staged"
+      "pre-commit": "if [ -z \"$SKIP_STORYBOOK_GIT_HOOKS\" ]; then yarn storybook:lint; fi"
     }
   },
   "lint-staged": {
diff --git a/code/yarn.lock b/code/yarn.lock
index 891cc77ecc9d..9ff47ee2f2dd 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5758,7 +5758,7 @@ __metadata:
     "@radix-ui/react-scroll-area": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/csf": "npm:0.1.11"
-    "@storybook/docs-mdx": "npm:3.1.0-next.0"
+    "@storybook/docs-mdx": "npm:4.0.0-next.0"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@tanstack/react-virtual": "npm:^3.3.0"
@@ -5911,10 +5911,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-mdx@npm:3.1.0-next.0":
-  version: 3.1.0-next.0
-  resolution: "@storybook/docs-mdx@npm:3.1.0-next.0"
-  checksum: 10c0/7622d7c6318e842c90a71c1836d68531236c31fff7081c885803eddfafb7e3f8998689f612eaa0292209ada8352a36657dcacb5d3ef4632b8e8b8a283c39602e
+"@storybook/docs-mdx@npm:4.0.0-next.0":
+  version: 4.0.0-next.0
+  resolution: "@storybook/docs-mdx@npm:4.0.0-next.0"
+  dependencies:
+    acorn: "npm:^8.12.1"
+  checksum: 10c0/6253361e4e3c6c716c4f4c8cc30c082bcdab66b35b30183f6574d94720d875e28927916be8bda0bff4987090c3e50d348ca898160b1812a90c5afa845400414e
   languageName: node
   linkType: hard
 
@@ -9241,7 +9243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.12.1
   resolution: "acorn@npm:8.12.1"
   bin:
diff --git a/docs/_assets/api/doc-block-argtypes.png b/docs/_assets/api/doc-block-argtypes.png
index b555f8b7b2eb..579b1d69059a 100644
Binary files a/docs/_assets/api/doc-block-argtypes.png and b/docs/_assets/api/doc-block-argtypes.png differ
diff --git a/docs/_assets/get-started/example-onboarding-wizard.png b/docs/_assets/get-started/example-onboarding-wizard.png
index 45eeb599a3e2..b290bcd6bc91 100644
Binary files a/docs/_assets/get-started/example-onboarding-wizard.png and b/docs/_assets/get-started/example-onboarding-wizard.png differ
diff --git a/docs/_snippets/button-story-baseline.md b/docs/_snippets/button-story-baseline.md
index b26bdca7ea47..e6862198b815 100644
--- a/docs/_snippets/button-story-baseline.md
+++ b/docs/_snippets/button-story-baseline.md
@@ -10,7 +10,7 @@ const meta: Meta<Button> = {
 export default meta;
 type Story = StoryObj<Button>;
 
-//👇 Throws a type error it the args don't match the component props
+//👇 Throws a type error if the args don't match the component props
 export const Primary: Story = {
   args: {
     primary: true,
@@ -31,7 +31,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-//👇 Throws a type error it the args don't match the component props
+//👇 Throws a type error if the args don't match the component props
 export const Primary: Story = {
   args: {
     primary: true,
@@ -49,11 +49,10 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-//👇 Throws a type error it the args don't match the component props
+//👇 Throws a type error if the args don't match the component props
 export const Primary: Story = {
   args: {
     primary: true,
   },
 };
 ```
-
diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index dd4e5c49daaa..85cca9ffa13b 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -70,11 +70,13 @@ To configure subpath imports, you define the `imports` property in your project'
 
 {/* prettier-ignore-end */}
 
-There are two aspects to this configuration worth noting:
+There are three aspects to this configuration worth noting:
 
 First, **each subpath must begin with `#`**, to differentiate it from a regular module path. The `#*` entry is a catch-all that maps all subpaths to the root directory.
 
-Second, note the **`storybook`, `test`, and `default` keys** in each module's entry. The `storybook` value is used to import the mock file when loaded in Storybook, while the `default` value is used to import the original module when loaded in your project. The `test` condition is also used within Storybook, which allows you to use the same configuration in Storybook and your other tests.
+Second, the order of the keys is important. The `default` key should come last.
+
+Third, note the **`storybook`, `test`, and `default` keys** in each module's entry. The `storybook` value is used to import the mock file when loaded in Storybook, while the `default` value is used to import the original module when loaded in your project. The `test` condition is also used within Storybook, which allows you to use the same configuration in Storybook and your other tests.
 
 With the package configuration in place, you can then update your component file to use the subpath import:
 
diff --git a/scripts/upload-bench.ts b/scripts/upload-bench.ts
index 250c6154ce25..d076fc3fff2b 100644
--- a/scripts/upload-bench.ts
+++ b/scripts/upload-bench.ts
@@ -7,6 +7,8 @@ import { loadBench } from './bench/utils';
 import { SANDBOX_DIRECTORY } from './utils/constants';
 
 const templateKey = process.argv[2];
+const prNumber = process.argv[3];
+const baseBranch = process.argv[4];
 
 const GCP_CREDENTIALS = JSON.parse(process.env.GCP_CREDENTIALS || '{}');
 const sandboxDir = process.env.SANDBOX_ROOT || SANDBOX_DIRECTORY;
@@ -63,12 +65,8 @@ const uploadBench = async () => {
 
   const row = {
     ...defaults,
-    branch:
-      process.env.CIRCLE_BRANCH ||
-      (await execaCommand('git rev-parse --abbrev-ref HEAD', { cleanup: true })).stdout,
-    commit:
-      process.env.CIRCLE_SHA1 ||
-      (await execaCommand('git rev-parse HEAD', { cleanup: true })).stdout,
+    branch: await getBranchName(),
+    commit: await getCommitHash(),
     timestamp: new Date().toISOString(),
     label: templateKey,
     ...results,
@@ -81,7 +79,40 @@ const uploadBench = async () => {
   const dataset = store.dataset('benchmark_results');
   const appTable = dataset.table('bench2');
 
-  await appTable.insert([row]);
+  async function uploadToGithub() {
+    if (
+      !prNumber ||
+      !baseBranch ||
+      prNumber === '0' ||
+      templateKey !== 'bench/react-vite-default-ts'
+    ) {
+      console.log('skip uploading results to github');
+      return;
+    }
+    const [[base]]: any[] = await appTable.query({
+      query: `SELECT * FROM \`storybook-benchmark.benchmark_results.bench2\` WHERE branch=@baseBranch AND label=@templateKey ORDER BY timestamp DESC LIMIT 1;`,
+      params: { baseBranch, templateKey },
+    });
+
+    return prNumber && prNumber !== '0'
+      ? fetch('https://storybook-benchmark-bot.vercel.app/description', {
+          method: 'POST',
+          body: JSON.stringify({
+            owner: 'storybookjs',
+            repo: 'storybook',
+            issueNumber: prNumber,
+            base: { ...defaults, ...base },
+            head: row,
+          }),
+        })
+      : Promise.resolve();
+  }
+
+  function uploadToBigQuery() {
+    return appTable.insert([row]);
+  }
+
+  await Promise.all([uploadToGithub(), uploadToBigQuery()]);
 };
 
 uploadBench()
@@ -97,3 +128,16 @@ uploadBench()
   .then(() => {
     console.log('done');
   });
+
+async function getCommitHash(): Promise<string> {
+  return (
+    process.env.CIRCLE_SHA1 || (await execaCommand('git rev-parse HEAD', { cleanup: true })).stdout
+  );
+}
+
+async function getBranchName(): Promise<string> {
+  return (
+    process.env.CIRCLE_BRANCH ||
+    (await execaCommand('git rev-parse --abbrev-ref HEAD', { cleanup: true })).stdout
+  );
+}