diff --git a/spx-gui/public/tutorial-intro/code-drag-hint.mov b/spx-gui/public/tutorial-intro/code-drag-hint.mov
new file mode 100644
index 0000000000..59e96e505c
Binary files /dev/null and b/spx-gui/public/tutorial-intro/code-drag-hint.mov differ
diff --git a/spx-gui/src/apps/xbuilder/.env b/spx-gui/src/apps/xbuilder/.env
index 3c3fc31856..a898bba11a 100644
--- a/spx-gui/src/apps/xbuilder/.env
+++ b/spx-gui/src/apps/xbuilder/.env
@@ -40,6 +40,10 @@ VITE_USERCONTENT_UPLOAD_BASE_URL=""
 # Optional as they have default values.
 VITE_DISABLE_AIGC="false"
 
+# Use a local mock Copilot response in Vite development so product walkthroughs
+# are not blocked by Account OAuth. This is ignored in production builds.
+VITE_COPILOT_LOCAL_PREVIEW="false"
+
 # Version of spx, keep in sync with the version in `install-spx.sh`.
 VITE_SPX_VERSION="2.0.4"
 
@@ -69,3 +73,10 @@ VITE_DEFAULT_LANG="en"
 #
 # Required when enabling the new Account OAuth flow.
 VITE_ACCOUNT_OAUTH_CLIENT_ID=""
+
+# Optional. Overrides the OAuth redirect URI used by app xbuilder.
+#
+# Leave empty for normal deployments so the app uses the current web origin.
+# Local staging previews can set this to a callback URI registered in the
+# staging Account backend.
+VITE_ACCOUNT_OAUTH_REDIRECT_URI=""
diff --git a/spx-gui/src/apps/xbuilder/.env.staging b/spx-gui/src/apps/xbuilder/.env.staging
index f23aa21eac..c62b369cf5 100644
--- a/spx-gui/src/apps/xbuilder/.env.staging
+++ b/spx-gui/src/apps/xbuilder/.env.staging
@@ -10,5 +10,7 @@ VITE_USERCONTENT_UPLOAD_BASE_URL="https://upload.qiniup.com"
 VITE_SENTRY_DSN="https://0d463740215eb87f7e06f6572d64c93e@o4509472134987776.ingest.us.sentry.io/4509472136167424"
 
 VITE_SHOW_TUTORIALS_ENTRY="true"
+VITE_COPILOT_LOCAL_PREVIEW="true"
 
 VITE_ACCOUNT_OAUTH_CLIENT_ID="1"
+VITE_ACCOUNT_OAUTH_REDIRECT_URI="https://goplus-builder.qiniu.io/sign-in/callback"
diff --git a/spx-gui/src/apps/xbuilder/env.ts b/spx-gui/src/apps/xbuilder/env.ts
index d852b0181b..0e9f34169b 100644
--- a/spx-gui/src/apps/xbuilder/env.ts
+++ b/spx-gui/src/apps/xbuilder/env.ts
@@ -5,8 +5,11 @@ export const disableAIGC = import.meta.env.VITE_DISABLE_AIGC === 'true'
 export const spxVersion = import.meta.env.VITE_SPX_VERSION as string
 export const showLicense = import.meta.env.VITE_SHOW_LICENSE === 'true'
 export const showTutorialsEntry = import.meta.env.VITE_SHOW_TUTORIALS_ENTRY === 'true'
+export const tutorialIntroVideoUrl =
+  (import.meta.env.VITE_TUTORIAL_INTRO_VIDEO_URL as string) || '/tutorial-intro/code-drag-hint.mov'
 export const defaultLang = (import.meta.env.VITE_DEFAULT_LANG as string) || 'en'
 export const accountOAuthClientId = import.meta.env.VITE_ACCOUNT_OAUTH_CLIENT_ID as string
+export const accountOAuthRedirectUri = (import.meta.env.VITE_ACCOUNT_OAUTH_REDIRECT_URI as string) || undefined
 const sentryTracesSampleRate = parseFloat(import.meta.env.VITE_SENTRY_TRACES_SAMPLE_RATE as string)
 const sentryLSPSampleRate = parseFloat(import.meta.env.VITE_SENTRY_LSP_SAMPLE_RATE as string)
 export const sentry = {
diff --git a/spx-gui/src/apps/xbuilder/pages/editor/index.vue b/spx-gui/src/apps/xbuilder/pages/editor/index.vue
index e683866cbd..62ec4c83d4 100644
--- a/spx-gui/src/apps/xbuilder/pages/editor/index.vue
+++ b/spx-gui/src/apps/xbuilder/pages/editor/index.vue
@@ -3,7 +3,7 @@
     <header class="flex-none">
       <EditorNavbar :project="state?.project ?? null" :state="state" />
     </header>
-    <main class="flex-[1_1_0] flex gap-xl p-4 pt-2">
+    <main class="flex-[1_1_0] flex" :class="isTutorialCourse ? 'gap-0 p-0' : 'gap-xl p-4 pt-2'">
       <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
         <span>{{ $t(allQueryRet.progress.value.desc ?? { en: 'Loading...', zh: '加载中...' }) }}</span>
       </UIDetailedLoading>
@@ -64,6 +64,7 @@ import { cloudHelpers } from '@/models/common/cloud'
 import { localHelpers, type LocalHelpers } from '@/models/common/local'
 import type { ProjectSerialized } from '@/models/project'
 import { SpxProject } from '@/models/spx/project'
+import { useMaybeTutorial } from '@/components/tutorials/tutorial'
 
 const props = defineProps<{
   ownerNameInput: string
@@ -72,6 +73,8 @@ const props = defineProps<{
 const localCache = new LocalCache(localHelpers)
 
 const signedInStateQuery = useSignedInStateQuery()
+const tutorial = useMaybeTutorial()
+const isTutorialCourse = computed(() => tutorial?.currentCourse != null)
 
 const router = useRouter()
 const routeProjectIdentifier = computed<ProjectIdentifier>(() => ({
diff --git a/spx-gui/src/apps/xbuilder/pages/tutorials/course-series.vue b/spx-gui/src/apps/xbuilder/pages/tutorials/course-series.vue
index ebba6ea918..ece214ffc1 100644
--- a/spx-gui/src/apps/xbuilder/pages/tutorials/course-series.vue
+++ b/spx-gui/src/apps/xbuilder/pages/tutorials/course-series.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { listCourses, type Course } from '@/apis/course'
-import { getCourseSeries, type CourseSeries } from '@/apis/course-series'
+import { listCourses } from '@/apis/course'
+import { getCourseSeries } from '@/apis/course-series'
 import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
 import CenteredWrapper from '@/components/common/CenteredWrapper.vue'
 import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
 import TextView from '@/components/community/TextView.vue'
 import CourseItem, { courseItemHeight } from '@/components/tutorials/CourseItem.vue'
-import { useTutorial } from '@/components/tutorials/tutorial'
 import { UICard, UIEmpty, UIError, UIImg, UILoading, UIPagination, useResponsive } from '@/components/ui'
 import { createFileWithUniversalUrl } from '@/models/common/cloud'
 import { useQuery } from '@/utils/query'
 import { useRouteQueryParamInt } from '@/utils/route'
 import { useAsyncComputed, usePageTitle } from '@/utils/utils'
-import { useMessageHandle } from '@/utils/exception'
 import CommunityFooter from '@/components/community/footer/CommunityFooter.vue'
 // TODO: Temporary background, replace with the latest assets
 import stageBg from '@/assets/images/stage-bg.svg'
@@ -27,8 +25,6 @@ const props = defineProps<{
   courseSeriesIdInput: string
 }>()
 
-const tutorial = useTutorial()
-
 const courseSeriesQuery = useQuery(async () => getCourseSeries(props.courseSeriesIdInput), {
   en: 'Failed to load course series',
   zh: '加载课程系列失败'
@@ -78,20 +74,6 @@ const courseQuery = useQuery(
   { en: 'Failed to load course list', zh: '加载课程列表失败' }
 )
 
-const { fn: handleCourseClick } = useMessageHandle(
-  (event: MouseEvent, course: Course, courseSeries: CourseSeries) => {
-    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return
-    }
-
-    event.preventDefault()
-    tutorial.startCourse(course, courseSeries)
-  },
-  {
-    en: 'Failed to start course',
-    zh: '开始课程失败'
-  }
-)
 </script>
 
 <template>
@@ -154,7 +136,6 @@ const { fn: handleCourseClick } = useMessageHandle(
                   :key="course.id"
                   :href="`/course/${courseSeries.id}/${course.id}/start`"
                   class="no-underline"
-                  @click="handleCourseClick($event, course, courseSeries)"
                 >
                   <CourseItem :course="course" />
                 </a>
diff --git a/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.test.ts b/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.test.ts
new file mode 100644
index 0000000000..44dc27b45d
--- /dev/null
+++ b/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.test.ts
@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import CourseStart from './course-start.vue'
+
+const mocks = vi.hoisted(() => {
+  const course = {
+    id: 'course-1',
+    owner: 'curator',
+    title: 'Coding Course 1',
+    thumbnail: '',
+    entrypoint: '/editor/curator/Coding-Course-1/sprites/Kiko/code',
+    references: [],
+    prompt: 'Help the learner finish the course'
+  }
+  const courseSeries = {
+    id: 'series-1',
+    owner: 'curator',
+    title: 'Coding Course',
+    thumbnail: '',
+    description: '',
+    courseIDs: ['course-1'],
+    order: 1,
+    createdAt: '',
+    updatedAt: ''
+  }
+  return {
+    course,
+    courseSeries,
+    getCourse: vi.fn(() => Promise.resolve(course)),
+    getCourseSeries: vi.fn(() => Promise.resolve(courseSeries)),
+    startCourse: vi.fn(() => Promise.resolve())
+  }
+})
+
+vi.mock('@/apis/course', () => ({
+  getCourse: mocks.getCourse
+}))
+
+vi.mock('@/apis/course-series', () => ({
+  getCourseSeries: mocks.getCourseSeries
+}))
+
+vi.mock('@/components/tutorials/tutorial', () => ({
+  useTutorial: () => ({
+    startCourse: mocks.startCourse
+  })
+}))
+
+vi.mock('@/components/tutorials/CourseIntroVideo.vue', () => ({
+  default: {
+    props: ['src'],
+    emits: ['continue'],
+    template: '<button data-test-id="intro-continue" @click="$emit(\'continue\')">{{ src }}</button>'
+  }
+}))
+
+describe('course-start', () => {
+  it('waits for the intro video before starting the course', async () => {
+    const wrapper = mount(CourseStart, {
+      props: {
+        courseSeriesIdInput: 'series-1',
+        courseIdInput: 'course-1'
+      },
+      global: {
+        mocks: {
+          $t: (msg: { en: string }) => msg.en
+        }
+      }
+    })
+
+    await vi.waitFor(() => {
+      expect(wrapper.find('[data-test-id="intro-continue"]').exists()).toBe(true)
+    })
+
+    expect(mocks.startCourse).not.toHaveBeenCalled()
+
+    await wrapper.get('[data-test-id="intro-continue"]').trigger('click')
+
+    await vi.waitFor(() => {
+      expect(mocks.startCourse).toHaveBeenCalledWith(mocks.course, mocks.courseSeries)
+    })
+  })
+})
diff --git a/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.vue b/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.vue
index 789e98206f..a62d565830 100644
--- a/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.vue
+++ b/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { ref, shallowRef } from 'vue'
 import { getCourse } from '@/apis/course'
 import { getCourseSeries } from '@/apis/course-series'
+import { tutorialIntroVideoUrl } from '@/apps/xbuilder/env'
+import CourseIntroVideo from '@/components/tutorials/CourseIntroVideo.vue'
 import { useTutorial } from '@/components/tutorials/tutorial'
 import { UIDetailedLoading, UIError } from '@/components/ui'
+import { ActionException, capture, useAction } from '@/utils/exception'
 import { composeQuery, useQuery } from '@/utils/query'
 
 const props = defineProps<{
@@ -27,22 +31,56 @@ const allQueryRet = useQuery(
       composeQuery(ctx, courseSeriesQuery, [{ en: 'Loading course series...', zh: '加载课程系列...' }, 1]),
       composeQuery(ctx, courseQuery, [{ en: 'Loading course...', zh: '加载课程...' }, 1])
     ])
-    await tutorial.startCourse(course, courseSeries)
+    return { courseSeries, course }
   },
   {
-    en: 'Failed to start course',
-    zh: '启动课程失败'
+    en: 'Failed to load course',
+    zh: '加载课程失败'
   }
 )
+
+const isStartingCourse = ref(false)
+const startCourseError = shallowRef<ActionException | null>(null)
+
+const startCourse = useAction(async () => {
+  const data = allQueryRet.data.value
+  if (data == null) throw new Error('course data is not loaded')
+  await tutorial.startCourse(data.course, data.courseSeries)
+}, {
+  en: 'Failed to start course',
+  zh: '启动课程失败'
+})
+
+async function handleIntroContinue() {
+  startCourseError.value = null
+  isStartingCourse.value = true
+  try {
+    await startCourse()
+  } catch (e) {
+    isStartingCourse.value = false
+    if (e instanceof ActionException) {
+      startCourseError.value = e
+    } else {
+      capture(e, 'start course')
+    }
+  }
+}
 </script>
 
 <template>
   <section class="h-full w-full flex items-center justify-center">
-    <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
+    <UIDetailedLoading
+      v-if="allQueryRet.isLoading.value || isStartingCourse"
+      :percentage="isStartingCourse ? 100 : allQueryRet.progress.value.percentage"
+    >
       <span>{{ $t(allQueryRet.progress.value.desc ?? { zh: '跳转中...', en: 'Redirecting...' }) }}</span>
     </UIDetailedLoading>
     <UIError v-else-if="allQueryRet.error.value != null" :retry="allQueryRet.refetch">
       {{ $t(allQueryRet.error.value.userMessage) }}
     </UIError>
+    <UIError v-else-if="startCourseError != null" :retry="handleIntroContinue">
+      {{ $t(startCourseError.userMessage) }}
+    </UIError>
+    <CourseIntroVideo v-else-if="allQueryRet.data.value != null" :src="tutorialIntroVideoUrl" @continue="handleIntroContinue" />
   </section>
 </template>
diff --git a/spx-gui/src/apps/xbuilder/setup.ts b/spx-gui/src/apps/xbuilder/setup.ts
index b3a77abe5d..6fa2911a29 100644
--- a/spx-gui/src/apps/xbuilder/setup.ts
+++ b/spx-gui/src/apps/xbuilder/setup.ts
@@ -19,7 +19,7 @@ export function setupXBuilder() {
     baseUrl: env.usercontentBaseUrl,
     bucket: env.usercontentBucket
   })
-  initUserState(env.accountOAuthClientId)
+  initUserState(env.accountOAuthClientId, { redirectUri: env.accountOAuthRedirectUri })
   setup()
 }
 
diff --git a/spx-gui/src/components/copilot/CopilotRoot.vue b/spx-gui/src/components/copilot/CopilotRoot.vue
index ca8ddbdee5..6b1125925b 100644
--- a/spx-gui/src/components/copilot/CopilotRoot.vue
+++ b/spx-gui/src/components/copilot/CopilotRoot.vue
@@ -17,6 +17,7 @@ import { useSignedInStateQuery, type SignedInState } from '@/stores/user'
 import { userSessionStorageRef } from '@/utils/user-storage'
 import { provideCopilot } from './context'
 import { createBuiltInSkillRegistry } from './skills/built-in'
+import { createLocalPreviewCopilotGenerator, shouldUseLocalPreviewCopilot } from './local-preview-generator'
 
 const listProjectsParamsSchema = z.object({
   owner: z
@@ -167,7 +168,10 @@ const modalEvents = useModalEvents()
 const messageEvents = useMessageEvents()
 const signedInStateQuery = useSignedInStateQuery()
 const skillRegistry = createBuiltInSkillRegistry()
-const copilot = new Copilot(skillRegistry)
+const copilot = new Copilot(
+  skillRegistry,
+  shouldUseLocalPreviewCopilot() ? createLocalPreviewCopilotGenerator() : undefined
+)
 const sessionStorageRef = userSessionStorageRef<SessionExported | null>('spx-gui-copilot-session', null)
 
 copilot.syncSessionWith({
diff --git a/spx-gui/src/components/copilot/CopilotUI.vue b/spx-gui/src/components/copilot/CopilotUI.vue
index 47af82e96f..64850af3ff 100644
--- a/spx-gui/src/components/copilot/CopilotUI.vue
+++ b/spx-gui/src/components/copilot/CopilotUI.vue
@@ -21,10 +21,14 @@ enum TriggerVisibility {
 
 const panelBoundaryBuffer = [20, 20]
 const triggerSnapThreshold = 20
+const tutorialPanelBottom = 96
+const tutorialPanelTopBuffer = 20
+const tutorialPanelDefaultHeight = 320
+const tutorialPanelMinHeight = 240
 </script>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch, type WatchSource } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, watchEffect, type WatchSource } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { isRectIntersecting, useBottomSticky, useContentSize } from '@/utils/dom'
@@ -41,13 +45,16 @@ import { type QuickInput, RoundState } from './copilot'
 import { useSpotlight } from '@/utils/spotlight'
 import type { LocaleMessage } from '@/utils/i18n'
 import { homePageName } from '@/apps/xbuilder/router'
+import { useMaybeTutorial } from '@/components/tutorials/tutorial'
 
 const copilot = useCopilot()
 const spotlight = useSpotlight()
 const router = useRouter()
+const tutorial = useMaybeTutorial()
 
 const outputRef = ref<HTMLElement | null>(null)
 const triggerRef = ref<HTMLElement | null>(null)
+const tutorialTriggerRef = ref<HTMLElement | null>(null)
 const inputRef = ref<InstanceType<typeof CopilotInput>>()
 const panelRef = ref<HTMLElement>()
 
@@ -66,6 +73,7 @@ const activeRound = computed(() => {
 })
 
 const StateIndicator = computed(() => copilot.stateIndicatorComponent)
+const isTutorialCourse = computed(() => tutorial?.currentCourse != null)
 
 useBottomSticky(outputRef)
 
@@ -76,6 +84,7 @@ const documentElementRef = ref(document.documentElement)
 const windowSize = useContentSize(documentElementRef)
 const triggerSize = useContentSize(triggerRef)
 const panelSize = useContentSize(panelRef as WatchSource<HTMLElement | null>)
+const tutorialPanelHeight = localStorageRef('spx-gui-tutorial-copilot-panel-height', tutorialPanelDefaultHeight)
 
 function getCurrentSizes() {
   return {
@@ -88,8 +97,20 @@ function getCurrentSizes() {
   }
 }
 
+function getMaxTutorialPanelHeight() {
+  const windowH = windowSize.value?.height ?? window.innerHeight
+  return Math.max(tutorialPanelMinHeight, windowH - tutorialPanelBottom - tutorialPanelTopBuffer)
+}
+
+function getClampedTutorialPanelHeight(height: number) {
+  return Math.min(getMaxTutorialPanelHeight(), Math.max(tutorialPanelMinHeight, height))
+}
+
 // resize the panel to fit the window size
-watch(windowSize, updatePanelClampedPosition)
+watch(windowSize, () => {
+  tutorialPanelHeight.value = getClampedTutorialPanelHeight(tutorialPanelHeight.value)
+  updatePanelClampedPosition()
+})
 watch(panelSize, () => {
   if (panelStatePosition.value.state === State.Move) return // close panel
   updatePanelClampedPosition()
@@ -105,6 +126,7 @@ watch(
       updatePanelClampedPosition()
       return
     }
+    if (isTutorialCourse.value) return
 
     if (newActive) {
       openPanel()
@@ -195,6 +217,36 @@ const triggerState = ref(panelStatePosition.value.state)
 const triggerVisibility = ref(TriggerVisibility.None)
 
 const triggerTooltipDisabled = computed(() => !triggerVisibility.value || panelStatePosition.value.state === State.Move)
+const panelStyle = computed(() => {
+  if (isTutorialCourse.value && copilot.active) {
+    return {
+      right: '28px',
+      bottom: `${tutorialPanelBottom}px`,
+      '--tutorial-copilot-panel-height': `${getClampedTutorialPanelHeight(tutorialPanelHeight.value)}px`
+    }
+  }
+  return { right: `${panelStatePosition.value.right}px`, bottom: `${panelStatePosition.value.bottom}px` }
+})
+
+function handleTutorialCopilotTriggerClick() {
+  if (copilot.active) {
+    copilot.close()
+    return
+  }
+  copilot.open()
+}
+
+watchEffect((onCleanup) => {
+  if (!isTutorialCourse.value || !copilot.active) return
+  const handlePointerDown = (event: PointerEvent) => {
+    const target = event.target
+    if (!(target instanceof Node)) return
+    if (panelRef.value?.contains(target) || tutorialTriggerRef.value?.contains(target)) return
+    copilot.close()
+  }
+  document.addEventListener('pointerdown', handlePointerDown)
+  onCleanup(() => document.removeEventListener('pointerdown', handlePointerDown))
+})
 
 function updateTriggerVisibility() {
   triggerVisibility.value = copilot.active ? TriggerVisibility.None : TriggerVisibility.Visible
@@ -328,9 +380,24 @@ useDraggable(triggerRef, {
   onDragEnd
 })
 useDraggable(draggerRef, {
-  onDragStart,
-  onDragMove,
-  onDragEnd
+  onDragStart: () => {
+    if (isTutorialCourse.value) {
+      tutorialPanelHeight.value = getClampedTutorialPanelHeight(tutorialPanelHeight.value)
+      return
+    }
+    onDragStart()
+  },
+  onDragMove: (offset: Offset) => {
+    if (isTutorialCourse.value) {
+      tutorialPanelHeight.value = getClampedTutorialPanelHeight(tutorialPanelHeight.value - offset.y)
+      return
+    }
+    onDragMove(offset)
+  },
+  onDragEnd: () => {
+    if (isTutorialCourse.value) return
+    onDragEnd()
+  }
 })
 
 const suggestedQuestions: LocaleMessage[] = [
@@ -448,15 +515,51 @@ onMounted(async () => {
 </script>
 
 <template>
+  <button
+    v-if="isTutorialCourse"
+    ref="tutorialTriggerRef"
+    class="tutorial-copilot-trigger"
+    :class="{ active: copilot.active }"
+    :aria-label="$t({ en: 'Open Copilot', zh: '打开 Copilot' })"
+    @click="handleTutorialCopilotTriggerClick"
+  >
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <rect width="40" height="40" rx="12" fill="url(#tutorial_copilot_icon_gradient)" />
+      <path
+        d="M27.1326 16.4061C27.6217 17.2175 28.4776 17.7029 29.4224 17.7029C30.6229 17.714 31.7456 16.8507 32.005 15.6613C32.1791 14.9277 32.0383 14.1644 31.6381 13.5346C27.6773 6.67626 17.5584 5.32387 11.9784 10.9817C10.9521 11.9784 10.1369 13.0862 9.51075 14.2867H9.50704L9.43294 14.4386C9.4033 14.4979 9.36995 14.5572 9.34402 14.6165C9.34402 14.6165 9.34772 14.6165 9.35143 14.6128V14.6202C9.35143 14.6202 9.34772 14.6202 9.34402 14.6202C9.33661 14.635 9.3292 14.6535 9.32179 14.6721L9.26991 14.7795C8.6215 16.143 8.21023 17.5436 8.08055 19.1479C7.99162 20.215 8.0472 21.2784 8.23246 22.301C8.43254 23.3607 8.75119 24.3648 9.17358 25.2985L9.20322 25.3615C9.20692 25.3726 9.21433 25.3838 9.21804 25.3949C9.22916 25.4208 9.24398 25.4468 9.25509 25.469L9.32179 25.6098H9.3292C11.8858 30.7526 17.8585 33.6612 23.4867 32.3088C26.6324 31.727 32.3829 27.9589 31.916 24.4019C31.4121 22.038 28.0923 21.6378 26.9511 23.7609C26.173 24.9984 25.1022 25.8914 23.8721 26.5398C22.8939 27.014 21.812 27.2771 20.693 27.2771C20.2743 27.2771 19.8482 27.2364 19.437 27.1623C19.3517 27.1474 19.2628 27.1326 19.1887 27.1326C19.1183 27.1326 19.0664 27.1474 19.0071 27.1808C18.4588 27.492 18.355 27.5476 17.8104 27.8292L17.2138 28.1552C16.5951 28.5221 15.7318 28.9815 15.3538 28.1404V28.1293C15.2983 27.8996 15.3575 27.681 15.3872 27.5735C15.4316 27.4142 15.4761 27.2512 15.5243 27.0696C15.628 26.6806 15.7355 26.273 15.8837 25.8766C15.9541 25.695 15.9689 25.6394 15.7355 25.4208C13.831 23.6275 13.0788 21.397 13.5012 18.8071C13.7569 17.2361 14.4868 15.88 15.6725 14.7721C17.1212 13.4234 18.7885 12.7417 20.6152 12.7417C21.0932 12.7417 21.5934 12.7898 22.0973 12.8862C22.1825 12.901 22.2751 12.9195 22.3603 12.938H22.3826C24.4056 13.3827 26.0025 14.5461 27.1252 16.4024L27.1326 16.4061Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="tutorial_copilot_icon_gradient"
+          x1="20"
+          y1="0"
+          x2="20"
+          y2="40"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop class="stop-start" />
+          <stop offset="1" class="stop-end" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </button>
   <div
+    v-show="!isTutorialCourse || copilot.active"
     ref="panelRef"
     class="copilot-panel"
-    :style="{ right: `${panelStatePosition.right}px`, bottom: `${panelStatePosition.bottom}px` }"
+    :class="{ 'tutorial-copilot-panel': isTutorialCourse }"
+    :style="panelStyle"
   >
     <div class="body" :class="[triggerState]">
       <UITooltip placement="right" :disabled="triggerTooltipDisabled">
         <template #trigger>
-          <div ref="triggerRef" :class="['copilot-trigger', triggerState, triggerVisibility]" @click="openPanel()">
+          <div
+            v-if="!isTutorialCourse"
+            ref="triggerRef"
+            :class="['copilot-trigger', triggerState, triggerVisibility]"
+            @click="openPanel()"
+          >
             <div class="copilot-trigger-content">
               <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect width="40" height="40" rx="12" fill="url(#paint0_linear_931_4390)" />
@@ -579,19 +682,126 @@ onMounted(async () => {
     opacity ease 0.4s;
 }
 
-.copilot-trigger .stop-start {
+.tutorial-copilot-trigger {
+  position: fixed;
+  right: 28px;
+  bottom: 28px;
+  z-index: 9999;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-primary-600);
+  box-shadow: var(--ui-box-shadow-lg);
+  cursor: pointer;
+  transition:
+    background-color 0.16s ease,
+    color 0.16s ease,
+    transform 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.tutorial-copilot-trigger svg {
+  width: 36px;
+  height: 36px;
+}
+
+.tutorial-copilot-trigger svg rect {
+  fill: transparent;
+}
+
+.tutorial-copilot-trigger svg path {
+  fill: currentColor;
+}
+
+.tutorial-copilot-trigger:hover {
+  background: var(--ui-color-primary-100);
+  color: var(--ui-color-primary-700);
+  transform: translateY(-2px);
+  box-shadow: var(--ui-box-shadow-lg);
+}
+
+.tutorial-copilot-trigger.active {
+  background: var(--ui-color-primary-100);
+  color: var(--ui-color-primary-700);
+}
+
+.tutorial-copilot-panel {
+  right: 28px;
+  left: auto;
+  bottom: 92px;
+  width: 360px;
+}
+
+.tutorial-copilot-panel .body {
+  box-shadow: var(--ui-box-shadow-lg);
+  background: var(--ui-color-grey-400);
+}
+
+.tutorial-copilot-panel .body-wrapper {
+  height: var(--tutorial-copilot-panel-height, 320px);
+  display: flex;
+  flex-direction: column;
+}
+
+.tutorial-copilot-panel .body::after {
+  content: '';
+  position: absolute;
+  right: 17px;
+  bottom: -7px;
+  width: 14px;
+  height: 14px;
+  background: var(--ui-color-grey-100);
+  border-right: 1px solid var(--ui-color-grey-400);
+  border-bottom: 1px solid var(--ui-color-grey-400);
+  transform: rotate(45deg);
+  z-index: 1;
+}
+
+.tutorial-copilot-panel .footer {
+  display: none;
+}
+
+.tutorial-copilot-panel .body-wrapper .dragger {
+  cursor: ns-resize;
+}
+
+.tutorial-copilot-panel .body-wrapper .output {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.tutorial-copilot-panel .body-wrapper .input {
+  flex: 0 0 62px;
+}
+
+.tutorial-copilot-panel .body-wrapper .divider {
+  background: var(--ui-color-grey-400);
+}
+
+.copilot-trigger .stop-start,
+.tutorial-copilot-trigger .stop-start {
   stop-color: #9a77ff;
 }
 
-.copilot-trigger .stop-end {
+.copilot-trigger .stop-end,
+.tutorial-copilot-trigger .stop-end {
   stop-color: #735ffa;
 }
 
-.copilot-trigger:hover .stop-start {
+.copilot-trigger:hover .stop-start,
+.tutorial-copilot-trigger:hover .stop-start {
   stop-color: #ae92ff;
 }
 
-.copilot-trigger:hover .stop-end {
+.copilot-trigger:hover .stop-end,
+.tutorial-copilot-trigger:hover .stop-end {
   stop-color: #9181fb;
 }
 
diff --git a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
index 8499721e43..4ae62528ff 100644
--- a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
+++ b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
@@ -5,21 +5,23 @@ import type { Round } from '@/components/copilot/copilot'
 
 import { isSignedIn, useSignIn } from '@/stores/user'
 import { UIButton } from '@/components/ui'
+import { shouldUseLocalPreviewCopilot } from '../../local-preview-generator'
 
 const props = defineProps<{
   round: Round
 }>()
 
 const signIn = useSignIn()
+const localPreview = shouldUseLocalPreviewCopilot()
 
 onMounted(() => {
-  if (!isSignedIn()) return
+  if (!localPreview && !isSignedIn()) return
   props.round.retry()
 })
 </script>
 
 <template>
-  <div class="text-sm/[1.7]">
+  <div v-if="!localPreview" class="text-sm/[1.7]">
     <div>{{ $t({ en: 'Please sign in to continue.', zh: '请先登录并继续' }) }}</div>
     <UIButton type="primary" class="mt-4" @click="signIn()">
       {{ $t({ en: 'Sign in', zh: '登录' }) }}
diff --git a/spx-gui/src/components/copilot/local-preview-generator.test.ts b/spx-gui/src/components/copilot/local-preview-generator.test.ts
new file mode 100644
index 0000000000..00caa0b796
--- /dev/null
+++ b/spx-gui/src/components/copilot/local-preview-generator.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import type { MessageEvent } from '@/apis/copilot'
+import { createLocalPreviewCopilotGenerator } from './local-preview-generator'
+
+async function collectEvents(events: AsyncIterableIterator<MessageEvent>) {
+  const result: MessageEvent[] = []
+  for await (const event of events) result.push(event)
+  return result
+}
+
+describe('local preview copilot generator', () => {
+  it('streams a local walkthrough response without calling the remote API', async () => {
+    const generator = createLocalPreviewCopilotGenerator()
+
+    const events = await collectEvents(
+      generator.generateCopilotMessage([
+        {
+          role: 'user',
+          content: {
+            type: 'text',
+            text: 'Fix the current problem'
+          }
+        }
+      ])
+    )
+
+    expect(events).toEqual([
+      {
+        type: 'text_delta',
+        data: {
+          text: expect.stringContaining('本地预览模式')
+        }
+      },
+      {
+        type: 'done',
+        data: {
+          finishReason: 'stop'
+        }
+      }
+    ])
+  })
+
+  it('streams tutorial guidance when the current session is a course', async () => {
+    const generator = createLocalPreviewCopilotGenerator()
+
+    const events = await collectEvents(
+      generator.generateCopilotMessage([
+        {
+          role: 'user',
+          content: {
+            type: 'text',
+            text: '<course><course-title>Coding-Course-3</course-title></course>'
+          }
+        }
+      ])
+    )
+
+    expect(events[0]).toEqual({
+      type: 'text_delta',
+      data: {
+        text: expect.stringContaining('教程 Copilot')
+      }
+    })
+  })
+})
diff --git a/spx-gui/src/components/copilot/local-preview-generator.ts b/spx-gui/src/components/copilot/local-preview-generator.ts
new file mode 100644
index 0000000000..76acc9333b
--- /dev/null
+++ b/spx-gui/src/components/copilot/local-preview-generator.ts
@@ -0,0 +1,43 @@
+import type { MessageEvent } from '@/apis/copilot'
+import type { Message } from '@/apis/copilot'
+import type { IMessageEventGenerator } from './copilot'
+
+const tutorialGuideResponse = `我会作为教程 Copilot 帮你完成当前课程。
+
+先看左侧 API 列表，本课程会用到的积木已经筛选出来了。请把需要的 API 拖到代码编辑区，优先完成当前步骤；如果运行结果不符合预期，再告诉我你看到的现象，我会继续给下一步提示。`
+
+const localPreviewResponse = `我正在本地预览模式下运行，可以在不登录的情况下检查教程引导、消息流程和交互状态。
+
+${tutorialGuideResponse}`
+
+function isTutorialMessage(messages: Message[]) {
+  return messages.some((message) => {
+    if (message.content?.type !== 'text') return false
+    const text = message.content.text
+    return text.includes('<course>') || text.includes('Course Started') || text.includes('课程开始')
+  })
+}
+
+export function createLocalPreviewCopilotGenerator(): IMessageEventGenerator {
+  return {
+    async *generateCopilotMessage(messages): AsyncIterableIterator<MessageEvent> {
+      const response = isTutorialMessage(messages) ? tutorialGuideResponse : localPreviewResponse
+      yield {
+        type: 'text_delta',
+        data: {
+          text: response
+        }
+      }
+      yield {
+        type: 'done',
+        data: {
+          finishReason: 'stop'
+        }
+      }
+    }
+  }
+}
+
+export function shouldUseLocalPreviewCopilot() {
+  return import.meta.env.DEV && import.meta.env.VITE_COPILOT_LOCAL_PREVIEW === 'true'
+}
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index c0333d0e52..96d02c5506 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -1,33 +1,52 @@
 <template>
-  <!-- Using v-show preserves some page states, e.g. code editor scroll pos -->
-  <!-- Using overflow-visible class to avoid cutting dropdown menu of CodeTextEditor (monaco) -->
-  <UICard
-    v-show="isPreviewMode"
-    v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
-    class="relative flex-[1_1_0] min-w-0 flex flex-col overflow-visible!"
-  >
-    <!--
-      TODO: optimize performance for switching between editors, which corresponds to selection change.
-      There's known issue with Vue `KeepAlive`:
-      * It increases difficulty of implementing the inner components.
-        For example: we need to listen to extra events (activated/deactivated) to do initialization and cleanup.
-      * We use custom directive to capture UI information, which does not work well with KeepAlive.
-        For details, see: https://github.com/vuejs/core/issues/2349
-    -->
-    <SpriteEditor
-      v-if="selected.type === 'sprite' && selected.sprite != null"
-      :sprite="selected.sprite"
-      :state="editorCtx.state.spriteState!"
-    />
-    <StageEditor v-else-if="selected.type === 'stage'" :stage="project.stage" :state="editorCtx.state.stageState" />
-    <EditorPlaceholder v-else />
-  </UICard>
-  <div v-show="isPreviewMode" class="min-w-0 flex-[0_0_496px] flex flex-col gap-xl">
-    <EditorPreview />
-    <EditorPanels />
-  </div>
+  <template v-if="isTutorialCourse">
+    <section
+      v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
+      class="tutorial-editor-pane"
+    >
+      <SpriteEditor
+        v-if="selected.type === 'sprite' && selected.sprite != null"
+        :sprite="selected.sprite"
+        :state="editorCtx.state.spriteState!"
+      />
+      <StageEditor v-else-if="selected.type === 'stage'" :stage="project.stage" :state="editorCtx.state.stageState" />
+      <EditorPlaceholder v-else />
+    </section>
+    <section class="tutorial-preview-pane">
+      <EditorPreview tutorial-mode />
+    </section>
+  </template>
+  <template v-else>
+    <!-- Using v-show preserves some page states, e.g. code editor scroll pos -->
+    <!-- Using overflow-visible class to avoid cutting dropdown menu of CodeTextEditor (monaco) -->
+    <UICard
+      v-show="isPreviewMode"
+      v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
+      class="relative flex-[1_1_0] min-w-0 flex flex-col overflow-visible!"
+    >
+      <!--
+        TODO: optimize performance for switching between editors, which corresponds to selection change.
+        There's known issue with Vue `KeepAlive`:
+        * It increases difficulty of implementing the inner components.
+          For example: we need to listen to extra events (activated/deactivated) to do initialization and cleanup.
+        * We use custom directive to capture UI information, which does not work well with KeepAlive.
+          For details, see: https://github.com/vuejs/core/issues/2349
+      -->
+      <SpriteEditor
+        v-if="selected.type === 'sprite' && selected.sprite != null"
+        :sprite="selected.sprite"
+        :state="editorCtx.state.spriteState!"
+      />
+      <StageEditor v-else-if="selected.type === 'stage'" :stage="project.stage" :state="editorCtx.state.stageState" />
+      <EditorPlaceholder v-else />
+    </UICard>
+    <div v-show="isPreviewMode" class="min-w-0 flex-[0_0_496px] flex flex-col gap-xl">
+      <EditorPreview />
+      <EditorPanels />
+    </div>
+  </template>
   <MapEditor
-    v-if="!isPreviewMode"
+    v-if="!isPreviewMode && !isTutorialCourse"
     :project="editorCtx.project"
     :selected-sprite-id="editorCtx.state.selectedSprite?.id ?? null"
     @update:selected-sprite-id="handleSpriteSelect"
@@ -46,11 +65,14 @@ import { useEditorCtx } from './EditorContextProvider.vue'
 import { EditMode } from './editor-state'
 import MapEditor from './map-editor/MapEditor.vue'
 import { useSpxEditorCopilot } from './copilot'
+import { useMaybeTutorial } from '@/components/tutorials/tutorial'
 
 const editorCtx = useEditorCtx()
+const tutorial = useMaybeTutorial()
 const project = computed(() => editorCtx.project)
 const selected = computed(() => editorCtx.state.selected)
 const isPreviewMode = computed(() => editorCtx.state.selectedEditMode === EditMode.Default)
+const isTutorialCourse = computed(() => tutorial?.currentCourse != null)
 
 useSpxEditorCopilot()
 
@@ -59,3 +81,36 @@ function handleSpriteSelect(spriteId: string | null) {
   editorCtx.state.selectSprite(spriteId)
 }
 </script>
+
+<style scoped>
+.tutorial-editor-pane,
+.tutorial-preview-pane {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--ui-color-grey-100);
+}
+
+.tutorial-editor-pane {
+  flex: 1 1 calc(998 / 1920 * 100%);
+  border-right: 1px solid var(--ui-color-grey-400);
+}
+
+.tutorial-preview-pane {
+  position: relative;
+  flex: 1 1 calc(922 / 1920 * 100%);
+  min-width: 660px;
+  background:
+    radial-gradient(circle at 18% 22%, rgba(93, 167, 74, 0.22) 0 1px, transparent 2px),
+    radial-gradient(circle at 72% 38%, rgba(69, 142, 62, 0.2) 0 1px, transparent 2px),
+    radial-gradient(circle at 44% 78%, rgba(108, 185, 80, 0.18) 0 1px, transparent 2px),
+    #78c966;
+  background-size:
+    120px 96px,
+    150px 118px,
+    180px 140px,
+    auto;
+}
+</style>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index d73ef98e49..d202906ab8 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -69,7 +69,8 @@
         </UIMenu>
       </NavbarDropdown>
 
-      <NavbarTutorials v-if="showTutorialsEntry" />
+      <TutorialNavbarExit v-if="isTutorialCourse" />
+      <NavbarTutorials v-else-if="showTutorialsEntry" />
 
       <div class="flex">
         <UITooltip :disabled="undoAction == null">
@@ -99,6 +100,7 @@
     </template>
     <template #right>
       <UIButtonGroup
+        v-if="!isTutorialCourse"
         v-radar="{ name: 'Editor mode menu', desc: 'Hover to see editor mode options (default, map)' }"
         class="mx-3 items-center"
         type="icon"
@@ -174,6 +176,7 @@ import NavbarDropdown from '@/components/navbar/NavbarDropdown.vue'
 import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
 import NavbarOpenProjectItem from '@/components/navbar/NavbarOpenProjectItem.vue'
 import NavbarTutorials from '@/components/navbar/NavbarTutorials.vue'
+import TutorialNavbarExit from '@/components/tutorials/TutorialNavbarExit.vue'
 import EditorAutoSaveStateIcon from './EditorAutoSaveStateIcon.vue'
 import EditorProjectDisplayName from './EditorProjectDisplayName.vue'
 import EditorCheckoutReleaseButton from './EditorCheckoutReleaseButton.vue'
@@ -190,8 +193,10 @@ import unpublishSvg from './icons/unpublish.svg'
 import projectPageSvg from './icons/project-page.svg'
 import defaultModeSvg from './icons/default-mode.svg?raw'
 import mapEditModeSvg from './icons/map-edit-mode.svg?raw'
+import { useMaybeTutorial } from '@/components/tutorials/tutorial'
 
 const { showTutorialsEntry } = useCommunityConfig()
+const tutorial = useMaybeTutorial()
 
 const props = defineProps<{
   project: SpxProject | null
@@ -210,6 +215,7 @@ const canManageProject = computed(() => {
 })
 
 const selectedEditMode = computed(() => props.state?.selectedEditMode ?? EditMode.Default)
+const isTutorialCourse = computed(() => tutorial?.currentCourse != null)
 
 const importProjectFileMessage = { en: 'Import project file', zh: '导入项目文件' }
 
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 8bda9dc3de..97ba371024 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -1,9 +1,11 @@
 <template>
-  <UICard
+  <component
+    :is="tutorialMode ? 'section' : UICard"
     v-radar="{ name: 'Editor preview', desc: 'Preview panel for stage preview and project running' }"
     class="editor-preview relative flex flex-col overflow-hidden"
+    :class="{ 'tutorial-preview': tutorialMode }"
   >
-    <UICardHeader class="gap-3">
+    <UICardHeader v-if="!tutorialMode" class="editor-preview-header gap-3">
       <div class="flex-1 text-title">
         {{ $t(headerTitle) }}
       </div>
@@ -19,7 +21,7 @@
         </UIButton>
 
         <UIButton
-          v-show="canManageProject"
+          v-show="canManageProject && !tutorialMode"
           v-radar="{ name: 'Publish button', desc: 'Click to publish the project' }"
           type="secondary"
           icon="publish"
@@ -49,7 +51,7 @@
         >
           {{ $t({ en: 'Stop', zh: '停止' }) }}
         </UIButton>
-        <UITooltip placement="top-end">
+        <UITooltip v-if="!tutorialMode" placement="top-end">
           <template #trigger>
             <UIButton
               v-radar="{ name: 'Enter full screen button', desc: 'Click to enter full screen for the running project' }"
@@ -65,7 +67,10 @@
       </template>
     </UICardHeader>
 
-    <div class="flex grow justify-center overflow-hidden p-3">
+    <div
+      class="editor-preview-body flex grow justify-center overflow-hidden p-3"
+      :class="{ 'tutorial-preview-body': tutorialMode }"
+    >
       <div
         ref="stageContainerRef"
         class="stage-viewer-container relative w-full overflow-hidden rounded-sm bg-grey-200"
@@ -95,7 +100,47 @@
         </div>
       </div>
     </div>
-  </UICard>
+
+    <div v-if="tutorialMode" class="tutorial-run-controls">
+      <UIButton
+        v-if="runnerState === 'initial'"
+        v-radar="{ name: 'Run button', desc: 'Click to run the project in debug mode' }"
+        class="tutorial-run-control"
+        type="primary"
+        shape="circle"
+        size="large"
+        icon="playHollow"
+        :aria-label="$t({ en: 'Run', zh: '运行' })"
+        :loading="handleRun.isLoading.value"
+        @click="handleRun.fn"
+      />
+      <template v-else>
+        <UIButton
+          v-radar="{ name: 'Rerun button', desc: 'Click to rerun the project' }"
+          class="tutorial-run-control"
+          type="primary"
+          shape="circle"
+          size="large"
+          icon="rotate"
+          :aria-label="$t({ en: 'Rerun', zh: '重新运行' })"
+          :disabled="runnerState !== 'running' || handleStop.isLoading.value"
+          :loading="handleRerun.isLoading.value && !handleStop.isLoading.value"
+          @click="handleRerun.fn"
+        />
+        <UIButton
+          v-radar="{ name: 'Stop button', desc: 'Click to stop the running project' }"
+          class="tutorial-run-control"
+          type="neutral"
+          shape="circle"
+          size="large"
+          icon="end"
+          :aria-label="$t({ en: 'Stop', zh: '停止' })"
+          :loading="handleStop.isLoading.value"
+          @click="handleStop.fn"
+        />
+      </template>
+    </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -181,6 +226,15 @@ import StageViewer from './stage-viewer/StageViewer.vue'
 import { useNetwork } from '@/utils/network'
 import { usePublishProject } from '@/components/project'
 
+const props = withDefaults(
+  defineProps<{
+    tutorialMode?: boolean
+  }>(),
+  {
+    tutorialMode: false
+  }
+)
+
 const editorCtx = useEditorCtx()
 const codeEditor = useCodeEditor()
 const { isOnline } = useNetwork()
@@ -282,6 +336,11 @@ function handleExit(code: number) {
   }
   exitGuard.value = 'idle'
   lastPanicOutput.value = null
+  if (props.tutorialMode) {
+    runnerState.value = 'initial'
+    editorCtx.state.runtime.setRunning({ mode: 'none' })
+    return
+  }
   const shouldRestore = restoreDebugRuntime()
   runnerState.value = shouldRestore ? 'running' : 'loading'
 }
@@ -439,6 +498,77 @@ function getStageInlineAnchor() {
 </script>
 
 <style scoped>
+.editor-preview-header {
+  display: flex;
+  align-items: center;
+}
+
+.tutorial-preview {
+  height: 100%;
+  background: transparent;
+}
+
+.tutorial-preview .editor-preview-header {
+  height: 48px;
+  flex: none;
+  border-bottom: 1px solid var(--ui-color-grey-400);
+  background: #fff;
+  padding: 0 12px;
+}
+
+.tutorial-run-controls {
+  position: fixed;
+  right: 86px;
+  bottom: 28px;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.tutorial-run-control {
+  width: 48px;
+  height: 48px;
+  border-color: var(--ui-color-grey-100) !important;
+  background: var(--ui-color-grey-100) !important;
+  color: var(--ui-color-primary-600) !important;
+  box-shadow: var(--ui-box-shadow-lg);
+}
+
+.tutorial-run-control:hover {
+  background: var(--ui-color-primary-100) !important;
+}
+
+.tutorial-preview-body {
+  min-height: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.tutorial-preview .stage-viewer-container {
+  height: 100%;
+  border-radius: 0;
+}
+
+.tutorial-preview :deep(.stage-viewer) {
+  height: 100%;
+  aspect-ratio: auto;
+}
+
+.tutorial-preview .stage-viewer-container,
+.tutorial-preview .runner-host {
+  background:
+    radial-gradient(circle at 18% 22%, rgba(93, 167, 74, 0.22) 0 1px, transparent 2px),
+    radial-gradient(circle at 72% 38%, rgba(69, 142, 62, 0.2) 0 1px, transparent 2px),
+    radial-gradient(circle at 44% 78%, rgba(108, 185, 80, 0.18) 0 1px, transparent 2px),
+    #78c966;
+  background-size:
+    120px 96px,
+    150px 118px,
+    180px 140px,
+    auto;
+}
+
 .stage-viewer-container-running .stage-viewer {
   filter: blur(4px);
   pointer-events: none;
@@ -463,4 +593,28 @@ function getStageInlineAnchor() {
   aspect-ratio: 4 / 3;
   height: auto;
 }
+
+.tutorial-preview .runner-host :deep(.runner-area) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tutorial-preview .runner-host :deep(.runner-area .runner) {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: 0;
+  background: transparent;
+}
+
+.tutorial-preview .runner-host :deep(iframe) {
+  display: block;
+  border: 0;
+  background: transparent;
+  transform: scale(1.004);
+  transform-origin: center;
+}
 </style>
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index 229fb19e65..58b0512eb3 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -18,6 +18,17 @@ const { isOnline } = useNetwork()
 const router = useRouter()
 const i18n = useI18n()
 const signIn = useSignIn()
+const handleSignIn = useMessageHandle(signIn, {
+  en: 'Failed to sign in',
+  zh: '登录失败'
+}).fn
+let signInPromise: Promise<void> | null = null
+function handleSignInOnce() {
+  if (signInPromise != null) return
+  signInPromise = handleSignIn().finally(() => {
+    signInPromise = null
+  })
+}
 
 const signedInStateQuery = useSignedInStateQuery()
 const loading = computed(() => signedInStateQuery.isLoading.value)
@@ -68,7 +79,8 @@ async function handleSignOut() {
       v-radar="{ name: 'Sign-in button', desc: 'Click to sign in' }"
       type="secondary"
       :disabled="!isOnline"
-      @click="signIn()"
+      @pointerup="handleSignInOnce"
+      @click="handleSignInOnce"
       >{{ $t({ en: 'Sign in', zh: '登录' }) }}</UIButton
     >
   </div>
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index cadebc72a6..1a459359cc 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -385,7 +385,7 @@ defineExpose({
 
 <template>
   <div class="relative h-full w-full flex items-center justify-center">
-    <iframe ref="runnerIframeRef" class="h-full w-full" frameborder="0" :src="runnerUrl" />
+    <iframe ref="runnerIframeRef" class="h-full w-full border-0" frameborder="0" :src="runnerUrl" />
     <UIImg
       v-show="state.type !== 'running'"
       class="absolute inset-0"
diff --git a/spx-gui/src/components/tutorials/CourseIntroVideo.test.ts b/spx-gui/src/components/tutorials/CourseIntroVideo.test.ts
new file mode 100644
index 0000000000..ad0cc2cf8a
--- /dev/null
+++ b/spx-gui/src/components/tutorials/CourseIntroVideo.test.ts
@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import CourseIntroVideo from './CourseIntroVideo.vue'
+
+function mountVideo() {
+  return mount(CourseIntroVideo, {
+    props: {
+      src: '/tutorial-intro/code-drag-hint.mov'
+    },
+    global: {
+      mocks: {
+        $t: (msg: { en: string }) => msg.en
+      }
+    }
+  })
+}
+
+describe('CourseIntroVideo', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders the configured video source', () => {
+    const wrapper = mountVideo()
+
+    expect(wrapper.get('video').attributes('src')).toBe('/tutorial-intro/code-drag-hint.mov')
+  })
+
+  it('plays the video from the overlay action', async () => {
+    const play = vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue()
+    const wrapper = mountVideo()
+
+    await wrapper.get('.course-intro-play').trigger('click')
+
+    expect(play).toHaveBeenCalledTimes(1)
+  })
+
+  it('continues to the course when the video ends', async () => {
+    const wrapper = mountVideo()
+
+    await wrapper.get('video').trigger('ended')
+
+    expect(wrapper.emitted('continue')).toHaveLength(1)
+  })
+
+  it('lets learners skip the intro', async () => {
+    const wrapper = mountVideo()
+
+    await wrapper.get('.course-intro-skip').trigger('click')
+
+    expect(wrapper.emitted('continue')).toHaveLength(1)
+  })
+})
diff --git a/spx-gui/src/components/tutorials/CourseIntroVideo.vue b/spx-gui/src/components/tutorials/CourseIntroVideo.vue
new file mode 100644
index 0000000000..0b729e7d5f
--- /dev/null
+++ b/spx-gui/src/components/tutorials/CourseIntroVideo.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+
+const props = defineProps<{
+  src: string
+}>()
+
+const emit = defineEmits<{
+  continue: []
+}>()
+
+const videoRef = useTemplateRef<HTMLVideoElement>('video')
+const hasStarted = ref(false)
+const hasPlaybackError = ref(false)
+
+async function playVideo() {
+  const video = videoRef.value
+  if (video == null) return
+  try {
+    await video.play()
+  } catch {
+    hasPlaybackError.value = true
+  }
+}
+
+function handlePlay() {
+  hasStarted.value = true
+  hasPlaybackError.value = false
+}
+
+function continueToCourse() {
+  emit('continue')
+}
+</script>
+
+<template>
+  <section class="course-intro-overlay" role="dialog" aria-modal="true">
+    <div class="course-intro-dialog">
+      <button
+        class="course-intro-close"
+        type="button"
+        :aria-label="$t({ en: 'Skip intro video', zh: '跳过课程介绍视频' })"
+        @click="continueToCourse"
+      >
+        ×
+      </button>
+
+      <div class="course-intro-video-frame">
+        <video
+          ref="video"
+          class="course-intro-video"
+          :src="props.src"
+          controls
+          playsinline
+          preload="metadata"
+          @play="handlePlay"
+          @ended="continueToCourse"
+          @error="hasPlaybackError = true"
+        ></video>
+
+        <button v-if="!hasStarted && !hasPlaybackError" class="course-intro-play" type="button" @click="playVideo">
+          <span class="course-intro-play-icon">▶</span>
+          <span>{{ $t({ en: 'Play video', zh: '播放视频' }) }}</span>
+        </button>
+
+        <div v-if="hasPlaybackError" class="course-intro-error">
+          <p>{{ $t({ en: 'The video cannot be played right now.', zh: '视频暂时无法播放。' }) }}</p>
+          <button class="course-intro-secondary" type="button" @click="continueToCourse">
+            {{ $t({ en: 'Start course', zh: '开始课程' }) }}
+          </button>
+        </div>
+      </div>
+
+      <button class="course-intro-skip" type="button" @click="continueToCourse">
+        {{ $t({ en: 'Skip and start', zh: '跳过并开始' }) }}
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.course-intro-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 12000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background: rgb(15 23 42 / 58%);
+}
+
+.course-intro-dialog {
+  position: relative;
+  width: min(900px, 82vw);
+  padding: 16px;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: 10px;
+  background: var(--ui-color-grey-100);
+  box-shadow: 0 20px 56px rgb(15 23 42 / 28%);
+}
+
+.course-intro-close {
+  position: absolute;
+  top: -18px;
+  right: -18px;
+  z-index: 2;
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: 999px;
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-800);
+  font-size: 28px;
+  line-height: 1;
+  box-shadow: 0 6px 16px rgb(15 23 42 / 18%);
+}
+
+.course-intro-video-frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--ui-color-grey-1000);
+}
+
+.course-intro-video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: contain;
+  background: var(--ui-color-grey-1000);
+}
+
+.course-intro-play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: rgb(15 23 42 / 32%);
+  color: var(--ui-color-grey-100);
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.course-intro-play-icon {
+  display: flex;
+  width: 72px;
+  height: 72px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 92%);
+  color: var(--ui-color-primary-500);
+  font-size: 32px;
+  line-height: 1;
+}
+
+.course-intro-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-900);
+  font-size: 16px;
+}
+
+.course-intro-secondary,
+.course-intro-skip {
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: 6px;
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-900);
+  font-size: 14px;
+}
+
+.course-intro-secondary {
+  height: 36px;
+  padding: 0 16px;
+}
+
+.course-intro-skip {
+  margin-top: 12px;
+  height: 34px;
+  padding: 0 14px;
+}
+</style>
diff --git a/spx-gui/src/components/tutorials/TutorialCourseExitLink.ts b/spx-gui/src/components/tutorials/TutorialCourseExitLink.ts
index 864fb9eb05..66ec26a27c 100644
--- a/spx-gui/src/components/tutorials/TutorialCourseExitLink.ts
+++ b/spx-gui/src/components/tutorials/TutorialCourseExitLink.ts
@@ -1,9 +1,11 @@
 import { z } from 'zod'
 import { defineComponent, h } from 'vue'
+import { useRouter } from 'vue-router'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { useChildrenWithDefault } from '@/utils/vnode'
 import { useTutorial } from './tutorial'
+import { exitCurrentTutorial } from './tutorial-exit'
 
 export const tagName = 'tutorial-course-exit-link'
 
@@ -23,12 +25,13 @@ export default defineComponent<Props>(
   () => {
     const i18n = useI18n()
     const tutorial = useTutorial()
+    const router = useRouter()
     const handleClick = useMessageHandle(
       () => {
         if (!tutorial.currentCourse || !tutorial.currentSeries) {
           throw new Error('No course or series in progress')
         }
-        tutorial.endCurrentCourse()
+        return exitCurrentTutorial(tutorial, router)
       },
       {
         en: 'Failed to exit course',
diff --git a/spx-gui/src/components/tutorials/TutorialNavbarExit.vue b/spx-gui/src/components/tutorials/TutorialNavbarExit.vue
new file mode 100644
index 0000000000..52fddcad5e
--- /dev/null
+++ b/spx-gui/src/components/tutorials/TutorialNavbarExit.vue
@@ -0,0 +1,64 @@
+<template>
+  <UIDropdown trigger="click" placement="bottom-start">
+    <template #trigger>
+      <button
+        v-radar="{ name: 'Tutorial menu button', desc: 'Click to open tutorial options' }"
+        class="tutorial-navbar-exit"
+      >
+        <UIIcon class="h-5 w-5" type="tutorial" />
+        <UIIcon class="tutorial-navbar-exit-arrow" type="arrowMini" />
+      </button>
+    </template>
+    <UIMenu class="min-w-30">
+      <UIMenuItem v-radar="{ name: 'Exit Tutorial', desc: 'Click to exit the tutorial' }" @click="handleExitTutorial">
+        {{ $t({ en: 'Exit Tutorial', zh: '退出教程' }) }}
+      </UIMenuItem>
+    </UIMenu>
+  </UIDropdown>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { UIDropdown, UIIcon, UIMenu, UIMenuItem } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
+import { useTutorial } from './tutorial'
+import { exitCurrentTutorial } from './tutorial-exit'
+
+const tutorial = useTutorial()
+const router = useRouter()
+
+const handleExitTutorial = useMessageHandle(
+  () => exitCurrentTutorial(tutorial, router),
+  { en: 'Failed to exit tutorial', zh: '退出教程失败' }
+).fn
+</script>
+
+<style scoped>
+.tutorial-navbar-exit {
+  height: 44px;
+  min-width: 102px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 0;
+  border-radius: 0;
+  background: #e7f8f7;
+  color: #36bcc4;
+  cursor: pointer;
+  line-height: 0;
+  transition:
+    background-color 0.16s ease,
+    color 0.16s ease;
+}
+
+.tutorial-navbar-exit:hover {
+  background: #d8f4f3;
+  color: #1aa9b3;
+}
+
+.tutorial-navbar-exit-arrow {
+  width: 8px;
+  height: 8px;
+}
+</style>
diff --git a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
index 256a7c43fc..e008d9fcc4 100644
--- a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
+++ b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
@@ -4,12 +4,15 @@ export const name = 'tutorial-state-indicator'
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { useTutorial } from '@/components/tutorials/tutorial'
+import { exitCurrentTutorial } from '@/components/tutorials/tutorial-exit'
 import { UIDropdownWithTooltip, UIIcon, UIMenu, UIMenuItem } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 
 const tutorial = useTutorial()
+const router = useRouter()
 
 const course = computed(() => {
   return tutorial.currentCourse
@@ -17,7 +20,7 @@ const course = computed(() => {
 
 const { fn: handleExitTutorial } = useMessageHandle(
   () => {
-    tutorial.endCurrentCourse()
+    return exitCurrentTutorial(tutorial, router)
   },
   { zh: '退出课程时遇到问题', en: 'Encountered an issue when exiting the course' }
 )
diff --git a/spx-gui/src/components/tutorials/tutorial-exit.test.ts b/spx-gui/src/components/tutorials/tutorial-exit.test.ts
new file mode 100644
index 0000000000..12842445eb
--- /dev/null
+++ b/spx-gui/src/components/tutorials/tutorial-exit.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { NavigationFailure, Router } from 'vue-router'
+import { exitCurrentTutorial } from './tutorial-exit'
+import type { Tutorial } from './tutorial'
+
+function makeTutorial() {
+  return {
+    endCurrentCourse: vi.fn()
+  } as unknown as Tutorial
+}
+
+function makeRouter(push: Router['push']) {
+  return {
+    push
+  } as unknown as Router
+}
+
+describe('exitCurrentTutorial', () => {
+  it('navigates to tutorials before ending current course', async () => {
+    const tutorial = makeTutorial()
+    const router = makeRouter(vi.fn(async () => undefined))
+
+    const exited = await exitCurrentTutorial(tutorial, router)
+
+    expect(exited).toBe(true)
+    expect(router.push).toHaveBeenCalledWith('/tutorials')
+    expect(tutorial.endCurrentCourse).toHaveBeenCalledOnce()
+  })
+
+  it('keeps current course when navigation is cancelled', async () => {
+    const tutorial = makeTutorial()
+    const navigationFailure = { type: 4 } as NavigationFailure
+    const router = makeRouter(vi.fn(async () => navigationFailure))
+
+    const exited = await exitCurrentTutorial(tutorial, router)
+
+    expect(exited).toBe(false)
+    expect(tutorial.endCurrentCourse).not.toHaveBeenCalled()
+  })
+})
diff --git a/spx-gui/src/components/tutorials/tutorial-exit.ts b/spx-gui/src/components/tutorials/tutorial-exit.ts
new file mode 100644
index 0000000000..afb8ac5cce
--- /dev/null
+++ b/spx-gui/src/components/tutorials/tutorial-exit.ts
@@ -0,0 +1,9 @@
+import type { Router } from 'vue-router'
+import type { Tutorial } from './tutorial'
+
+export async function exitCurrentTutorial(tutorial: Tutorial, router: Router) {
+  const navigationFailure = await router.push('/tutorials')
+  if (navigationFailure) return false
+  tutorial.endCurrentCourse()
+  return true
+}
diff --git a/spx-gui/src/components/tutorials/tutorial.ts b/spx-gui/src/components/tutorials/tutorial.ts
index 6b7cc129f9..0008a7625c 100644
--- a/spx-gui/src/components/tutorials/tutorial.ts
+++ b/spx-gui/src/components/tutorials/tutorial.ts
@@ -23,6 +23,10 @@ export function useTutorial() {
   return tutorial
 }
 
+export function useMaybeTutorial() {
+  return inject(tutorialKey, null)
+}
+
 export function provideTutorial(tutorial: Tutorial) {
   provide(tutorialKey, tutorial)
 }
diff --git a/spx-gui/src/components/xgo-code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/xgo-code-editor/ui/CodeEditorUI.vue
index e0426072fd..464836b04e 100644
--- a/spx-gui/src/components/xgo-code-editor/ui/CodeEditorUI.vue
+++ b/spx-gui/src/components/xgo-code-editor/ui/CodeEditorUI.vue
@@ -37,6 +37,7 @@ import DropIndicatorUI from './drop-indicator/DropIndicatorUI.vue'
 import DocumentTabs from './document-tab/DocumentTabs.vue'
 import ZoomControl from './ZoomControl.vue'
 import { userLocalStorageRef } from '@/utils/user-storage'
+import { useMaybeTutorial } from '@/components/tutorials/tutorial'
 
 const props = defineProps<{
   codeFilePath: string
@@ -44,6 +45,7 @@ const props = defineProps<{
 
 const i18n = useI18n()
 const codeEditor = useCodeEditor()
+const tutorial = useMaybeTutorial()
 const invokeRenameModal = useModal(RenameModal)
 
 async function rename(textDocumentId: TextDocumentIdentifier, position: Position, range: Range): Promise<void> {
@@ -70,14 +72,54 @@ const uiRef = computed(() => {
 })
 
 const initialFontSize = 12
+const tutorialFontSize = 20
 const fontSize = userLocalStorageRef('spx-gui-code-font-size', initialFontSize)
 
+const currentCourse = computed(() => tutorial?.currentCourse)
+const isTutorialCourse = computed(() => currentCourse.value != null)
+const tutorialAPIReferenceFilterText = computed(() => {
+  const course = currentCourse.value
+  if (course == null) return null
+  return [course.id, course.title, course.entrypoint, course.prompt].join('\n')
+})
+const tutorialAPIReferenceNames = computed(() => {
+  const course = currentCourse.value
+  if (course == null) return null
+
+  const names = new Set<string>()
+  const rawCourse = course as Record<string, unknown>
+  for (const key of ['apis', 'apiReferences', 'apiReferenceIds', 'allowedApis', 'allowedAPIReferenceIds']) {
+    const value = rawCourse[key]
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (typeof item === 'string') names.add(item)
+      }
+    }
+  }
+
+  if (course.entrypoint.includes('Coding-Course-3')) {
+    names.add('step')
+    names.add('turn')
+  }
+  return [...names]
+})
+
+const tutorialAPIReferenceOverviews = computed(() => {
+  const course = currentCourse.value
+  if (course == null) return null
+  if (course.entrypoint.includes('Coding-Course-3')) {
+    return ['step distance', 'turn direction']
+  }
+  return null
+})
+
 const monacoEditorOptions = computed<monaco.editor.IStandaloneEditorConstructionOptions>(() => ({
   language: 'xgo',
   theme,
   tabSize,
   insertSpaces,
-  fontSize: fontSize.value,
+  fontSize: isTutorialCourse.value ? tutorialFontSize : fontSize.value,
+  padding: isTutorialCourse.value ? { top: 20 } : undefined,
   contextmenu: false
 }))
 
@@ -241,24 +283,40 @@ providePopupContainer(codeEditorEl)
   <div
     ref="codeEditorEl"
     class="relative flex min-h-0 flex-[1_1_0] justify-stretch"
-    :style="{ userSelect: isResizing ? 'none' : undefined }"
+    :class="{ 'tutorial-code-editor': isTutorialCourse }"
+    :style="{
+      userSelect: isResizing ? 'none' : undefined,
+      '--tutorial-code-font-size': isTutorialCourse ? `${tutorialFontSize}px` : undefined
+    }"
   >
-    <aside
-      class="relative flex min-h-0 min-w-0 flex-none flex-col border-r border-r-dividing-line-2"
-      :style="{ flexBasis: `${sidebarWidth}px` }"
-    >
-      <APIReferenceUI class="flex-[1_1_0]" :controller="uiRef.apiReferenceController" />
-    </aside>
-    <div
-      ref="resizeHandleEl"
-      v-radar="{ name: 'Resize handle', desc: 'Drag to resize the sidebar' }"
-      class="absolute z-10 -ml-1.75 h-full w-3.25 cursor-col-resize transition-colors hover:bg-black/5"
-      :class="{ 'bg-black/10': isResizing }"
-      :style="{ left: `${sidebarWidth}px` }"
-    ></div>
+    <template v-if="!isTutorialCourse">
+      <aside
+        class="relative flex min-h-0 min-w-0 flex-none flex-col border-r border-r-dividing-line-2"
+        :style="{ flexBasis: `${sidebarWidth}px` }"
+      >
+        <APIReferenceUI class="flex-[1_1_0]" :controller="uiRef.apiReferenceController" />
+      </aside>
+      <div
+        ref="resizeHandleEl"
+        v-radar="{ name: 'Resize handle', desc: 'Drag to resize the sidebar' }"
+        class="absolute z-10 -ml-1.75 h-full w-3.25 cursor-col-resize transition-colors hover:bg-black/5"
+        :class="{ 'bg-black/10': isResizing }"
+        :style="{ left: `${sidebarWidth}px` }"
+      ></div>
+    </template>
+    <APIReferenceUI
+      v-if="isTutorialCourse"
+      class="tutorial-api-reference"
+      variant="tutorial-side"
+      :controller="uiRef.apiReferenceController"
+      :filter-text="tutorialAPIReferenceFilterText"
+      :allowed-names="tutorialAPIReferenceNames"
+      :allowed-overviews="tutorialAPIReferenceOverviews"
+    />
     <MonacoEditorComp
       v-radar="{ name: 'Code text editor', desc: 'Text editor for code' }"
       class="my-3 min-w-0 flex-[1_1_0]"
+      :class="{ 'tutorial-monaco-editor': isTutorialCourse }"
       :monaco="codeEditor.monaco"
       :options="monacoEditorOptions"
       @init="handleMonacoEditorInit"
@@ -273,9 +331,26 @@ providePopupContainer(codeEditorEl)
     <InputHelperUI :controller="uiRef.inputHelperController" />
     <InlayHintUI :controller="uiRef.inlayHintController" />
     <DropIndicatorUI :controller="uiRef.dropIndicatorController" />
-    <aside class="flex min-h-0 min-w-0 flex-none flex-col justify-between gap-10 px-2 py-3">
+    <aside v-if="!isTutorialCourse" class="flex min-h-0 min-w-0 flex-none flex-col justify-between gap-10 px-2 py-3">
       <DocumentTabs class="min-h-0 flex-[0_1_auto]" />
       <ZoomControl class="flex-none" @in="zoomIn" @out="zoomOut" @reset="zoomReset" />
     </aside>
   </div>
 </template>
+
+<style scoped>
+.tutorial-code-editor {
+  background: var(--ui-color-grey-100);
+}
+
+.tutorial-monaco-editor {
+  margin: 0;
+  min-height: 0;
+}
+
+.tutorial-api-reference {
+  flex: 0 1 calc(230 / 998 * 100%);
+  border-right: 1px solid var(--ui-color-grey-400);
+  border-left: 0;
+}
+</style>
diff --git a/spx-gui/src/components/xgo-code-editor/ui/api-reference/APIReferenceUI.test.ts b/spx-gui/src/components/xgo-code-editor/ui/api-reference/APIReferenceUI.test.ts
new file mode 100644
index 0000000000..c7d60da88e
--- /dev/null
+++ b/spx-gui/src/components/xgo-code-editor/ui/api-reference/APIReferenceUI.test.ts
@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import { DefinitionKind, makeBasicMarkdownString, type DefinitionDocumentationItem } from '../../common'
+import APIReferenceUI from './APIReferenceUI.vue'
+
+vi.mock('./APIReferenceItem.vue', () => ({
+  default: {
+    name: 'APIReferenceItem',
+    props: ['item'],
+    template: '<li class="api-reference-item">{{ item.overview }}</li>'
+  }
+}))
+
+vi.mock('@/utils/route-loading', () => ({
+  useRegisterUpdateRouteLoaded: vi.fn()
+}))
+
+function makeItem(overview: string): DefinitionDocumentationItem {
+  return {
+    categories: [['event', 'game']],
+    kind: DefinitionKind.Function,
+    definition: { name: overview },
+    insertSnippet: overview,
+    overview,
+    detail: makeBasicMarkdownString('')
+  }
+}
+
+function mountAPIReference(variant: 'strip' | 'tutorial-side' = 'strip') {
+  return mount(APIReferenceUI, {
+    global: {
+      mocks: {
+        $t: (message: { en: string }) => message.en
+      }
+    },
+    props: {
+      variant,
+      controller: {
+        items: [makeItem('onStart => {}'), makeItem('step distance:100')],
+        error: null,
+        categoryViewInfos: [
+          {
+            id: 'event',
+            label: { en: 'Event', zh: '事件' },
+            icon: '',
+            subCategories: [{ id: 'game', label: { en: 'Game', zh: '游戏' } }]
+          }
+        ]
+      } as any,
+      allowedOverviews: ['step distance']
+    }
+  })
+}
+
+describe('APIReferenceUI strip mode', () => {
+  it('expands and collapses from the compact tutorial strip', async () => {
+    const wrapper = mountAPIReference()
+    const toggle = wrapper.get('[data-test-id="api-reference-strip-toggle"]')
+
+    expect(wrapper.classes()).not.toContain('api-reference-strip-expanded')
+    expect(toggle.text()).toBe('Expand')
+
+    await toggle.trigger('click')
+
+    expect(wrapper.classes()).toContain('api-reference-strip-expanded')
+    expect(toggle.text()).toBe('Collapse')
+  })
+
+  it('shows tutorial references as a fixed side panel without expand controls', () => {
+    const wrapper = mountAPIReference('tutorial-side')
+
+    expect(wrapper.classes()).toContain('api-reference-tutorial-side')
+    expect(wrapper.find('[data-test-id="api-reference-strip-toggle"]').exists()).toBe(false)
+    expect(wrapper.text()).toContain('step distance:100')
+    expect(wrapper.text()).not.toContain('onStart => {}')
+  })
+})
diff --git a/spx-gui/src/components/xgo-code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
index e3f0d2e251..d7b3d4ac09 100644
--- a/spx-gui/src/components/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
@@ -32,13 +32,62 @@ import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 
 const props = defineProps<{
   controller: APIReferenceController
+  variant?: 'sidebar' | 'strip' | 'tutorial-side'
+  filterText?: string | null
+  allowedNames?: string[] | null
+  allowedOverviews?: string[] | null
 }>()
 
+const stripExpanded = ref(false)
+const isTutorialVariant = computed(() => props.variant === 'strip' || props.variant === 'tutorial-side')
+
 const itemsForDisplay = computed<DefinitionDocumentationItem[] | null>((oldValue) => {
   // Ignore intermediate empty data to keep UI stable
   return props.controller.items ?? oldValue ?? null
 })
 
+const normalizedAllowedNames = computed(() => {
+  const names = props.allowedNames ?? []
+  return names.map((name) => normalizeAPIName(name)).filter((name) => name !== '')
+})
+
+const normalizedFilterText = computed(() => normalizeAPIName(props.filterText ?? ''))
+const normalizedAllowedOverviews = computed(() => {
+  const overviews = props.allowedOverviews ?? []
+  return overviews.map((overview) => normalizeAPIName(overview)).filter((overview) => overview !== '')
+})
+
+function normalizeAPIName(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, '')
+}
+
+function getAPINameCandidates(item: DefinitionDocumentationItem) {
+  const definitionName = item.definition.name ?? ''
+  const methodName = definitionName.split('.').at(-1) ?? definitionName
+  return [definitionName, methodName, item.overview].map(normalizeAPIName).filter((name) => name !== '')
+}
+
+function isAllowedInTutorial(item: DefinitionDocumentationItem) {
+  const names = normalizedAllowedNames.value
+  const overviews = normalizedAllowedOverviews.value
+  const filterText = normalizedFilterText.value
+  if (overviews.length > 0) {
+    const normalizedOverview = normalizeAPIName(item.overview)
+    return overviews.some((overview) => normalizedOverview.includes(overview) || overview.includes(normalizedOverview))
+  }
+  if (names.length === 0 && filterText === '') return true
+  return getAPINameCandidates(item).some((candidate) => {
+    return names.includes(candidate) || filterText.includes(candidate)
+  })
+}
+
+const filteredItemsForDisplay = computed<DefinitionDocumentationItem[] | null>((oldValue) => {
+  const items = itemsForDisplay.value
+  if (items == null) return oldValue ?? null
+  if (!isTutorialVariant.value) return items
+  return items.filter(isAllowedInTutorial)
+})
+
 const loaded = ref(false)
 // APIReferenceUI internally delays rendering of some data, which causes dependent modules to not work properly (e.g., tutorial)
 // Register a provider with PageLoaded to notify dependent modules that APIReferenceUI has finished loading
@@ -52,7 +101,7 @@ const err = computed(() => {
 })
 
 const categoriesComputed = computed<MainCategory[] | null>((oldValue) => {
-  const items = itemsForDisplay.value
+  const items = filteredItemsForDisplay.value
   const categoryViewInfos = props.controller.categoryViewInfos
   // Ignore intermediate empty data to keep UI stable
   if (items == null || categoryViewInfos == null) return oldValue ?? null
@@ -151,12 +200,29 @@ function handleCategoryClick(id: string) {
       desc: 'All available API reference items at left side of the code editor. Drag-n-drop or click one item to insert corresponding code snippet.'
     }"
     class="flex min-h-0"
+    :class="{
+      'api-reference-strip': variant === 'strip',
+      'api-reference-strip-expanded': stripExpanded,
+      'api-reference-tutorial-side': variant === 'tutorial-side'
+    }"
   >
     <UIError v-if="err != null">
       {{ $t(err.userMessage) }}
     </UIError>
     <template v-else>
-      <ul class="flex-none flex flex-col gap-3 border-r border-dividing-line-2 px-1 py-3">
+      <button
+        v-if="variant === 'strip'"
+        data-test-id="api-reference-strip-toggle"
+        class="api-reference-strip-toggle"
+        type="button"
+        @click="stripExpanded = !stripExpanded"
+      >
+        {{ stripExpanded ? $t({ en: 'Collapse', zh: '收起' }) : $t({ en: 'Expand', zh: '展开' }) }}
+      </button>
+      <ul
+        v-if="variant !== 'strip' && variant !== 'tutorial-side'"
+        class="flex-none flex flex-col gap-3 border-r border-dividing-line-2 px-1 py-3"
+      >
         <li
           v-for="c in categoriesComputed"
           :key="c.id"
@@ -169,16 +235,27 @@ function handleCategoryClick(id: string) {
           <p class="mt-0.5 text-center text-2xs">{{ $t(c.label) }}</p>
         </li>
       </ul>
-      <ul ref="itemsWrapperRef" class="flex-[1_1_0] min-w-0 overflow-y-auto px-4 pb-3 [scrollbar-width:thin]">
+      <ul
+        ref="itemsWrapperRef"
+        class="flex-[1_1_0] min-w-0 overflow-y-auto px-4 pb-3 [scrollbar-width:thin]"
+        :class="{ 'api-reference-strip-items': isTutorialVariant }"
+      >
         <li
           v-for="c in categoriesForItems"
           :key="c.id"
           :data-category-id="c.id"
           class="[&:last-child>section:last-child]:border-b-0"
         >
-          <section v-for="sc in c.subCategories" :key="sc.id" class="border-b border-dashed border-grey-500">
-            <h5 class="sticky top-0 z-10 bg-grey-100 py-3 text-xs text-hint-2">{{ $t(sc.label) }}</h5>
-            <ul class="flex flex-col gap-md pb-5">
+          <section
+            v-for="sc in c.subCategories"
+            :key="sc.id"
+            class="border-b border-dashed border-grey-500"
+            :class="{ 'api-reference-strip-section': isTutorialVariant }"
+          >
+            <h5 v-if="!isTutorialVariant" class="sticky top-0 z-10 bg-grey-100 py-3 text-xs text-hint-2">
+              {{ $t(sc.label) }}
+            </h5>
+            <ul class="flex flex-col gap-md pb-5" :class="{ 'api-reference-strip-list': isTutorialVariant }">
               <APIReferenceItemComp
                 v-for="item in sc.items"
                 :key="stringifyDefinitionId(item.definition)"
@@ -192,3 +269,166 @@ function handleCategoryClick(id: string) {
     </template>
   </section>
 </template>
+
+<style scoped>
+.api-reference-strip {
+  position: relative;
+  border-top: 1px solid var(--ui-color-grey-400);
+  background: var(--ui-color-grey-100);
+}
+
+.api-reference-tutorial-side {
+  position: relative;
+  border-left: 1px solid var(--ui-color-grey-400);
+  background: var(--ui-color-grey-100);
+}
+
+.api-reference-strip-expanded {
+  flex-basis: 340px !important;
+  min-height: 320px !important;
+}
+
+.api-reference-strip-toggle {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  z-index: 1;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--ui-color-grey-500);
+  border-radius: var(--ui-border-radius-sm);
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-title);
+  font-size: 12px;
+  cursor: pointer;
+  box-shadow: var(--ui-box-shadow-control);
+}
+
+.api-reference-strip-toggle:hover {
+  border-color: var(--ui-color-primary-main);
+}
+
+.api-reference-strip-items {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 24px 22px;
+}
+
+.api-reference-tutorial-side .api-reference-strip-items {
+  flex-direction: column;
+  gap: 6px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 10px 8px;
+}
+
+.api-reference-strip-expanded .api-reference-strip-items {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-top: 44px;
+}
+
+.api-reference-strip-section {
+  border-bottom: 0;
+  flex: none;
+}
+
+.api-reference-tutorial-side .api-reference-strip-section {
+  width: 100%;
+}
+
+.api-reference-strip-list {
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: 18px;
+  row-gap: 12px;
+  padding-bottom: 0;
+}
+
+.api-reference-tutorial-side .api-reference-strip-list {
+  width: 100%;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+
+.api-reference-strip-expanded .api-reference-strip-section {
+  width: 100%;
+}
+
+.api-reference-strip-expanded .api-reference-strip-list {
+  align-content: flex-start;
+}
+
+.api-reference-strip :deep(.api-reference-item),
+.api-reference-tutorial-side :deep(.api-reference-item) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 52px;
+  margin-block: 6px;
+  padding: 8px 14px 8px 32px;
+  border: 1px solid var(--ui-color-grey-500);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
+  cursor: grab;
+}
+
+.api-reference-tutorial-side :deep(.api-reference-item) {
+  min-height: 32px;
+  margin-block: 2px;
+  padding: 4px 6px 4px 20px;
+}
+
+.api-reference-strip :deep(.api-reference-item)::before,
+.api-reference-tutorial-side :deep(.api-reference-item)::before {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  width: 8px;
+  height: 20px;
+  background-image: radial-gradient(circle, var(--ui-color-grey-700) 1.5px, transparent 1.5px);
+  background-size: 4px 5px;
+  transform: translateY(-50%);
+  opacity: 0.65;
+}
+
+.api-reference-tutorial-side :deep(.api-reference-item)::before {
+  left: 8px;
+  height: 15px;
+  background-size: 4px 4px;
+}
+
+.api-reference-strip :deep(.api-reference-item:hover),
+.api-reference-tutorial-side :deep(.api-reference-item:hover) {
+  border-color: var(--ui-color-primary-main);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+.api-reference-strip :deep(.api-reference-item.before-dragging),
+.api-reference-tutorial-side :deep(.api-reference-item.before-dragging) {
+  cursor: grabbing;
+  transform: translateY(1px);
+}
+
+.api-reference-strip :deep(.api-reference-item .overview),
+.api-reference-tutorial-side :deep(.api-reference-item .overview) {
+  font-size: var(--tutorial-code-font-size, 24px);
+  line-height: 1.5;
+}
+
+.api-reference-tutorial-side :deep(.api-reference-item .overview) {
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.api-reference-tutorial-side :deep(.api-reference-item .overview > code) {
+  overflow: visible;
+  text-overflow: clip;
+}
+</style>
diff --git a/spx-gui/src/components/xgo-code-editor/ui/code-editor-ui.ts b/spx-gui/src/components/xgo-code-editor/ui/code-editor-ui.ts
index c223833340..d5ab235cfa 100644
--- a/spx-gui/src/components/xgo-code-editor/ui/code-editor-ui.ts
+++ b/spx-gui/src/components/xgo-code-editor/ui/code-editor-ui.ts
@@ -451,6 +451,10 @@ export class CodeEditorUIController extends Disposable implements ICodeEditorUIC
   }
 
   private _editor: MonacoEditor | null = null
+  private isEditorInitializedRef = ref(false)
+  get isEditorInitialized() {
+    return this.isEditorInitializedRef.value
+  }
   get editor() {
     if (this._editor == null) throw new Error('Editor not initialized')
     return this._editor
@@ -560,6 +564,7 @@ export class CodeEditorUIController extends Disposable implements ICodeEditorUIC
 
   init(editor: MonacoEditor) {
     this._editor = editor
+    this.isEditorInitializedRef.value = true
 
     this.setActiveTextDocument(this.mainTextDocumentId)
 
diff --git a/spx-gui/src/components/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue b/spx-gui/src/components/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
index 6442102b73..b974e62a13 100644
--- a/spx-gui/src/components/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
+++ b/spx-gui/src/components/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
@@ -1,18 +1,67 @@
 <script setup lang="ts">
+import { computed, onUnmounted, shallowRef, watchEffect } from 'vue'
 import { DiagnosticSeverity, type Diagnostic } from '../../common'
 import type { monaco } from '../../monaco'
-import { useDecorations } from '../common'
+import { containsPosition } from '../../common'
+import { builtInCommandCopilotFixProblem } from '../code-editor-ui'
+import { fromMonacoPosition, toAbsolutePosition } from '../common'
 import type { DiagnosticsController } from '.'
 
 const props = defineProps<{
   controller: DiagnosticsController
 }>()
 
+const hoveredDiagnostic = shallowRef<Diagnostic | null>(null)
+let decorationCollection: monaco.editor.IEditorDecorationsCollection | null = null
+
 function getDiagnosticCls(severity: DiagnosticSeverity, suffix?: string) {
   return ['code-editor-diagnostic', severity, suffix].filter(Boolean).join('-')
 }
 
-useDecorations(() => {
+function getDiagnosticAtPosition(position: monaco.IPosition) {
+  const diagnostics = props.controller.diagnostics
+  if (diagnostics == null) return null
+  const codePosition = fromMonacoPosition(position)
+  return diagnostics.find((diagnostic) => containsPosition(diagnostic.range, codePosition)) ?? null
+}
+
+function handleMouseMove(target: monaco.editor.IMouseTarget) {
+  const ui = props.controller.ui
+  if (target.type !== ui.monaco.editor.MouseTargetType.CONTENT_TEXT || target.position == null) return
+  hoveredDiagnostic.value = getDiagnosticAtPosition(target.position)
+}
+
+function handleFixProblem() {
+  const ui = props.controller.ui
+  const diagnostic = hoveredDiagnostic.value
+  const textDocument = ui.activeTextDocument
+  if (diagnostic == null || textDocument == null) return
+  void ui.executeCommand(builtInCommandCopilotFixProblem, {
+    textDocument: textDocument.id,
+    problem: diagnostic
+  })
+}
+
+const diagnosticCopilotStyle = computed(() => {
+  const ui = props.controller.ui
+  const diagnostic = hoveredDiagnostic.value
+  if (diagnostic == null || !ui.isEditorInitialized) return null
+  const position = toAbsolutePosition(diagnostic.range.end, ui.editor)
+  if (position == null) return null
+  return {
+    top: `${position.top + position.height / 2}px`,
+    left: `${position.left + 8}px`
+  }
+})
+
+watchEffect((onCleanup) => {
+  const ui = props.controller.ui
+  if (!ui.isEditorInitialized) return
+  const mouseMoveDisposable = ui.editor.onMouseMove((event) => handleMouseMove(event.target))
+  onCleanup(() => mouseMoveDisposable.dispose())
+})
+
+function getDecorations() {
   const diagnostics = props.controller.diagnostics
   if (diagnostics == null) return []
 
@@ -61,14 +110,68 @@ useDecorations(() => {
     })
   }
   return [...inlineDecorations, ...lineDecorations]
+}
+
+watchEffect(() => {
+  const ui = props.controller.ui
+  if (!ui.isEditorInitialized) return
+  const decorations = getDecorations()
+  decorationCollection = decorationCollection ?? ui.editor.createDecorationsCollection([])
+  decorationCollection.set(decorations)
+})
+
+onUnmounted(() => {
+  decorationCollection?.clear()
 })
 </script>
 
 <template>
-  <div></div>
+  <button
+    v-if="hoveredDiagnostic != null && diagnosticCopilotStyle != null"
+    class="code-editor-diagnostic-fix-problem"
+    :style="diagnosticCopilotStyle"
+    :aria-label="$t({ en: 'Fix problem', zh: '修复问题' })"
+    @click="handleFixProblem"
+  >
+    <svg class="lightbulb-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M5.875 11.15C5.875 10.375 5.525 9.7 5.025 9.125C4.425 8.425 4.125 7.55 4.125 6.625C4.125 3.95 6.3 1.875 9 1.875C11.7 1.875 13.875 3.95 13.875 6.625C13.875 7.55 13.575 8.425 12.975 9.125C12.475 9.7 12.125 10.375 12.125 11.15V11.625H5.875V11.15Z"
+        fill="currentColor"
+      />
+      <path d="M6.5 13H11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      <path d="M7.25 15H10.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+  </button>
 </template>
 
 <style>
+.code-editor-diagnostic-fix-problem {
+  position: fixed;
+  z-index: 20;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: 999px;
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-yellow-600);
+  box-shadow: var(--ui-box-shadow-md);
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.code-editor-diagnostic-fix-problem:hover {
+  border-color: var(--ui-color-yellow-600);
+  background: var(--ui-color-yellow-100);
+}
+
+.code-editor-diagnostic-fix-problem .lightbulb-icon {
+  display: block;
+}
+
 .code-editor-diagnostic-error-line-header,
 .code-editor-diagnostic-warning-line-header {
   width: 100% !important;
diff --git a/spx-gui/src/components/xgo-code-editor/ui/diagnostics/index.ts b/spx-gui/src/components/xgo-code-editor/ui/diagnostics/index.ts
index ccda530f60..e4d735ce93 100644
--- a/spx-gui/src/components/xgo-code-editor/ui/diagnostics/index.ts
+++ b/spx-gui/src/components/xgo-code-editor/ui/diagnostics/index.ts
@@ -7,7 +7,7 @@ import type { CodeEditorUIController } from '../code-editor-ui'
 export type { IDiagnosticsProvider, DiagnosticsContext } from '../../diagnostics'
 
 export class DiagnosticsController extends Disposable {
-  constructor(private ui: CodeEditorUIController) {
+  constructor(readonly ui: CodeEditorUIController) {
     super()
   }
 
diff --git a/spx-gui/src/components/xgo-code-editor/ui/hover/index.ts b/spx-gui/src/components/xgo-code-editor/ui/hover/index.ts
index 4912f9176c..16005d1ea8 100644
--- a/spx-gui/src/components/xgo-code-editor/ui/hover/index.ts
+++ b/spx-gui/src/components/xgo-code-editor/ui/hover/index.ts
@@ -19,7 +19,6 @@ import type { Hover } from '../../hover'
 
 export type { Hover, HoverContext, IHoverProvider } from '../../hover'
 import {
-  builtInCommandCopilotFixProblem,
   builtInCommandGoToResource,
   type CodeEditorUIController,
   builtInCommandRenameResource,
@@ -57,7 +56,7 @@ export class HoverController extends Emitter<{
     const textDocument = this.ui.activeTextDocument
     if (textDocument == null) return null
 
-    const diagnosticsHover = this.getDiagnosticsHover(textDocument, position)
+    const diagnosticsHover = this.getDiagnosticsHover(position)
     const providedHover = await provider.provideHover({ textDocument, signal }, position)
     let providedInternalHover: InternalHover | null = null
     if (providedHover != null) {
@@ -107,7 +106,7 @@ export class HoverController extends Emitter<{
     this.hoverMgr.stop()
   }
 
-  private getDiagnosticsHover(textDocument: ITextDocument, position: Position): InternalHover | null {
+  private getDiagnosticsHover(position: Position): InternalHover | null {
     const diagnosticsController = this.ui.diagnosticsController
     if (diagnosticsController.diagnostics == null) return null
     for (const diagnostic of diagnosticsController.diagnostics) {
@@ -119,17 +118,7 @@ export class HoverController extends Emitter<{
           )
         ],
         range: diagnostic.range,
-        actions: [
-          {
-            command: builtInCommandCopilotFixProblem,
-            arguments: [
-              {
-                textDocument: textDocument.id,
-                problem: diagnostic
-              }
-            ]
-          }
-        ]
+        actions: []
       }
     }
     return null
diff --git a/spx-gui/src/stores/user/signed-in.test.ts b/spx-gui/src/stores/user/signed-in.test.ts
new file mode 100644
index 0000000000..b87be0ce03
--- /dev/null
+++ b/spx-gui/src/stores/user/signed-in.test.ts
@@ -0,0 +1,45 @@
+import { createApp } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from '@/utils/i18n'
+import { accountOAuthApisForXBuilder } from '@/apis/account/oauth'
+import { initUserState, useSignIn } from './signed-in'
+
+vi.mock('@/apis/account/oauth', () => ({
+  accountOAuthApisForXBuilder: {
+    createPAR: vi.fn(async () => ({ request_uri: 'urn:test:request-uri' })),
+    buildAuthorizeUrl: vi.fn(() => 'https://account.example.com/oauth/authorize'),
+    exchangeToken: vi.fn(),
+    refreshToken: vi.fn(),
+    revokeToken: vi.fn()
+  }
+}))
+
+describe('signed-in user state', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    sessionStorage.clear()
+    vi.clearAllMocks()
+  })
+
+  it('uses configured OAuth redirect URI when creating authorization', async () => {
+    initUserState('client-1', { redirectUri: 'https://staging.example.com/sign-in/callback' })
+
+    const app = createApp({})
+    app.use(createI18n({ lang: 'en' }))
+
+    let signIn!: ReturnType<typeof useSignIn>
+    app.runWithContext(() => {
+      signIn = useSignIn()
+    })
+
+    await signIn('/editor/project')
+
+    expect(accountOAuthApisForXBuilder.createPAR).toHaveBeenCalledWith(
+      expect.objectContaining({
+        client_id: 'client-1',
+        redirect_uri: 'https://staging.example.com/sign-in/callback'
+      })
+    )
+    expect(window.location.href).toBe('https://account.example.com/oauth/authorize')
+  })
+})
diff --git a/spx-gui/src/stores/user/signed-in.ts b/spx-gui/src/stores/user/signed-in.ts
index 78f06cf3cb..b2b77d9687 100644
--- a/spx-gui/src/stores/user/signed-in.ts
+++ b/spx-gui/src/stores/user/signed-in.ts
@@ -25,10 +25,14 @@ function ensureOAuthFlow() {
   return oauthFlow
 }
 
-export function initUserState(clientId: string) {
+export type InitUserStateOptions = {
+  redirectUri?: string
+}
+
+export function initUserState(clientId: string, options: InitUserStateOptions = {}) {
   oauthFlow = new OAuthFlow<{ returnTo: string }>(oauthApis, {
     clientId,
-    redirectUri: `${window.location.origin}/sign-in/callback`
+    redirectUri: options.redirectUri ?? `${window.location.origin}/sign-in/callback`
   })
 
   const stored = localStorage.getItem(userStateStorageKey)
@@ -42,6 +46,10 @@ export function initUserState(clientId: string) {
   watchEffect(() => localStorage.setItem(userStateStorageKey, JSON.stringify(userState)))
 }
 
+export function navigateToSignIn(authorizeUrl: string) {
+  window.location.href = authorizeUrl
+}
+
 async function getSignedInUsernameByAccessToken(accessToken: string) {
   const user = await userApis.getSignedInUser(accessToken)
   return user.username
@@ -62,7 +70,7 @@ export function useSignIn() {
       data: { returnTo },
       uiLocales: normalizeLang(i18n.lang.value)
     })
-    window.location.assign(authorizeUrl)
+    navigateToSignIn(authorizeUrl)
   }
 }
 
diff --git a/spx-gui/vite.config.ts b/spx-gui/vite.config.ts
index 1f6701f0c7..8b0dcc0cdb 100644
--- a/spx-gui/vite.config.ts
+++ b/spx-gui/vite.config.ts
@@ -8,6 +8,7 @@ import { ViteEjsPlugin } from 'vite-plugin-ejs'
 import browserslistToEsbuild from 'browserslist-to-esbuild'
 
 import { createAppHtmlEntryPlugin } from './build/vite-plugins/app-html-entry-plugin.js'
+import { createBrowserHijackPlugin } from './build/vite-plugins/browser-hijack-plugin.js'
 import { createVercelOutputPlugin } from './build/vite-plugins/vercel-output-plugin.js'
 
 const resolve = (dir: string) => path.join(__dirname, dir)
@@ -17,6 +18,7 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, xbuilderEnvDir, '')
   const vercelProxiedApiBaseURL =
     env.VITE_VERCEL_PROXIED_API_BASE_URL == null ? null : env.VITE_VERCEL_PROXIED_API_BASE_URL
+  const accountOAuthRedirectUri = env.VITE_ACCOUNT_OAUTH_REDIRECT_URI ?? ''
 
   const input: Record<string, string> = {
     main: resolve('index.html'),
@@ -31,6 +33,15 @@ export default defineConfig(({ mode }) => {
   return {
     envDir: xbuilderEnvDir,
     plugins: [
+      ...(mode === 'development' && accountOAuthRedirectUri !== ''
+        ? [
+            createBrowserHijackPlugin({
+              origin: new URL(accountOAuthRedirectUri).origin,
+              routes: [new URL(accountOAuthRedirectUri).pathname],
+              chromeStartURL: 'http://127.0.0.1:5175'
+            })
+          ]
+        : []),
       createAppHtmlEntryPlugin(resolve('src/apps/xbuilder/index.html')),
       vue(),
       tailwindcss(),
diff --git a/tutorial/package-lock.json b/tutorial/package-lock.json
index 289b433c02..38d9662062 100644
--- a/tutorial/package-lock.json
+++ b/tutorial/package-lock.json
@@ -38,7 +38,6 @@
       "integrity": "sha512-oozXk7ZO1RAd/KLFLkKOhqTcG4GO3CV44WwOFg2gMcCsqCUTarvMT7xERIoWW2WurKbB0/ce+98r01p8xPOlBw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "asciidoctor-opal-runtime": "0.3.3",
         "unxhr": "1.0.1"
@@ -462,7 +461,6 @@
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",