diff --git a/docs/errors/RDDT0003.md b/docs/errors/RDDT0003.md
new file mode 100644
index 000000000..1c3e93042
--- /dev/null
+++ b/docs/errors/RDDT0003.md
@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# RDDT0003: Rolldown Build Process Failed to Start
+
+## Message
+
+> Failed to start the Rolldown build process: `{error}`
+
+## Cause
+
+The Rolldown DevTools "Run build with devtools" button spawns a `vite build` child process (with Rolldown's `devtools` output forced on) so it can surface the resulting session. This diagnostic is thrown when that child process cannot be spawned — for example, when the `vite` binary cannot be resolved from the project root, or the terminal host fails to launch it.
+
+## Example
+
+Clicking "Run build with devtools" in a project where `vite` is not installed, or where the project root cannot run `vite build`.
+
+## Fix
+
+1. Ensure `vite` is installed in the project and `vite build` runs from the project root.
+2. Run the build once from a terminal to confirm it succeeds, then retry from DevTools.
+
+## Source
+
+- [`packages/rolldown/src/node/rolldown/build-runner.ts`](https://github.com/vitejs/devtools/blob/main/packages/rolldown/src/node/rolldown/build-runner.ts) — `startBuild()` throws this when `ctx.terminals.startChildProcess` fails to spawn `vite build`.
diff --git a/docs/errors/index.md b/docs/errors/index.md
index 1036819da..4786ce663 100644
--- a/docs/errors/index.md
+++ b/docs/errors/index.md
@@ -45,6 +45,7 @@ Emitted by `@vitejs/devtools-rolldown`.
 |------|-------|-------|
 | [RDDT0001](./RDDT0001) | warn | Rolldown Logs Directory Not Found |
 | [RDDT0002](./RDDT0002) | warn | Rolldown Log Reader Bad Line |
+| [RDDT0003](./RDDT0003) | error | Rolldown Build Process Failed to Start |
 
 ## Vite DevTools (VDT)
 
diff --git a/packages/rolldown/src/app/components/RunBuildDialog.vue b/packages/rolldown/src/app/components/RunBuildDialog.vue
new file mode 100644
index 000000000..2269706ec
--- /dev/null
+++ b/packages/rolldown/src/app/components/RunBuildDialog.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import type { BuildInfo } from '~~/node/rolldown/logs-manager'
+import { DEVTOOLS_TERMINALS_DOCK_ID } from '@vitejs/devtools-kit/constants'
+import ActionButton from '@vitejs/devtools-ui/components/Action/ActionButton.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/Display/DisplayBadge.vue'
+import DisplayTimestamp from '@vitejs/devtools-ui/components/Display/DisplayTimestamp.vue'
+import OverlayModal from '@vitejs/devtools-ui/components/Overlay/OverlayModal.vue'
+import VisualEmptyState from '@vitejs/devtools-ui/components/Visual/VisualEmptyState.vue'
+import VisualLoading from '@vitejs/devtools-ui/components/Visual/VisualLoading.vue'
+import { ref, watch } from 'vue'
+import { NuxtLink } from '#components'
+import { useRpc } from '#imports'
+
+// Bubble the refreshed session list up so the parent's list stays in sync
+// whether the build finished with the modal open or dismissed to the background.
+const emit = defineEmits<{ refresh: [BuildInfo[]] }>()
+const open = defineModel<boolean>('open', { default: false })
+
+const rpc = useRpc()
+
+type Stage = 'confirm' | 'running' | 'success' | 'error'
+const stage = ref<Stage>('confirm')
+const commandLine = ref('vite build')
+const buildSessionId = ref<string | null>(null)
+const errorMessage = ref<string | null>(null)
+const newSessions = ref<BuildInfo[]>([])
+
+// Reset to the confirmation step and load the exact command each time the
+// dialog is opened afresh.
+watch(open, async (isOpen) => {
+  if (!isOpen)
+    return
+  stage.value = 'confirm'
+  errorMessage.value = null
+  newSessions.value = []
+  buildSessionId.value = null
+  try {
+    const cmd = await rpc.value.call('vite:rolldown:get-build-command')
+    const env = Object.entries(cmd.env ?? {}).map(([k, v]) => `${k}=${v}`).join(' ')
+    commandLine.value = `${env ? `${env} ` : ''}${cmd.command} ${(cmd.args ?? []).join(' ')}`.trim()
+  }
+  catch {
+    commandLine.value = 'vite build'
+  }
+})
+
+async function confirmRun() {
+  stage.value = 'running'
+  errorMessage.value = null
+  // Snapshot existing session ids to surface only the ones this build produces.
+  const before = new Set((await rpc.value.call('vite:rolldown:list-sessions')).map(s => s.id))
+  try {
+    const { sessionId } = await rpc.value.call('vite:rolldown:run-build')
+    buildSessionId.value = sessionId
+    const { exitCode } = await rpc.value.call('vite:rolldown:wait-for-build')
+    const list = await rpc.value.call('vite:rolldown:list-sessions')
+    emit('refresh', list)
+    newSessions.value = list.filter(s => !before.has(s.id))
+    // If the user dismissed the modal while it ran, leave it closed — the list
+    // was already refreshed above.
+    if (!open.value)
+      return
+    if (exitCode != null && exitCode !== 0) {
+      stage.value = 'error'
+      errorMessage.value = `Build exited with code ${exitCode}.`
+    }
+    else {
+      stage.value = 'success'
+    }
+  }
+  catch (error) {
+    if (!open.value)
+      return
+    stage.value = 'error'
+    errorMessage.value = error instanceof Error ? error.message : String(error)
+  }
+}
+
+async function viewInTerminal() {
+  if (buildSessionId.value) {
+    await rpc.value.call('hub:docks:activate', {
+      dockId: DEVTOOLS_TERMINALS_DOCK_ID,
+      params: { sessionId: buildSessionId.value },
+    })
+  }
+  open.value = false
+}
+</script>
+
+<template>
+  <OverlayModal v-model:open="open">
+    <template #title>
+      Run build with devtools
+    </template>
+
+    <!-- Fixed min-height keeps the panel from jumping as stages swap. -->
+    <div class="flex flex-col gap-4 w-140 max-w-full min-h-64">
+      <!-- Confirm -->
+      <template v-if="stage === 'confirm'">
+        <p class="m0 op70 text-sm">
+          This runs a production build with Rolldown's devtools output enabled, then adds the resulting session below.
+        </p>
+        <pre class="m0 p3 rounded-lg border border-base bg-code font-mono text-sm of-auto text-left"><code>{{ commandLine }}</code></pre>
+        <div class="flex-auto" />
+        <div class="flex justify-end gap-2">
+          <ActionButton @click="open = false">
+            Cancel
+          </ActionButton>
+          <ActionButton variant="primary" icon="i-ph-play-duotone" @click="confirmRun()">
+            Run build
+          </ActionButton>
+        </div>
+      </template>
+
+      <!-- Running -->
+      <template v-else-if="stage === 'running'">
+        <VisualLoading class="flex-auto" text="Build running…" />
+        <div class="flex justify-end gap-2">
+          <ActionButton @click="open = false">
+            Dismiss
+          </ActionButton>
+          <ActionButton variant="primary" icon="i-ph-terminal-window-duotone" @click="viewInTerminal()">
+            View in terminals
+          </ActionButton>
+        </div>
+      </template>
+
+      <!-- Success -->
+      <template v-else-if="stage === 'success'">
+        <div class="flex gap-2 items-center text-green">
+          <span class="i-ph-check-circle-duotone" />
+          Build finished successfully.
+        </div>
+        <template v-if="newSessions.length">
+          <p class="m0 op60 text-sm">
+            New session{{ newSessions.length > 1 ? 's' : '' }} — open one to inspect it:
+          </p>
+          <div class="flex flex-col gap-2 flex-auto of-auto">
+            <NuxtLink
+              v-for="session of newSessions"
+              :key="session.id"
+              :to="`/session/${session.id}`"
+              class="border border-base rounded-md color-base text-left flex flex-col gap-1 px3 py2 hover:bg-active"
+              @click="open = false"
+            >
+              <div class="flex gap-1 items-center font-mono op50 text-sm">
+                <div class="i-ph-hash-duotone" />
+                {{ session.id }}
+              </div>
+              <div v-if="session.meta.inputs?.[0]" class="flex gap-1 items-center">
+                <DisplayModuleId :id="session.meta.inputs[0].filename" :cwd="session.meta.cwd" />
+                <DisplayBadge :text="session.meta.inputs[0].name || 'entry'" />
+              </div>
+              <DisplayTimestamp :timestamp="session.timestamp" class="text-xs op50" />
+            </NuxtLink>
+          </div>
+        </template>
+        <VisualEmptyState
+          v-else
+          class="flex-auto"
+          icon="i-ph-package-duotone"
+          description="The build produced no new devtools session."
+        />
+        <div class="flex justify-end gap-2">
+          <ActionButton @click="viewInTerminal()">
+            View in terminals
+          </ActionButton>
+          <ActionButton variant="primary" @click="open = false">
+            Close
+          </ActionButton>
+        </div>
+      </template>
+
+      <!-- Error -->
+      <template v-else>
+        <div class="flex gap-2 items-center text-red">
+          <span class="i-ph-x-circle-duotone" />
+          Build failed.
+        </div>
+        <p v-if="errorMessage" class="m0 op70 text-sm">
+          {{ errorMessage }}
+        </p>
+        <div class="flex-auto" />
+        <div class="flex justify-end gap-2">
+          <ActionButton @click="open = false">
+            Close
+          </ActionButton>
+          <ActionButton variant="primary" icon="i-ph-terminal-window-duotone" @click="viewInTerminal()">
+            View in terminals
+          </ActionButton>
+        </div>
+      </template>
+    </div>
+  </OverlayModal>
+</template>
diff --git a/packages/rolldown/src/app/pages/index.vue b/packages/rolldown/src/app/pages/index.vue
index 18e08715b..fb8117b09 100644
--- a/packages/rolldown/src/app/pages/index.vue
+++ b/packages/rolldown/src/app/pages/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { BuildInfo } from '~~/node/rolldown/logs-manager'
+import ActionButton from '@vitejs/devtools-ui/components/Action/ActionButton.vue'
+import ActionIconButton from '@vitejs/devtools-ui/components/Action/ActionIconButton.vue'
 import BannerRolldownDevTools from '@vitejs/devtools-ui/components/Banner/BannerRolldownDevTools.vue'
-import DisplayIconButton from '@vitejs/devtools-ui/components/Display/DisplayIconButton.vue'
 import { useClipboard } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRpc } from '#imports'
@@ -45,7 +46,10 @@ const normalizedSelectedSessions = computed(() => {
 })
 
 const rpc = useRpc()
-const sessions = await rpc.value.call('vite:rolldown:list-sessions')
+const sessions = ref<BuildInfo[]>(await rpc.value.call('vite:rolldown:list-sessions'))
+
+// Drives the confirm → run → result modal (see RunBuildDialog).
+const runBuildOpen = ref(false)
 
 function selectSession(session: BuildInfo) {
   if (selectedSessionIds.value.includes(session.id)) {
@@ -67,15 +71,27 @@ function selectSession(session: BuildInfo) {
       <p class="m0 op50 text-center">
         No sessions yet.
         <br>
-        Enable devtools output in your Rolldown config, then run a build:
+        Run a build with devtools output enabled to get started:
+      </p>
+      <ActionButton
+        variant="primary"
+        icon="i-ph-play-duotone"
+        title="Run a build with devtools output"
+        @click="runBuildOpen = true"
+      >
+        Run build with devtools
+      </ActionButton>
+      <p class="m0 op40 text-sm text-center">
+        Or enable it manually in your Rolldown config:
       </p>
       <div class="relative w-full">
         <pre class="m0 p3 pr10 rounded-lg border border-base bg-code font-mono text-sm of-auto text-left"><code>{{ ENABLE_DEVTOOLS_SNIPPET }}</code></pre>
-        <DisplayIconButton
-          class="absolute" top2 right2
-          title="Copy snippet"
-          class-icon="i-ph-copy-duotone"
+        <ActionIconButton
+          class="absolute top2 right2"
+          icon="i-ph-copy-duotone"
+          :tooltip="copied ? 'Copied!' : 'Copy snippet'"
           :active="copied"
+          active-class="text-green bg-active op100"
           @click="copy()"
         />
       </div>
@@ -92,12 +108,19 @@ function selectSession(session: BuildInfo) {
         @select="selectSession"
       />
     </div>
-    <div v-if="sessions.length" class="fixed top-5 right-5 flex flex-col gap2">
+    <div v-if="sessions.length" class="fixed top-5 right-5 flex flex-col gap2 items-end">
       <div class="flex flex-row justify-around w20 h8 border border-base rounded-8 of-hidden">
         <button v-for="mode in modeList" :key="mode.value" :title="mode.label" class="flex-1 op50 flex items-center justify-center hover:bg-active hover:text-base hover:op100!" :class="{ 'bg-active text-base op100!': sessionMode === mode.value }" @click="sessionMode = mode.value">
           <span :class="mode.icon" class="text-sm" />
         </button>
       </div>
+      <ActionButton
+        icon="i-ph-play-duotone"
+        title="Run a build with devtools output"
+        @click="runBuildOpen = true"
+      >
+        Run build
+      </ActionButton>
     </div>
     <div v-if="selectedSessions.length > 0 && sessionMode === 'compare'" class="fixed bottom-5 right-5 border border-base rounded-2 w100 max-lg:w85 bg-glass z-panel-content">
       <CompareSessionMeta :sessions="normalizedSelectedSessions" class="flex-col gap0 [&>div]:border-none! [&>first-child]:border-b!" />
@@ -110,5 +133,6 @@ function selectSession(session: BuildInfo) {
         </div>
       </div>
     </div>
+    <RunBuildDialog v-model:open="runBuildOpen" @refresh="sessions = $event" />
   </div>
 </template>
diff --git a/packages/rolldown/src/node/diagnostics.ts b/packages/rolldown/src/node/diagnostics.ts
index 3a2c2bfa8..1174dbe9e 100644
--- a/packages/rolldown/src/node/diagnostics.ts
+++ b/packages/rolldown/src/node/diagnostics.ts
@@ -10,5 +10,9 @@ export const diagnostics = /* #__PURE__ */ defineDiagnostics({
     RDDT0002: {
       why: (p: { line: number, error: string, preview: string }) => `Rolldown log reader skipped bad line ${p.line}: ${p.error}\n${p.preview}`,
     },
+    RDDT0003: {
+      why: (p: { error: string }) => `Failed to start the Rolldown build process: ${p.error}`,
+      fix: 'Ensure `vite` is installed in this project and can run `vite build` from the project root.',
+    },
   },
 })
diff --git a/packages/rolldown/src/node/plugin.ts b/packages/rolldown/src/node/plugin.ts
index b12cb9ce4..028020bc2 100644
--- a/packages/rolldown/src/node/plugin.ts
+++ b/packages/rolldown/src/node/plugin.ts
@@ -1,6 +1,8 @@
 import type { PluginWithDevTools } from '@vitejs/devtools-kit'
+import process from 'node:process'
 import { DEVTOOLS_VITEPLUS_GROUP_ID } from '@vitejs/devtools-kit/constants'
 import { clientPublicDir } from '../dirs'
+import { ROLLDOWN_DEVTOOLS_ENV } from './rolldown/build-runner'
 import { rpcFunctions } from './rpc/index'
 
 const ROLLDOWN_DEVTOOLS_BASE = '/__devtools-rolldown/'
@@ -8,6 +10,18 @@ const ROLLDOWN_DEVTOOLS_BASE = '/__devtools-rolldown/'
 export function DevToolsRolldownUI(): PluginWithDevTools {
   return {
     name: 'vite:devtools:rolldown-ui',
+    // When the "Run build with devtools" button spawns a `vite build`, it sets
+    // `VITE_DEVTOOLS_ROLLDOWN` on the child. This plugin is in the build's
+    // plugin pipeline (mounted by core whenever this package is installed), so
+    // it forces Rolldown's `devtools` output on for that build — no manual
+    // `DevToolsIntegration` wiring needed. A normal `vite build` (without the
+    // env var) is left untouched.
+    configResolved(config) {
+      if (process.env[ROLLDOWN_DEVTOOLS_ENV] !== 'true')
+        return
+      for (const environment of Object.values(config.environments))
+        environment.build.rolldownOptions.devtools ??= {}
+    },
     devtools: {
       setup(ctx) {
         for (const fn of rpcFunctions) {
diff --git a/packages/rolldown/src/node/rolldown/build-runner.ts b/packages/rolldown/src/node/rolldown/build-runner.ts
new file mode 100644
index 000000000..3d4e18663
--- /dev/null
+++ b/packages/rolldown/src/node/rolldown/build-runner.ts
@@ -0,0 +1,101 @@
+import type { DevToolsChildProcessExecuteOptions, ViteDevToolsNodeContext } from '@vitejs/devtools-kit'
+import process from 'node:process'
+import { diagnostics } from '../diagnostics'
+
+/**
+ * Base for the terminal-session id. A monotonic counter is appended per run so
+ * each build gets a unique id — a finished session can linger registered, and
+ * reusing a fixed id would throw "Terminal session ... already registered".
+ */
+const BUILD_SESSION_ID_BASE = 'vite:rolldown:build'
+/**
+ * Env var the spawned build carries so the Rolldown DevTools plugin forces
+ * `rolldownOptions.devtools` on for that build (see `plugin.ts`).
+ */
+export const ROLLDOWN_DEVTOOLS_ENV = 'VITE_DEVTOOLS_ROLLDOWN'
+
+type BuildSession = Awaited<ReturnType<ViteDevToolsNodeContext['terminals']['startChildProcess']>>
+
+/** The latest build session (module-scoped, like the Vitest launcher). */
+let current: BuildSession | undefined
+/** Id of {@link current}, so a still-running build can be reused. */
+let currentSessionId: string | undefined
+/** Monotonic run counter, appended to make each session id unique. */
+let runCount = 0
+
+export interface RunBuildResult {
+  sessionId: string
+  /** True when a build was already running and we reused its session. */
+  alreadyRunning: boolean
+}
+
+export interface WaitBuildResult {
+  /** Process exit code, or `null` when there is no build to await. */
+  exitCode: number | null
+}
+
+/**
+ * The child process the "Run build" button spawns. Exposed so the confirmation
+ * dialog can show exactly what will run before the user commits to it.
+ */
+export function getBuildCommand(context: ViteDevToolsNodeContext): DevToolsChildProcessExecuteOptions {
+  return {
+    command: 'vite',
+    args: ['build'],
+    cwd: context.cwd ?? process.cwd(),
+    env: { [ROLLDOWN_DEVTOOLS_ENV]: 'true' },
+  }
+}
+
+/**
+ * Spawn `vite build` with Rolldown's devtools output forced on. Returns
+ * immediately once the child is spawned and its terminal session registered —
+ * completion is awaited separately via {@link waitForBuild}.
+ */
+export async function startBuild(context: ViteDevToolsNodeContext): Promise<RunBuildResult> {
+  // Idempotent: a still-running build just reuses its session.
+  if (currentSessionId) {
+    const existing = context.terminals.sessions.get(currentSessionId)
+    if (existing?.status === 'running')
+      return { sessionId: currentSessionId, alreadyRunning: true }
+  }
+
+  // A finished/dead session may linger — terminate it before re-spawning.
+  if (current)
+    await current.terminate().catch(() => {})
+
+  // Fresh, unique id per run so re-registration never collides.
+  const sessionId = `${BUILD_SESSION_ID_BASE}-${++runCount}`
+
+  try {
+    current = await context.terminals.startChildProcess(
+      getBuildCommand(context),
+      {
+        id: sessionId,
+        title: `Rolldown build #${runCount}`,
+        // The Terminals panel only renders icons its SPA statically ships;
+        // use a terminal icon it bundles.
+        icon: 'ph:terminal-window-duotone',
+      },
+    )
+    currentSessionId = sessionId
+  }
+  catch (error) {
+    throw diagnostics.RDDT0003({ error: error instanceof Error ? error.message : String(error) })
+  }
+
+  return { sessionId, alreadyRunning: false }
+}
+
+/** Resolve once the spawned build exits. */
+export async function waitForBuild(): Promise<WaitBuildResult> {
+  if (!current)
+    return { exitCode: null }
+  try {
+    const result = await current.getResult()
+    return { exitCode: result.exitCode ?? null }
+  }
+  catch {
+    return { exitCode: null }
+  }
+}
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-build-command.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-build-command.ts
new file mode 100644
index 000000000..347ead5d5
--- /dev/null
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-build-command.ts
@@ -0,0 +1,13 @@
+import type { DevToolsChildProcessExecuteOptions } from '@vitejs/devtools-kit'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getBuildCommand } from '../../rolldown/build-runner'
+
+export const rolldownGetBuildCommand = defineRpcFunction({
+  name: 'vite:rolldown:get-build-command',
+  type: 'query',
+  setup: (context) => {
+    return {
+      handler: async (): Promise<DevToolsChildProcessExecuteOptions> => getBuildCommand(context),
+    }
+  },
+})
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-list-sessions.ts b/packages/rolldown/src/node/rpc/functions/rolldown-list-sessions.ts
index da92ddb80..e0186e251 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-list-sessions.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-list-sessions.ts
@@ -4,7 +4,8 @@ import { getLogsManager } from '../utils'
 
 export const rolldownListSessions = defineRpcFunction({
   name: 'vite:rolldown:list-sessions',
-  cacheable: true,
+  // Not client-cached: the "Run build" button re-fetches this to surface the
+  // session a fresh build just produced, so the list must stay live.
   type: 'static',
   jsonSerializable: true,
   setup: (context) => {
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-run-build.ts b/packages/rolldown/src/node/rpc/functions/rolldown-run-build.ts
new file mode 100644
index 000000000..7e664978f
--- /dev/null
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-run-build.ts
@@ -0,0 +1,13 @@
+import type { RunBuildResult } from '../../rolldown/build-runner'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { startBuild } from '../../rolldown/build-runner'
+
+export const rolldownRunBuild = defineRpcFunction({
+  name: 'vite:rolldown:run-build',
+  type: 'action',
+  setup: (context) => {
+    return {
+      handler: (): Promise<RunBuildResult> => startBuild(context),
+    }
+  },
+})
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-wait-for-build.ts b/packages/rolldown/src/node/rpc/functions/rolldown-wait-for-build.ts
new file mode 100644
index 000000000..a012fffa6
--- /dev/null
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-wait-for-build.ts
@@ -0,0 +1,13 @@
+import type { WaitBuildResult } from '../../rolldown/build-runner'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { waitForBuild } from '../../rolldown/build-runner'
+
+export const rolldownWaitForBuild = defineRpcFunction({
+  name: 'vite:rolldown:wait-for-build',
+  type: 'action',
+  setup: () => {
+    return {
+      handler: (): Promise<WaitBuildResult> => waitForBuild(),
+    }
+  },
+})
diff --git a/packages/rolldown/src/node/rpc/index.ts b/packages/rolldown/src/node/rpc/index.ts
index 67dc5a69a..d6ded9ab4 100644
--- a/packages/rolldown/src/node/rpc/index.ts
+++ b/packages/rolldown/src/node/rpc/index.ts
@@ -1,6 +1,7 @@
 import type { RpcDefinitionsFilter, RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
 import { rolldownGetAssetDetails } from './functions/rolldown-get-asset-details'
 import { rolldownGetAssetsList } from './functions/rolldown-get-assets-list'
+import { rolldownGetBuildCommand } from './functions/rolldown-get-build-command'
 import { rolldownGetChunkInfo } from './functions/rolldown-get-chunk-info'
 import { rolldownGetChunksGraph } from './functions/rolldown-get-chunks-graph'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
@@ -12,6 +13,8 @@ import { rolldownGetSessionCompareDetails } from './functions/rolldown-get-sessi
 import { rolldownGetSessionCompareSummary } from './functions/rolldown-get-session-compare-summary'
 import { rolldownGetSessionSummary } from './functions/rolldown-get-session-summary'
 import { rolldownListSessions } from './functions/rolldown-list-sessions'
+import { rolldownRunBuild } from './functions/rolldown-run-build'
+import { rolldownWaitForBuild } from './functions/rolldown-wait-for-build'
 import '@vitejs/devtools-kit'
 
 export const rpcFunctions = [
@@ -28,6 +31,9 @@ export const rpcFunctions = [
   rolldownGetChunkInfo,
   rolldownGetPackages,
   rolldownGetPackageDetails,
+  rolldownGetBuildCommand,
+  rolldownRunBuild,
+  rolldownWaitForBuild,
 ] as const
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>
diff --git a/packages/ui/src/components/Action/ActionButton.stories.ts b/packages/ui/src/components/Action/ActionButton.stories.ts
new file mode 100644
index 000000000..37a035989
--- /dev/null
+++ b/packages/ui/src/components/Action/ActionButton.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import ActionButton from './ActionButton.vue'
+
+const meta = {
+  title: 'Action/ActionButton',
+  component: ActionButton,
+  tags: ['autodocs'],
+  args: { variant: 'action' },
+  parameters: {
+    docs: { description: { component: 'Polymorphic action button (`variant` action/primary/text, `size`, `icon`, `loading`, `href`/`to`/`as`).' } },
+  },
+} satisfies Meta<typeof ActionButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Action: Story = {
+  render: args => ({ setup: () => () => h(ActionButton, args, { default: () => 'Run build' }) }),
+}
+
+export const Primary: Story = {
+  args: { variant: 'primary', icon: 'i-ph-play-duotone' },
+  render: args => ({ setup: () => () => h(ActionButton, args, { default: () => 'Run build' }) }),
+}
+
+export const Text: Story = {
+  args: { variant: 'text', icon: 'i-ph-arrow-right-duotone' },
+  render: args => ({ setup: () => () => h(ActionButton, args, { default: () => 'Learn more' }) }),
+}
+
+export const Loading: Story = {
+  args: { variant: 'primary', loading: true },
+  render: args => ({ setup: () => () => h(ActionButton, args, { default: () => 'Building…' }) }),
+}
diff --git a/packages/ui/src/components/Action/ActionButton.vue b/packages/ui/src/components/Action/ActionButton.vue
new file mode 100644
index 000000000..e4c6ea7e8
--- /dev/null
+++ b/packages/ui/src/components/Action/ActionButton.vue
@@ -0,0 +1,59 @@
+<!-- @description actions. `variant` action/primary/text, polymorphic `href`/`as`, `icon`, `loading`. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Render as another element/component (e.g. `RouterLink`). */
+    as?: string
+    to?: string
+    href?: string
+    icon?: string
+    variant?: 'action' | 'primary' | 'text'
+    size?: 'sm' | 'md'
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  { variant: 'action', size: 'md' },
+)
+
+const tag = computed(() => {
+  if (props.as)
+    return props.as
+  if (props.href != null || props.to != null)
+    return 'a'
+  return 'button'
+})
+
+const isLink = computed(() => tag.value === 'a')
+const isButton = computed(() => tag.value === 'button')
+const sm = computed(() => props.size === 'sm')
+
+const variantClass = computed(() => {
+  // `primary` is the solid filled button, `text` a borderless label; both
+  // mirror antfu/design.
+  if (props.variant === 'primary')
+    return sm.value ? 'btn-primary text-sm px-2.5! py-1!' : 'btn-primary'
+  if (props.variant === 'text')
+    return `inline-flex items-center gap-1.5 op75 hover:op100 transition${sm.value ? ' text-sm' : ''}`
+  return sm.value ? 'btn-action-sm' : 'btn-action'
+})
+
+const disabledState = computed(() => props.disabled || props.loading)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="[variantClass, { 'pointer-events-none op-mute': disabledState && !isButton }]"
+    :href="isLink ? (href ?? to) : undefined"
+    :to="as && to != null ? to : undefined"
+    :disabled="isButton ? disabledState : undefined"
+    :aria-disabled="disabledState || undefined"
+    :aria-busy="loading || undefined"
+  >
+    <span v-if="loading" class="i-svg-spinners-8-dots-rotate" aria-hidden="true" />
+    <span v-else-if="icon" :class="icon" aria-hidden="true" />
+    <slot />
+  </component>
+</template>
diff --git a/packages/ui/src/components/Action/ActionIconButton.stories.ts b/packages/ui/src/components/Action/ActionIconButton.stories.ts
new file mode 100644
index 000000000..d93c142ef
--- /dev/null
+++ b/packages/ui/src/components/Action/ActionIconButton.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ActionIconButton from './ActionIconButton.vue'
+
+const meta = {
+  title: 'Action/ActionIconButton',
+  component: ActionIconButton,
+  tags: ['autodocs'],
+  args: { icon: 'i-ph-list-bullets-duotone', tooltip: 'Session list' },
+  parameters: {
+    docs: { description: { component: 'Round icon-only button with a floating-vue `tooltip`, `active` state, `compact` variant, and a `#badge` slot. Font-size drives its size.' } },
+  },
+} satisfies Meta<typeof ActionIconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Active: Story = {
+  args: { active: true },
+}
+
+export const Compact: Story = {
+  args: { compact: true },
+}
diff --git a/packages/ui/src/components/Action/ActionIconButton.vue b/packages/ui/src/components/Action/ActionIconButton.vue
new file mode 100644
index 000000000..95fe832e4
--- /dev/null
+++ b/packages/ui/src/components/Action/ActionIconButton.vue
@@ -0,0 +1,65 @@
+<!-- @description a round icon-only button with a `tooltip`, `active` state, `#badge`. Compose with VueUse's `useDark` for a dark toggle. -->
+<script setup lang="ts">
+import { vTooltip } from 'floating-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Render as another element/component (e.g. `RouterLink`). */
+    as?: string
+    to?: string
+    href?: string
+    icon?: string
+    /** Tooltip text (floating-vue). Requires the shared floating-vue styles. */
+    tooltip?: string
+    active?: boolean
+    disabled?: boolean
+    /** Accessible label when the button has no visible text. */
+    label?: string
+    /** Compact, square (non-circular) icon button for dense toolbars. */
+    compact?: boolean
+    /** Class(es) applied when `active` — overrides the default `color-active bg-active` tint. */
+    activeClass?: string
+  }>(),
+  {},
+)
+
+const tag = computed(() => {
+  if (props.as)
+    return props.as
+  if (props.href != null || props.to != null)
+    return 'a'
+  return 'button'
+})
+
+const isLink = computed(() => tag.value === 'a')
+const isButton = computed(() => tag.value === 'button')
+
+const baseClass = computed(() => (props.compact ? 'btn-icon-compact' : 'btn-icon'))
+// No `size` prop: the button's own `font-size` is the size. Width/height come
+// purely from the icon glyph (sized in `em` by the icon preset) plus em-based
+// padding, so a `text-sm`/`text-lg`/etc. class (or any font-size) resizes the
+// whole button — same convention as DisplayBadge. `!` overrides the shared
+// `btn-icon(-compact)` shortcut's fixed `w-*`/`h-*`.
+const sizeClass = computed(() => (props.compact ? 'w-auto! h-auto! p-[0.25em]' : 'w-auto! h-auto! p-[0.5em]'))
+const activeStateClass = computed(() => (props.active ? (props.activeClass || 'color-active bg-active op100') : ''))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-tooltip="tooltip"
+    :type="isButton ? 'button' : undefined"
+    :class="[baseClass, sizeClass, activeStateClass, { 'pointer-events-none op-mute': disabled && !isButton }]"
+    :href="isLink ? (href ?? to) : undefined"
+    :to="as && to != null ? to : undefined"
+    :disabled="isButton ? disabled : undefined"
+    :aria-disabled="(disabled && !isButton) || undefined"
+    :aria-label="label ?? tooltip"
+    :aria-pressed="active || undefined"
+  >
+    <span v-if="icon" :class="icon" aria-hidden="true" />
+    <slot />
+    <slot name="badge" />
+  </component>
+</template>
diff --git a/packages/ui/src/unocss/shortcuts.ts b/packages/ui/src/unocss/shortcuts.ts
index 5f91e2f3f..1626f7787 100644
--- a/packages/ui/src/unocss/shortcuts.ts
+++ b/packages/ui/src/unocss/shortcuts.ts
@@ -21,6 +21,13 @@ export const shortcuts: UserShortcuts<Theme> = [
     'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
     'btn-action-sm': 'btn-action text-sm',
     'btn-action-active': 'color-active border-active! bg-active op100!',
+    // Solid, filled primary button (mirrors antfu/design's `btn-primary`).
+    'btn-primary': 'px3 py1.5 rounded flex gap-2 items-center bg-primary-500 hover:bg-primary-600 text-white transition disabled:op50 disabled:pointer-events-none outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40',
+
+    // Icon-only buttons. `ActionIconButton` overrides the fixed `w-*`/`h-*` with
+    // em-based padding so a font-size class resizes the whole control.
+    'btn-icon': 'w-8 h-8 rounded-full flex items-center justify-center op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
+    'btn-icon-compact': 'w-6 h-6 rounded flex items-center justify-center op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
 
     'icon-catppuccin': 'light:filter-invert-100 light:filter-hue-rotate-180 light:filter-brightness-80',