diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 3f28bd99e5..11ad9facd4 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -35,6 +35,28 @@ Keep import statements in order:
 	- Enum names and enum members
 	- Vue component names
 
+### Identifier Resolution
+
+When working with backend unique string identifiers such as `username`, project owner, and project name, distinguish unresolved identifiers from canonical identifiers.
+
+* Route params, query params, manual user input, and JWT-derived identifiers are unresolved unless the current task establishes a stronger guarantee.
+
+* Backend-issued values from HTTP API responses are canonical.
+
+* Prefer explicit unresolved names with an `Input` suffix.
+
+* In models and resolved state, names like `owner`, `name`, and `username` should refer to canonical values.
+
+* Keep normal strict and case-sensitive equality (`===` / `!==`) for consuming identifiers. Do not spread ad hoc case-normalization logic across comparison sites.
+
+* Resolve unresolved identifiers at clear boundaries before consuming them. Typical resolution boundaries include project loading, user loading, and other backend-backed fetches.
+
+* Avoid storing unresolved identifiers on long-lived models as if they were already canonical. Prefer passing unresolved identifiers as load or resolve parameters, then writing canonical values onto the model after resolution.
+
+* Downstream logic should consume canonical values for behavior-sensitive checks such as ownership checks, permission checks, project reuse checks, and local-cache decisions.
+
+* Cache keys and similar identity-scoping data may intentionally use unresolved identifiers when that preserves stable session scoping.
+
 ## TypeScript Testing
 
 * Use `describe` to group related tests.
diff --git a/spx-gui/src/apis/asset.ts b/spx-gui/src/apis/asset.ts
index 3d20e2d25c..c5fa240e15 100644
--- a/spx-gui/src/apis/asset.ts
+++ b/spx-gui/src/apis/asset.ts
@@ -93,8 +93,8 @@ export type ListAssetParams = PaginationParams & {
   sortOrder?: 'asc' | 'desc'
 }
 
-export function listAsset(params?: ListAssetParams) {
-  return client.get('/assets/list', params) as Promise<ByPage<AssetData>>
+export function listAsset(params?: ListAssetParams, signal?: AbortSignal) {
+  return client.get('/assets/list', params, { signal }) as Promise<ByPage<AssetData>>
 }
 
 export function getAsset(id: string) {
diff --git a/spx-gui/src/components/agent-copilot/CopilotProvider.vue b/spx-gui/src/components/agent-copilot/CopilotProvider.vue
index 13d7434f51..00b083d749 100644
--- a/spx-gui/src/components/agent-copilot/CopilotProvider.vue
+++ b/spx-gui/src/components/agent-copilot/CopilotProvider.vue
@@ -95,7 +95,8 @@ import { ToolRegistry } from './mcp/registry'
 import { Collector } from './mcp/collector'
 import CopilotUI from './CopilotUI.vue'
 import { z } from 'zod'
-import { getSignedInUsername } from '@/stores/user'
+import { untilLoaded } from '@/utils/query'
+import { useSignedInStateQuery } from '@/stores/user'
 import { createProjectToolDescription, CreateProjectArgsSchema } from './mcp/definitions'
 import { getProject, Visibility } from '@/apis/project'
 import { useRouter } from 'vue-router'
@@ -114,6 +115,7 @@ const visible = ref(false)
 const mcpDebuggerVisible = ref(false)
 const showEnvPanel = ref(false)
 const router = useRouter()
+const signedInStateQuery = useSignedInStateQuery()
 
 const toggleEnvPanel = () => {
   showEnvPanel.value = !showEnvPanel.value
@@ -179,18 +181,19 @@ const initBasicTools = async () => {
 async function createProject(options: CreateProjectOptions) {
   const projectName = options.projectName
 
-  // Check if user is signed in
-  const signedInUsername = getSignedInUsername()
-  if (signedInUsername == null) {
+  const signedInState = await untilLoaded(signedInStateQuery)
+  if (!signedInState.isSignedIn) {
     return {
       success: false,
       message: 'Please sign in to create a project'
     }
   }
 
+  const { username } = signedInState.user
+
   try {
     // Check if project already exists
-    const project = await getProject(signedInUsername, options.projectName)
+    const project = await getProject(username, options.projectName)
     if (project != null) {
       return {
         success: false,
@@ -201,7 +204,7 @@ async function createProject(options: CreateProjectOptions) {
     // Handle error checking project existence
   }
 
-  const project = new SpxProject(signedInUsername, projectName)
+  const project = new SpxProject(username, projectName)
   project.setVisibility(Visibility.Private)
 
   try {
diff --git a/spx-gui/src/components/agent-copilot/UserMessage.vue b/spx-gui/src/components/agent-copilot/UserMessage.vue
index 73b1a286cf..4526176190 100644
--- a/spx-gui/src/components/agent-copilot/UserMessage.vue
+++ b/spx-gui/src/components/agent-copilot/UserMessage.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
   content: string
 }>()
 
-const { data: signedInUser } = useSignedInUser()
+const signedInUser = useSignedInUser()
 const avatarUrl = useAvatarUrl(() => signedInUser.value?.avatar)
 </script>
 
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
index e392130ae1..545973c221 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { UIButton } from '@/components/ui'
+import { AssetType } from '@/apis/asset'
 import type { Backdrop } from '@/models/spx/backdrop'
+import { asset2Backdrop } from '@/models/spx/common/asset'
 import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { capture, useMessageHandle } from '@/utils/exception'
 import { humanizeTimeLeft } from '../common/time-left'
@@ -9,15 +11,25 @@ import BackdropSettingInput from './BackdropSettingsInput.vue'
 import LayoutWithPreview from '../common/LayoutWithPreview.vue'
 import ImagePreview from '../common/ImagePreview.vue'
 import ImageSelector from '../common/ImageSelector.vue'
+import AssetSuggestions from '../common/AssetSuggestions.vue'
+import { useAssetSuggestions } from '../common/use-asset-suggestions'
 import BackdropImageItem from './BackdropImageItem.vue'
+import BackdropItem from '@/components/asset/library/BackdropItem.vue'
 
-const props = defineProps<{
-  gen: BackdropGen
-  descriptionPlaceholder?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    gen: BackdropGen
+    descriptionPlaceholder?: string
+    librarySearchEnabled?: boolean
+  }>(),
+  {
+    descriptionPlaceholder: undefined,
+    librarySearchEnabled: false
+  }
+)
 
 const emit = defineEmits<{
-  finished: [Backdrop]
+  resolved: [Backdrop]
 }>()
 
 const canSubmit = computed(() => props.gen.image != null)
@@ -27,7 +39,7 @@ const handleSubmit = useMessageHandle(
     props.gen.recordAdoption().catch((err) => {
       capture(err, 'failed to record backdrop asset adoption')
     })
-    emit('finished', backdrop)
+    emit('resolved', backdrop)
   },
   {
     en: 'Failed to create backdrop',
@@ -43,6 +55,30 @@ function handleImageSelect(index: number) {
   props.gen.setImageIndex(index)
   hasPreview.value = true
 }
+
+const isLibrarySearchEnabled = computed(
+  () => props.librarySearchEnabled && props.gen.imagesGenState.status === 'initial'
+)
+
+const {
+  keyword,
+  suggestions,
+  isLoading: isSuggestionsLoading,
+  selected: selectedAsset,
+  toggle: toggleSelectedAsset
+} = useAssetSuggestions(AssetType.Backdrop, () => props.gen.settings.description, isLibrarySearchEnabled)
+
+const handleUseAsset = useMessageHandle(
+  async () => {
+    if (selectedAsset.value == null) throw new Error('no asset selected')
+    const backdrop = await asset2Backdrop(selectedAsset.value)
+    emit('resolved', backdrop)
+  },
+  {
+    en: 'Failed to use asset',
+    zh: '使用素材失败'
+  }
+)
 </script>
 
 <template>
@@ -58,33 +94,48 @@ function handleImageSelect(index: number) {
         :disabled="handleSubmit.isLoading.value"
         :description-placeholder="descriptionPlaceholder"
       />
-      <ImageSelector
-        :state="gen.imagesGenState"
-        :selected="gen.imageIndex"
-        :disabled="handleSubmit.isLoading.value"
-        @select="handleImageSelect"
-      >
-        <template #loading-item>
-          <BackdropImageItem loading />
-        </template>
-        <template #item="{ file, active, onClick }">
-          <BackdropImageItem :file="file" :active="active" @click="onClick" />
-        </template>
-        <template #tip>
-          <template v-if="gen.imagesGenState.status === 'running'">
-            {{ $t({ en: `Generating backdrops... `, zh: `正在生成背景...` }) }}
-            {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+      <div class="select-area">
+        <AssetSuggestions
+          v-if="isLibrarySearchEnabled"
+          :type="AssetType.Backdrop"
+          :loading="isSuggestionsLoading"
+          :keyword="keyword"
+          :suggestions="suggestions"
+          :selected="selectedAsset"
+          @toggle="toggleSelectedAsset"
+        >
+          <template #item="{ asset, selected, onClick }">
+            <BackdropItem :asset="asset" :selected="selected" @click="onClick" />
+          </template>
+        </AssetSuggestions>
+        <ImageSelector
+          :state="gen.imagesGenState"
+          :selected="gen.imageIndex"
+          :disabled="handleSubmit.isLoading.value"
+          @select="handleImageSelect"
+        >
+          <template #loading-item>
+            <BackdropImageItem loading />
           </template>
-          <template v-else-if="gen.imagesGenState.status === 'finished'">
-            {{
-              $t({
-                en: 'Select the backdrop you like the most, or generate new ones.',
-                zh: '选择你最喜欢的一个背景，或者重新生成。'
-              })
-            }}
+          <template #item="{ file, active, onClick }">
+            <BackdropImageItem :file="file" :active="active" @click="onClick" />
           </template>
-        </template>
-      </ImageSelector>
+          <template #tip>
+            <template v-if="gen.imagesGenState.status === 'running'">
+              {{ $t({ en: `Generating backdrops... `, zh: `正在生成背景...` }) }}
+              {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+            </template>
+            <template v-else-if="gen.imagesGenState.status === 'finished'">
+              {{
+                $t({
+                  en: 'Select the backdrop you like the most, or generate new ones.',
+                  zh: '选择你最喜欢的一个背景，或者重新生成。'
+                })
+              }}
+            </template>
+          </template>
+        </ImageSelector>
+      </div>
 
       <template #preview>
         <ImagePreview :file="gen.image" />
@@ -92,6 +143,19 @@ function handleImageSelect(index: number) {
     </LayoutWithPreview>
     <footer class="footer">
       <UIButton
+        v-if="selectedAsset != null"
+        v-radar="{
+          name: 'Use',
+          desc: 'Click to use the selected library asset'
+        }"
+        color="primary"
+        size="large"
+        @click="handleUseAsset.fn"
+      >
+        {{ $t({ en: 'Use', zh: '采用' }) }}
+      </UIButton>
+      <UIButton
+        v-else
         v-radar="{
           name: 'Use',
           desc: 'Finish and use the generated backdrop in the project'
@@ -129,6 +193,9 @@ function handleImageSelect(index: number) {
       height: 300px;
     }
   }
+  .select-area {
+    height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
+  }
 }
 
 .footer {
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
new file mode 100644
index 0000000000..8119e50b2f
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UIModal, UIModalClose, useConfirmDialog } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import { useMessageHandle } from '@/utils/exception'
+import { AssetType } from '@/apis/asset'
+import type { Backdrop } from '@/models/spx/backdrop'
+import type { BackdropGen as BackdropGenModel } from '@/models/spx/gen/backdrop-gen'
+import type { SpxProject } from '@/models/spx/project'
+import { useAssetGen } from '../use-asset-gen'
+import BackdropGenComp from './BackdropGen.vue'
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    project: SpxProject
+    // Currently no use case for providing an external gen, but we keep this prop
+    // for consistency with SpriteGenModal and potential future use cases.
+    gen?: BackdropGenModel
+  }>(),
+  {
+    gen: undefined
+  }
+)
+
+const emit = defineEmits<{
+  resolved: [Backdrop]
+  cancelled: []
+}>()
+
+const i18n = useI18n()
+const confirm = useConfirmDialog()
+
+const typeRef = computed(() => (props.gen != null ? null : AssetType.Backdrop))
+const { assetGen: internalGen } = useAssetGen(props.project, typeRef)
+const activeGen = computed(() => props.gen ?? internalGen.value)
+
+const handleModalClose = useMessageHandle(
+  async () => {
+    if (props.gen == null) {
+      await confirm({
+        title: i18n.t({ zh: '退出背景生成？', en: 'Exit backdrop generation?' }),
+        content: i18n.t({
+          zh: '当前内容不会被保存，确定要退出吗？',
+          en: 'Current progress will not be saved. Are you sure to exit?'
+        }),
+        confirmText: i18n.t({ en: 'Exit', zh: '退出' })
+      })
+    }
+    emit('cancelled')
+  },
+  { en: 'Failed to exit modal', zh: '退出失败' }
+).fn
+</script>
+
+<template>
+  <UIModal
+    :radar="{ name: 'Backdrop generation modal', desc: 'Modal for backdrop generation' }"
+    style="width: 1076px; height: 800px"
+    :visible="visible"
+    mask-closable
+    @update:visible="handleModalClose"
+  >
+    <header class="header">
+      <h2 class="title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
+      <UIModalClose class="close" @click="handleModalClose" />
+    </header>
+
+    <BackdropGenComp
+      v-if="activeGen != null"
+      class="backdrop-gen"
+      :gen="activeGen"
+      library-search-enabled
+      @resolved="emit('resolved', $event)"
+    />
+  </UIModal>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 56px;
+  border-bottom: 1px solid var(--ui-color-grey-400);
+
+  .title {
+    font-size: 16px;
+    color: var(--ui-color-title);
+  }
+}
+
+.backdrop-gen {
+  flex: 1 1 0;
+  min-height: 0;
+}
+</style>
diff --git a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
new file mode 100644
index 0000000000..c99bad064f
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AssetType, type AssetData } from '@/apis/asset'
+import { UILoading } from '@/components/ui'
+
+const props = defineProps<{
+  type: AssetType
+  loading: boolean
+  keyword: string
+  suggestions: AssetData[]
+  selected: AssetData | null
+}>()
+
+const emit = defineEmits<{
+  toggle: [AssetData]
+}>()
+
+function isSelected(asset: AssetData) {
+  return props.selected?.id === asset.id
+}
+
+const entityMessages = {
+  [AssetType.Backdrop]: { en: 'backdrop', zh: '背景' },
+  [AssetType.Sprite]: { en: 'sprite', zh: '精灵' },
+  [AssetType.Sound]: { en: 'sound', zh: '声音' }
+}
+const entityMessage = computed(() => entityMessages[props.type])
+</script>
+
+<template>
+  <UILoading v-if="loading" />
+  <div v-else class="asset-suggestions">
+    <template v-if="suggestions.length > 0">
+      <ul class="list">
+        <template v-for="asset in suggestions" :key="asset.id">
+          <slot name="item" :asset="asset" :selected="isSelected(asset)" :on-click="() => emit('toggle', asset)"></slot>
+        </template>
+      </ul>
+      <p class="tip">
+        {{
+          $t({
+            en: `There are related ${entityMessage.en}s in the asset library. You can choose the one you like or continue generating.`,
+            zh: `素材库中已有相关的${entityMessage.zh}，可以选择你喜欢的${entityMessage.zh}直接使用，或者继续生成。`
+          })
+        }}
+      </p>
+    </template>
+    <p v-else-if="keyword.length > 0" class="tip" style="margin-top: 56px">
+      {{
+        $t({
+          en: `No matching ${entityMessage.en}s found in the asset library. You can continue generating.`,
+          zh: `素材库中未找到匹配的${entityMessage.zh}，你可以继续生成。`
+        })
+      }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.asset-suggestions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tip {
+  text-align: center;
+  font-size: 12px;
+  color: var(--ui-color-hint-2);
+}
+</style>
diff --git a/spx-gui/src/components/asset/gen/common/EnrichableSubmitButton.vue b/spx-gui/src/components/asset/gen/common/EnrichableSubmitButton.vue
index 4a13f1bfbd..83c796a1d4 100644
--- a/spx-gui/src/components/asset/gen/common/EnrichableSubmitButton.vue
+++ b/spx-gui/src/components/asset/gen/common/EnrichableSubmitButton.vue
@@ -63,7 +63,7 @@ const buttonLoading = computed(() => props.loading || (isEnrichTriggered.value &
     </template>
     {{
       $t({
-        zh: '正在自动丰富细节，请稍后...',
+        zh: '正在自动丰富细节，请稍候...',
         en: 'Enriching automatically, please wait...'
       })
     }}
diff --git a/spx-gui/src/components/asset/gen/common/use-asset-suggestions.ts b/spx-gui/src/components/asset/gen/common/use-asset-suggestions.ts
new file mode 100644
index 0000000000..d29c3aae42
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/common/use-asset-suggestions.ts
@@ -0,0 +1,63 @@
+import { ref, shallowRef, watch, type WatchSource } from 'vue'
+import { debounce } from 'lodash'
+import { listAsset, Visibility, type AssetData, type AssetType } from '@/apis/asset'
+import { ownerAll } from '@/apis/common'
+
+export function useAssetSuggestions(type: AssetType, keyword: WatchSource<string>, enabled: WatchSource<boolean>) {
+  const _keyword = ref('')
+  const suggestions = shallowRef<AssetData[]>([])
+  const isLoading = ref(false)
+  const selected = shallowRef<AssetData | null>(null)
+  let abortCtrl: AbortController | null = null
+
+  const doSearch = debounce(async (kw: string) => {
+    abortCtrl?.abort()
+    const ctrl = new AbortController()
+    abortCtrl = ctrl
+    isLoading.value = true
+    try {
+      const result = await listAsset(
+        {
+          keyword: kw,
+          type,
+          pageSize: 4,
+          pageIndex: 1,
+          visibility: Visibility.Public,
+          owner: ownerAll
+        },
+        ctrl.signal
+      )
+      _keyword.value = kw
+      suggestions.value = result.data
+      isLoading.value = false
+    } catch {
+      if (ctrl.signal.aborted) return
+      suggestions.value = []
+      isLoading.value = false
+    }
+  }, 500)
+
+  watch(
+    [keyword, enabled],
+    ([kw, isEnabled]) => {
+      _keyword.value = ''
+      suggestions.value = []
+      selected.value = null
+      if (!isEnabled || kw.trim() === '') {
+        doSearch.cancel()
+        abortCtrl?.abort()
+        abortCtrl = null
+        isLoading.value = false
+        return
+      }
+      doSearch(kw.trim())
+    },
+    { immediate: true }
+  )
+
+  function toggle(asset: AssetData) {
+    selected.value = selected.value?.id === asset.id ? null : asset
+  }
+
+  return { keyword: _keyword, suggestions, isLoading, selected, toggle }
+}
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
index ac70e8e221..0d81fcbb84 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { computedShallowReactive, useComputedDisposable } from '@/utils/utils'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
-import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import type { Sprite } from '@/models/spx/sprite'
-import { getSignedInUsername } from '@/stores/user'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import { useSignedInStateQuery } from '@/stores/user'
 import { cloudHelpers } from '@/models/common/cloud'
 import { provideLocalEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { EditorState } from '@/components/editor/editor-state'
@@ -16,15 +15,16 @@ import SpriteGenPhaseContent from './SpriteGenPhaseContent.vue'
 const props = defineProps<{
   gen: SpriteGen
   descriptionPlaceholder?: string
+  librarySearchEnabled?: boolean
 }>()
 
 const emit = defineEmits<{
   collapse: []
-  finished: [Sprite]
+  resolved: [Sprite]
 }>()
 
 const i18n = useI18n()
-const signedInUsername = computed(() => getSignedInUsername())
+const signedInStateQuery = useSignedInStateQuery()
 const { isOnline } = useNetwork()
 // Local cache is not really used in sprite gen, so a dummy implementation is sufficient.
 const localCache: ILocalCache = {
@@ -34,7 +34,7 @@ const localCache: ILocalCache = {
 }
 // We should override the state to avoid history operations caused by animation / costume changes within sprite gen.
 const editorStateInGen = useComputedDisposable(
-  () => new EditorState(i18n, props.gen.previewProject, isOnline, signedInUsername.value, cloudHelpers, localCache)
+  () => new EditorState(i18n, props.gen.previewProject, isOnline, signedInStateQuery, cloudHelpers, localCache)
 )
 const editorCtxInGen = computedShallowReactive(() => ({
   project: props.gen.previewProject,
@@ -49,9 +49,15 @@ provideLocalEditorCtx(editorCtxInGen)
     v-if="gen.contentPreparingState.status === 'finished'"
     :gen="gen"
     @collapse="emit('collapse')"
-    @finished="emit('finished', $event)"
+    @resolved="emit('resolved', $event)"
+  />
+  <SpriteGenPhaseSettings
+    v-else
+    :gen="gen"
+    :description-placeholder="descriptionPlaceholder"
+    :library-search-enabled="librarySearchEnabled"
+    @resolved="emit('resolved', $event)"
   />
-  <SpriteGenPhaseSettings v-else :gen="gen" :description-placeholder="descriptionPlaceholder" />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
index 1904bfe9e2..bd743a8cd2 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
@@ -1,31 +1,118 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import { UIModal, UIModalClose, useConfirmDialog, type ModalTransformOrigin } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import { useMessageHandle } from '@/utils/exception'
+import { AssetType } from '@/apis/asset'
 import type { Sprite } from '@/models/spx/sprite'
-import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
-import { UIFormModal } from '@/components/ui'
+import type { SpriteGen as SpriteGenModel } from '@/models/spx/gen/sprite-gen'
+import type { SpxProject } from '@/models/spx/project'
+import type { AssetGenModel } from '@/models/spx/common/asset'
+import { useAssetGen } from '../use-asset-gen'
 import SpriteGenComp from './SpriteGen.vue'
 
-defineProps<{
-  visible: boolean
-  gen: SpriteGen
-}>()
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    project: SpxProject
+    gen?: SpriteGenModel
+    genCollapseHandler: (gen: AssetGenModel, isNewGen?: boolean) => Promise<ModalTransformOrigin | null>
+  }>(),
+  {
+    gen: undefined
+  }
+)
 
 const emit = defineEmits<{
   resolved: [Sprite]
   cancelled: []
 }>()
+
+const i18n = useI18n()
+const confirm = useConfirmDialog()
+
+const typeRef = computed(() => (props.gen != null ? null : AssetType.Sprite))
+const { assetGen: internalGen, keepAlive } = useAssetGen(props.project, typeRef)
+const activeGen = computed(() => props.gen ?? internalGen.value)
+
+const modalRef = ref<InstanceType<typeof UIModal> | null>(null)
+
+async function handleGenCollapse() {
+  const gen = activeGen.value
+  if (gen == null) throw new Error('sprite gen expected')
+  if (props.gen == null) {
+    keepAlive(gen)
+  }
+  const transformOrigin = await props.genCollapseHandler(gen, props.gen == null)
+  if (modalRef.value != null && transformOrigin != null) {
+    modalRef.value.setTransformOrigin(transformOrigin)
+  }
+  emit('cancelled')
+}
+
+const handleModalClose = useMessageHandle(
+  async () => {
+    // If the gen is provided by props, it means the modal is controlled by an external gen,
+    // and closing the modal will not cancel the gen. So we only show confirmation when there
+    // is no external gen, which means closing the modal will cancel the gen and lose progress.
+    if (props.gen == null) {
+      await confirm({
+        title: i18n.t({ zh: '退出精灵生成？', en: 'Exit sprite generation?' }),
+        content: i18n.t({
+          zh: '当前内容不会被保存，确定要退出吗？',
+          en: 'Current progress will not be saved. Are you sure to exit?'
+        }),
+        confirmText: i18n.t({ en: 'Exit', zh: '退出' })
+      })
+    }
+    emit('cancelled')
+  },
+  { en: 'Failed to exit modal', zh: '退出失败' }
+).fn
 </script>
 
 <template>
-  <UIFormModal
+  <UIModal
+    ref="modalRef"
     :radar="{ name: 'Sprite generation modal', desc: 'Modal for sprite generation' }"
-    :title="$t({ zh: '生成精灵', en: 'Sprite Generator' })"
+    style="width: 1076px; height: 800px"
     :visible="visible"
-    :style="{ width: '1076px', height: '800px' }"
-    :body-style="{ flex: '1 1 0', padding: '0' }"
-    @update:visible="emit('cancelled')"
+    mask-closable
+    @update:visible="handleModalClose"
   >
-    <SpriteGenComp :gen="gen" @collapse="emit('cancelled')" @finished="emit('resolved', $event)" />
-  </UIFormModal>
+    <header class="header">
+      <h2 class="title">{{ $t({ zh: '生成精灵', en: 'Sprite Generator' }) }}</h2>
+      <UIModalClose class="close" @click="handleModalClose" />
+    </header>
+
+    <SpriteGenComp
+      v-if="activeGen != null"
+      class="sprite-gen"
+      :gen="activeGen"
+      library-search-enabled
+      @collapse="handleGenCollapse"
+      @resolved="emit('resolved', $event)"
+    />
+  </UIModal>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 56px;
+  border-bottom: 1px solid var(--ui-color-grey-400);
+
+  .title {
+    font-size: 16px;
+    color: var(--ui-color-title);
+  }
+}
+
+.sprite-gen {
+  flex: 1 1 0;
+  min-height: 0;
+}
+</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index 35f05649a9..77bba979ec 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -29,7 +29,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   collapse: []
-  finished: [Sprite]
+  resolved: [Sprite]
 }>()
 
 const selected = computed(() => {
@@ -179,7 +179,7 @@ const handleSubmit = useMessageHandle(
     props.gen.recordAdoption().catch((err) => {
       capture(err, 'failed to record sprite asset adoption')
     })
-    emit('finished', sprite)
+    emit('resolved', sprite)
   },
   {
     en: 'Failed to create sprite',
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index b2a6a421b8..e9aa678d4c 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -7,18 +7,35 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { UIButton } from '@/components/ui'
+import { AssetType } from '@/apis/asset'
+import type { Sprite } from '@/models/spx/sprite'
+import { asset2Sprite } from '@/models/spx/common/asset'
 import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { useMessageHandle } from '@/utils/exception'
 import { humanizeTimeLeft } from '../common/time-left'
 import LayoutWithPreview from '../common/LayoutWithPreview.vue'
 import ImagePreview from '../common/ImagePreview.vue'
 import ImageSelector from '../common/ImageSelector.vue'
+import AssetSuggestions from '../common/AssetSuggestions.vue'
+import { useAssetSuggestions } from '../common/use-asset-suggestions'
 import SpriteSettingsInput from './SpriteSettingsInput.vue'
 import SpriteImageItem from './SpriteImageItem.vue'
+import SpriteItem from '@/components/asset/library/SpriteItem.vue'
 
-const props = defineProps<{
-  gen: SpriteGen
-  descriptionPlaceholder?: string
+const props = withDefaults(
+  defineProps<{
+    gen: SpriteGen
+    descriptionPlaceholder?: string
+    librarySearchEnabled?: boolean
+  }>(),
+  {
+    descriptionPlaceholder: undefined,
+    librarySearchEnabled: false
+  }
+)
+
+const emit = defineEmits<{
+  resolved: [Sprite]
 }>()
 
 const canSubmit = computed(() => props.gen.image != null)
@@ -36,6 +53,30 @@ function handleImageSelect(index: number) {
   props.gen.setImageIndex(index)
   hasPreview.value = true
 }
+
+const isLibrarySearchEnabled = computed(
+  () => props.librarySearchEnabled && props.gen.imagesGenState.status === 'initial'
+)
+
+const {
+  keyword,
+  suggestions,
+  isLoading: isSuggestionsLoading,
+  selected: selectedAsset,
+  toggle: toggleSelectedAsset
+} = useAssetSuggestions(AssetType.Sprite, () => props.gen.settings.description, isLibrarySearchEnabled)
+
+const handleUseAsset = useMessageHandle(
+  async () => {
+    if (selectedAsset.value == null) throw new Error('no asset selected')
+    const sprite = await asset2Sprite(selectedAsset.value)
+    emit('resolved', sprite)
+  },
+  {
+    en: 'Failed to use asset',
+    zh: '使用素材失败'
+  }
+)
 </script>
 
 <template>
@@ -53,33 +94,48 @@ function handleImageSelect(index: number) {
         :gen="gen"
         :description-placeholder="descriptionPlaceholder"
       />
-      <ImageSelector
-        :state="gen.imagesGenState"
-        :selected="gen.imageIndex"
-        :disabled="handleSubmit.isLoading.value"
-        @select="handleImageSelect"
-      >
-        <template #loading-item>
-          <SpriteImageItem loading />
-        </template>
-        <template #item="{ file, active, onClick }">
-          <SpriteImageItem :file="file" :active="active" @click="onClick" />
-        </template>
-        <template #tip>
-          <template v-if="gen.imagesGenState.status === 'running'">
-            {{ $t({ en: `Generating sprites... `, zh: `正在生成精灵...` }) }}
-            {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+      <div class="select-area">
+        <AssetSuggestions
+          v-if="isLibrarySearchEnabled"
+          :type="AssetType.Sprite"
+          :loading="isSuggestionsLoading"
+          :keyword="keyword"
+          :suggestions="suggestions"
+          :selected="selectedAsset"
+          @toggle="toggleSelectedAsset"
+        >
+          <template #item="{ asset, selected, onClick }">
+            <SpriteItem :asset="asset" :selected="selected" @click="onClick" />
+          </template>
+        </AssetSuggestions>
+        <ImageSelector
+          :state="gen.imagesGenState"
+          :selected="gen.imageIndex"
+          :disabled="handleSubmit.isLoading.value"
+          @select="handleImageSelect"
+        >
+          <template #loading-item>
+            <SpriteImageItem loading />
+          </template>
+          <template #item="{ file, active, onClick }">
+            <SpriteImageItem :file="file" :active="active" @click="onClick" />
           </template>
-          <template v-else-if="gen.imagesGenState.status === 'finished'">
-            {{
-              $t({
-                en: 'Select the sprite you like the most, or generate new ones.',
-                zh: '选择你最喜欢的一个精灵，或者重新生成。'
-              })
-            }}
+          <template #tip>
+            <template v-if="gen.imagesGenState.status === 'running'">
+              {{ $t({ en: `Generating sprites... `, zh: `正在生成精灵...` }) }}
+              {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+            </template>
+            <template v-else-if="gen.imagesGenState.status === 'finished'">
+              {{
+                $t({
+                  en: 'Select the sprite you like the most, or generate new ones.',
+                  zh: '选择你最喜欢的一个精灵，或者重新生成。'
+                })
+              }}
+            </template>
           </template>
-        </template>
-      </ImageSelector>
+        </ImageSelector>
+      </div>
 
       <template #preview>
         <ImagePreview :file="gen.image" />
@@ -87,6 +143,19 @@ function handleImageSelect(index: number) {
     </LayoutWithPreview>
     <footer class="footer">
       <UIButton
+        v-if="selectedAsset != null"
+        v-radar="{
+          name: 'Use',
+          desc: 'Click to use the selected library asset'
+        }"
+        color="primary"
+        size="large"
+        @click="handleUseAsset.fn"
+      >
+        {{ $t({ en: 'Use', zh: '采用' }) }}
+      </UIButton>
+      <UIButton
+        v-else
         v-radar="{
           name: 'Next',
           desc: 'Click to proceed to the next phase of sprite generation (costume & animation generation)'
@@ -96,8 +165,9 @@ function handleImageSelect(index: number) {
         :disabled="!canSubmit"
         :loading="handleSubmit.isLoading.value"
         @click="handleSubmit.fn"
-        >{{ $t({ en: 'Next', zh: '下一步' }) }}</UIButton
       >
+        {{ $t({ en: 'Next', zh: '下一步' }) }}
+      </UIButton>
     </footer>
   </main>
 </template>
@@ -123,6 +193,10 @@ function handleImageSelect(index: number) {
       height: 300px;
     }
   }
+
+  .select-area {
+    min-height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
+  }
 }
 .footer {
   width: 100%;
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
index 1db68f5efb..fa76ac2686 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
@@ -73,8 +73,9 @@ const submitText = computed(() => {
         :loading="imageGenerating"
         @enrich="handleEnrich"
         @submit="handleSubmit"
-        >{{ $t(submitText) }}</EnrichableSubmitButton
       >
+        {{ $t(submitText) }}
+      </EnrichableSubmitButton>
     </template>
   </SettingsInput>
 </template>
diff --git a/spx-gui/src/components/asset/gen/use-asset-gen.ts b/spx-gui/src/components/asset/gen/use-asset-gen.ts
new file mode 100644
index 0000000000..2ee51495a1
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/use-asset-gen.ts
@@ -0,0 +1,48 @@
+import { type ShallowRef, shallowRef, watch, type Ref } from 'vue'
+import { useI18n } from '@/utils/i18n'
+import { AssetType } from '@/apis/asset'
+import type { SpxProject } from '@/models/spx/project'
+import type { AssetGenModel } from '@/models/spx/common/asset'
+import { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
+
+export function useAssetGen<T extends AssetType>(project: SpxProject, type: Ref<T | null>) {
+  const i18n = useI18n()
+  const assetGen = shallowRef(null) as ShallowRef<AssetGenModel<T> | null>
+
+  function createAssetGen(t: AssetType) {
+    if (t === AssetType.Sprite) return new SpriteGen(i18n, project)
+    if (t === AssetType.Backdrop) return new BackdropGen(i18n, project)
+    return null
+  }
+
+  watch(
+    type,
+    (t, _, onCleanup) => {
+      assetGen.value = (t != null ? createAssetGen(t) : null) as AssetGenModel<T> | null
+      onCleanup(() => {
+        assetGen.value?.cancel()
+        assetGen.value?.dispose()
+      })
+    },
+    { immediate: true }
+  )
+
+  /**
+   * Prevent assetGen from being canceled & disposed automatically.
+   * This is useful when the user chooses to collapse the generation process
+   * and we need to keep the assetGen instance alive and related tasks running.
+   */
+  function keepAlive(gen: AssetGenModel) {
+    if (assetGen.value !== gen) return
+    assetGen.value = null
+  }
+
+  function reset(t: AssetType) {
+    assetGen.value?.cancel()
+    assetGen.value?.dispose()
+    assetGen.value = createAssetGen(t) as AssetGenModel<T> | null
+  }
+
+  return { assetGen, keepAlive, reset }
+}
diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index 3b31efef4d..152454563e 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -5,7 +5,7 @@ import { parseScratchFileAssets } from '@/utils/scratch'
 import { stripExt } from '@/utils/path'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
-import { type AssetModel } from '@/models/spx/common/asset'
+import { type AssetGenModel, type AssetModel } from '@/models/spx/common/asset'
 import { fromNativeFile } from '@/models/common/file'
 import { type SpxProject } from '@/models/spx/project'
 import { Backdrop } from '@/models/spx/backdrop'
@@ -19,7 +19,7 @@ import { Costume } from '@/models/spx/costume'
 import type { Widget } from '@/models/spx/widget'
 import RenameModal from '../common/RenameModal.vue'
 import SoundRecorderModal from '../editor/stage/sound/SoundRecorderModal.vue'
-import { useEditorCtx } from '../editor/EditorContextProvider.vue'
+import { useEditorCtx, type EditorCtx } from '../editor/EditorContextProvider.vue'
 import { useCodeEditor, useRenameWarning, getResourceIdentifier } from '../editor/code-editor/spx-code-editor'
 import AssetLibraryModal from './library/AssetLibraryModal.vue'
 import AssetSaveModal from './library/AssetSaveModal.vue'
@@ -28,29 +28,51 @@ import PreprocessModal from './preprocessing/PreprocessModal.vue'
 import GroupCostumesModal from './animation/GroupCostumesModal.vue'
 import AssetLibraryManagementModal from './library/management/AssetLibraryManagementModal.vue'
 import SpriteGenModal from './gen/sprite/SpriteGenModal.vue'
+import BackdropGenModal from './gen/backdrop/BackdropGenModal.vue'
 import { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 
+function makeGenCollapseHandler(editorCtx: EditorCtx) {
+  return async (gen: AssetGenModel, isNewGen = true) => {
+    // Add the ongoing asset generation to the editor state when the generation is newly created and not yet added
+    if (gen instanceof SpriteGen) {
+      if (isNewGen) editorCtx.state.genState.addSprite(gen)
+      return editorCtx.state.genState.getSpritePos(gen)
+    } else if (gen instanceof BackdropGen) {
+      if (isNewGen) editorCtx.state.genState.addBackdrop(gen)
+      return editorCtx.state.genState.getBackdropPos(gen)
+    }
+    return null
+  }
+}
+
+export function useSpriteGenModal() {
+  const editorCtx = useEditorCtx()
+  const genCollapseHandler = makeGenCollapseHandler(editorCtx)
+  const invokeModal = useModal(SpriteGenModal)
+  return function invokeSpriteGenModal(project: SpxProject, gen?: SpriteGen) {
+    return invokeModal({ project, gen, genCollapseHandler })
+  }
+}
+
+export function useBackdropGenModal() {
+  const invokeModal = useModal(BackdropGenModal)
+  return function invokeBackdropGenModal(project: SpxProject, gen?: BackdropGen) {
+    return invokeModal({ project, gen })
+  }
+}
+
 export function useAddAssetFromLibrary() {
   const editorCtx = useEditorCtx()
+  const genCollapseHandler = makeGenCollapseHandler(editorCtx)
   const invokeAssetLibraryModal = useModal(AssetLibraryModal)
   return async function addAssetFromLibrary<T extends AssetType>(project: SpxProject, type: T) {
     return (await invokeAssetLibraryModal({
       project,
       type,
-      genCollapseHandler: async (gen) => {
-        // Add the ongoing asset generation to the editor state
-        if (gen instanceof SpriteGen) {
-          editorCtx.state.genState.addSprite(gen)
-          return editorCtx.state.genState.getSpritePos(gen)
-        } else if (gen instanceof BackdropGen) {
-          editorCtx.state.genState.addBackdrop(gen)
-          return editorCtx.state.genState.getBackdropPos(gen)
-        }
-        return null
-      }
+      genCollapseHandler
     })) as Array<AssetModel<T>>
   }
 }
@@ -368,13 +390,6 @@ export function useRenameWidget() {
   }
 }
 
-export function useSpriteGenModal() {
-  const invokeModal = useModal(SpriteGenModal)
-  return function spriteGenModal(spriteGen: SpriteGen) {
-    return invokeModal({ gen: spriteGen })
-  }
-}
-
 export function useRenameCostumeGen() {
   const invokeRenameModal = useModal(RenameModal)
   return async function renameCostumeGen(gen: CostumeGen) {
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index 9a8733c267..de85e6339d 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, h, ref, shallowReactive, shallowRef, watch, type Component, type CSSProperties } from 'vue'
+import { computed, ref, shallowReactive, shallowRef, watch, type Component, h } from 'vue'
 import {
   UITextInput,
   UIPagination,
@@ -18,13 +18,9 @@ import { useI18n } from '@/utils/i18n'
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
 import { type SpxProject } from '@/models/spx/project'
-import {
-  asset2Backdrop,
-  asset2Sound,
-  asset2Sprite,
-  type AssetGenModel,
-  type AssetModel
-} from '@/models/spx/common/asset'
+import { Sprite } from '@/models/spx/sprite'
+import { Backdrop } from '@/models/spx/backdrop'
+import { addAssetToProject, type AssetGenModel, type AssetModel } from '@/models/spx/common/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
 import { getAssetCategories } from './category'
@@ -38,6 +34,7 @@ import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { ownerAll } from '@/apis/common'
 import SpriteGenComp from '../gen/sprite/SpriteGen.vue'
 import BackdropGenComp from '../gen/backdrop/BackdropGen.vue'
+import { useAssetGen } from '../gen/use-asset-gen'
 
 import genAssetIcon from './gen-asset.svg?raw'
 import spriteBanner from './asset-library-sprite-banner.png'
@@ -91,36 +88,15 @@ const SettingsInput = computed<Component<{ gen: SpriteGen | BackdropGen }> | nul
     })[props.type]
 )
 
-const assetGen = shallowRef<AssetGenModel | null>(null)
-function createAssetGen(type: AssetType) {
-  return {
-    [AssetType.Sound]: null,
-    [AssetType.Sprite]: new SpriteGen(i18n, props.project),
-    [AssetType.Backdrop]: new BackdropGen(i18n, props.project)
-  }[type]
-}
-watch(
-  () => props.type,
-  (type, _, onCleanup) => {
-    assetGen.value = createAssetGen(type)
-    onCleanup(() => {
-      assetGen.value?.cancel()
-      assetGen.value?.dispose()
-    })
-  },
-  { immediate: true }
-)
+const typeRef = computed(() => props.type)
+const { assetGen, keepAlive, reset: resetAssetGen } = useAssetGen(props.project, typeRef)
 
-// Recreate assetGen when keyword changes to ensure fresh state for new searches.
+// When search results are empty, SettingsInput is shown inline and may modify assetGen state.
+// Reset assetGen on keyword change to avoid stale state if the user searches again without entering gen phase.
 // TODO: Recreating assetGen on every keyword change might be too frequent. Consider constructing it only when needed.
-watch(
-  () => keyword.value,
-  () => {
-    assetGen.value?.cancel()
-    assetGen.value?.dispose()
-    assetGen.value = createAssetGen(props.type)
-  }
-)
+watch(keyword, () => resetAssetGen(props.type))
+
+const backButtonVisible = computed(() => (assetGen.value != null ? assetGen.value.isPreparePhase : false))
 
 const headerStyle = computed(() => {
   const banner = {
@@ -133,40 +109,6 @@ const headerStyle = computed(() => {
   }
 })
 
-/**
- * Prevent assetGen from being cancelled & disposed automatically.
- * This is useful when the user chooses to collapse the generation process
- * and we need to keep the assetGen instance alive and related tasks running.
- */
-function keepAssetGenAlive(gen: AssetGenModel) {
-  if (assetGen.value !== gen) return
-  assetGen.value = null
-}
-
-const AssetGenComp = computed(() => {
-  const gen = assetGen.value
-  if (gen == null) return null
-  if (gen instanceof SpriteGen) {
-    return (props: CSSProperties) =>
-      h(SpriteGenComp, {
-        ...props,
-        gen,
-        descriptionPlaceholder: keyword.value.trim(),
-        onCollapse: handleGenCollapse,
-        onFinished: handleGenFinished
-      })
-  } else if (gen instanceof BackdropGen) {
-    return (props: CSSProperties) =>
-      h(BackdropGenComp, {
-        ...props,
-        gen: gen as BackdropGen,
-        descriptionPlaceholder: keyword.value.trim(),
-        onFinished: handleGenFinished
-      })
-  }
-  return null
-})
-
 const entityMessages = {
   [AssetType.Backdrop]: { en: 'backdrop', zh: '背景' },
   [AssetType.Sprite]: { en: 'sprite', zh: '精灵' },
@@ -236,36 +178,13 @@ const genSuggestionMessage = computed(() => {
 
 const selected = shallowReactive<AssetData[]>([])
 
-async function addAssetToProject(asset: AssetData) {
-  switch (asset.type) {
-    case AssetType.Sprite: {
-      const sprite = await asset2Sprite(asset)
-      props.project.addSprite(sprite)
-      await sprite.autoFit()
-      return sprite
-    }
-    case AssetType.Backdrop: {
-      const backdrop = await asset2Backdrop(asset)
-      props.project.stage.addBackdrop(backdrop)
-      return backdrop
-    }
-    case AssetType.Sound: {
-      const sound = await asset2Sound(asset)
-      props.project.addSound(sound)
-      return sound
-    }
-    default:
-      throw new Error('unknown asset type')
-  }
-}
-
 const handleConfirm = useMessageHandle(
   async () => {
     const action = {
       name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` }
     }
     const assetModels = await editorCtx.state.history.doAction(action, () =>
-      Promise.all(selected.map(addAssetToProject))
+      Promise.all(selected.map((asset) => addAssetToProject(asset, props.project)))
     )
     emit('resolved', assetModels)
   },
@@ -289,8 +208,6 @@ function handleGenStart() {
   isGenPhase.value = true
 }
 
-const backButtonVisible = computed(() => (assetGen.value != null ? assetGen.value.isPreparePhase : false))
-
 // Handle returning to the asset library: reset search criteria and recreate assetGen to prevent unexpected intermediate states.
 const handleBackToAssetLibrary = useMessageHandle(
   async () => {
@@ -306,9 +223,7 @@ const handleBackToAssetLibrary = useMessageHandle(
     searchInput.value = ''
     keyword.value = ''
     isGenPhase.value = false
-    assetGen.value?.cancel()
-    assetGen.value?.dispose()
-    assetGen.value = createAssetGen(props.type)
+    resetAssetGen(props.type)
   },
   {
     en: 'Failed to return to asset library',
@@ -320,7 +235,7 @@ const modalRef = ref<InstanceType<typeof UIModal> | null>()
 async function handleGenCollapse() {
   const gen = assetGen.value
   if (gen == null) throw new Error('asset gen expected')
-  keepAssetGenAlive(gen)
+  keepAlive(gen)
   const transformOrigin = await props.genCollapseHandler(gen)
   if (modalRef.value != null && transformOrigin != null) {
     modalRef.value.setTransformOrigin(transformOrigin)
@@ -328,41 +243,53 @@ async function handleGenCollapse() {
   emit('cancelled')
 }
 
-const handleGenFinished = useMessageHandle(
-  async () => {
-    const gen = assetGen.value
-    if (gen == null) throw new Error('asset gen expected')
+const handleGenResolved = useMessageHandle(
+  async (model: AssetModel) => {
     // Consider moving asset addition outside AssetLibraryModal for better separation of concerns.
     // However, this would introduce a delay between the modal close and assets addition, potentially degrading UX.
     // TODO: Review this trade-off
-    const added = await editorCtx.state.history.doAction(
-      {
-        name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` }
-      },
+    await editorCtx.state.history.doAction(
+      { name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` } },
       async () => {
-        if (gen instanceof SpriteGen) {
-          const sprite = gen.result
-          if (sprite == null) throw new Error('sprite generation not finished')
-          props.project.addSprite(sprite)
-          await sprite.autoFit()
-          return sprite
-        } else if (gen instanceof BackdropGen) {
-          const backdrop = gen.result
-          if (backdrop == null) throw new Error('backdrop generation not finished')
-          props.project.stage.addBackdrop(backdrop)
-          return backdrop
+        if (model instanceof Sprite) {
+          props.project.addSprite(model)
+          await model.autoFit()
+          return
+        }
+        if (model instanceof Backdrop) {
+          props.project.stage.addBackdrop(model)
         }
-        throw new Error('unknown asset type')
       }
     )
-    emit('resolved', [added])
+    emit('resolved', [model])
   },
-  {
-    en: 'Failed to generate asset',
-    zh: '素材生成失败'
-  }
+  { en: 'Failed to add asset', zh: '素材添加失败' }
 ).fn
 
+const AssetGenComp = computed(() => {
+  const gen = assetGen.value
+  if (gen == null) return null
+  if (gen instanceof SpriteGen) {
+    return (attrs: Record<string, unknown>) =>
+      h(SpriteGenComp, {
+        ...attrs,
+        gen,
+        descriptionPlaceholder: keyword.value.trim(),
+        onCollapse: handleGenCollapse,
+        onResolved: handleGenResolved
+      })
+  } else if (gen instanceof BackdropGen) {
+    return (attrs: Record<string, unknown>) =>
+      h(BackdropGenComp, {
+        ...attrs,
+        gen,
+        descriptionPlaceholder: keyword.value.trim(),
+        onResolved: handleGenResolved
+      })
+  }
+  return null
+})
+
 const confirm = useConfirmDialog()
 
 const handleModalClose = useMessageHandle(
@@ -431,8 +358,9 @@ const title = computed(() => {
               size="large"
               clearable
               :placeholder="$t({ zh: '搜索', en: 'Search' })"
-              ><template #prefix><UIIcon type="search" /></template
-            ></UITextInput>
+            >
+              <template #prefix><UIIcon type="search" /></template>
+            </UITextInput>
 
             <div class="recommended-buttons">
               <UIButton
@@ -442,8 +370,9 @@ const title = computed(() => {
                 color="white"
                 size="small"
                 @click="searchInput = [searchInput, $t(r.message)].filter(Boolean).join(' ')"
-                >{{ $t(r.message) }}</UIButton
               >
+                {{ $t(r.message) }}
+              </UIButton>
             </div>
           </header>
 
@@ -467,9 +396,14 @@ const title = computed(() => {
                     <div class="empty-tip">
                       <span>{{ $t({ zh: `没找到`, en: `No assets found for ` }) }}</span>
                       <span class="highlight">{{ $t({ zh: `“${keyword}”`, en: `"${keyword}"` }) }}</span>
-                      <span>{{
-                        $t({ zh: '相关的素材，不如让 AI 帮你生成一个？', en: '. Why not let AI generate one for you?' })
-                      }}</span>
+                      <span>
+                        {{
+                          $t({
+                            zh: '相关的素材，不如让 AI 帮你生成一个？',
+                            en: '. Why not let AI generate one for you?'
+                          })
+                        }}
+                      </span>
                     </div>
                     <SettingsInput
                       class="settings-input"
diff --git a/spx-gui/src/components/asset/library/AssetSaveModal.vue b/spx-gui/src/components/asset/library/AssetSaveModal.vue
index 56b8ede5a9..7522f4dba5 100644
--- a/spx-gui/src/components/asset/library/AssetSaveModal.vue
+++ b/spx-gui/src/components/asset/library/AssetSaveModal.vue
@@ -39,7 +39,7 @@ const emit = defineEmits<{
   resolved: []
 }>()
 
-const { data: signedInUser } = useSignedInUser()
+const signedInUser = useSignedInUser()
 
 const user = computed(() => {
   const u = signedInUser.value
diff --git a/spx-gui/src/components/common/ListResultWrapper.vue b/spx-gui/src/components/common/ListResultWrapper.vue
index 13d8740fb4..8d238fa420 100644
--- a/spx-gui/src/components/common/ListResultWrapper.vue
+++ b/spx-gui/src/components/common/ListResultWrapper.vue
@@ -13,7 +13,7 @@ import { UILoading, UIError, UIEmpty } from '@/components/ui'
 import type { ByPage } from '@/apis/common'
 
 const props = defineProps<{
-  queryRet: QueryRet<T>
+  queryRet: QueryRet<T | null>
   height?: number
   /** Type of the list content */
   contentType?: 'project'
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index 01d2a00b18..f1cd948eb4 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -46,7 +46,7 @@ type Context = 'home' | 'user' | 'project'
 
 defineProps<{
   linkTo?: string | null
-  queryRet: QueryRet<unknown[]>
+  queryRet: QueryRet<unknown[] | null>
   context: Context
   numInRow: number
 }>()
diff --git a/spx-gui/src/components/community/project/ReleaseHistory.vue b/spx-gui/src/components/community/project/ReleaseHistory.vue
index f2f5afd4ef..bf82076720 100644
--- a/spx-gui/src/components/community/project/ReleaseHistory.vue
+++ b/spx-gui/src/components/community/project/ReleaseHistory.vue
@@ -6,7 +6,7 @@ import { UITimeline, UITimelineItem, UILoading, UIError } from '@/components/ui'
 import TextView from '../TextView.vue'
 
 defineProps<{
-  queryRet: QueryRet<ProjectRelease[]>
+  queryRet: QueryRet<ProjectRelease[] | null>
 }>()
 </script>
 
diff --git a/spx-gui/src/components/community/user/FollowButton.vue b/spx-gui/src/components/community/user/FollowButton.vue
index 522fb733db..cec3736fe0 100644
--- a/spx-gui/src/components/community/user/FollowButton.vue
+++ b/spx-gui/src/components/community/user/FollowButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getSignedInUsername } from '@/stores/user'
+import { useSignedInUser } from '@/stores/user'
 import { UIButton } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { useEnsureSignedIn } from '@/utils/user'
@@ -11,8 +11,9 @@ const props = defineProps<{
   name: string
 }>()
 
+const signedInUser = useSignedInUser()
 const followable = computed(() => {
-  const signedInUsername = getSignedInUsername()
+  const signedInUsername = signedInUser.value?.username
   return signedInUsername != null && props.name !== signedInUsername
 })
 
diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue
index 4e39a084f2..7ca1098b19 100644
--- a/spx-gui/src/components/community/user/UserHeader.vue
+++ b/spx-gui/src/components/community/user/UserHeader.vue
@@ -4,8 +4,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { type User } from '@/apis/user'
 import { useAvatarUrl } from '@/stores/user/avatar'
 import { useMessageHandle } from '@/utils/exception'
-import { getSignedInUsername } from '@/stores/user'
-import { UIButton, UIImg, useModal } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import { timeout } from '@/utils/utils'
+import { initiateSignIn, useSignedInUser } from '@/stores/user'
+import { UIButton, UIImg, useMessage, useModal } from '@/components/ui'
 import CommunityCard from '@/components/community/CommunityCard.vue'
 import TextView from '../TextView.vue'
 import FollowButton from './FollowButton.vue'
@@ -13,7 +15,6 @@ import UserJoinedAt from './UserJoinedAt.vue'
 import EditProfileModal from './EditProfileModal.vue'
 import UserUsernameInline from './UserUsernameInline.vue'
 import { getCoverImgUrl } from './cover'
-import { getUserPageRoute } from '@/router'
 
 const props = defineProps<{
   user: User
@@ -21,31 +22,45 @@ const props = defineProps<{
 
 const router = useRouter()
 const route = useRoute()
-const isSignedInUser = computed(() => props.user.username === getSignedInUsername())
+const signedInUser = useSignedInUser()
+const isSignedInUser = computed(() => props.user.username === signedInUser.value?.username)
 const avatarUrl = useAvatarUrl(() => props.user.avatar)
 const coverImgUrl = computed(() => getCoverImgUrl(props.user.username))
 
 const invokeEditProfileModal = useModal(EditProfileModal)
 
-function replaceCurrentUserRoute(oldUsername: string, newUsername: string) {
-  if (oldUsername === newUsername) return
-  if (route.params.name !== oldUsername) return
-
-  const oldBasePath = getUserPageRoute(oldUsername)
-  if (!route.path.startsWith(oldBasePath)) return
-
-  router.replace({
-    path: `${getUserPageRoute(newUsername)}${route.path.slice(oldBasePath.length)}`,
-    query: route.query,
-    hash: route.hash
-  })
-}
+const i18n = useI18n()
+const message = useMessage()
+
+const handleUsernameUpdated = useMessageHandle(
+  async (newUsername: string) => {
+    await router.replace({
+      params: {
+        nameInput: newUsername
+      },
+      query: route.query,
+      hash: route.hash
+    })
+    message.success(
+      i18n.t({
+        en: 'Username updated successfully. Redirecting to the sign-in page...',
+        zh: '用户名更新成功。正在重定向到登录页面...'
+      })
+    )
+    await timeout(2000)
+    initiateSignIn()
+  },
+  {
+    en: 'Failed to redirect after username update',
+    zh: '用户名更新后重定向失败'
+  }
+).fn
 
 const handleEditProfile = useMessageHandle(
   async () => {
     const oldUsername = props.user.username
     const updated = await invokeEditProfileModal({ user: props.user })
-    replaceCurrentUserRoute(oldUsername, updated.username)
+    if (oldUsername !== updated.username) return handleUsernameUpdated(updated.username)
   },
   {
     en: 'Failed to update profile',
diff --git a/spx-gui/src/components/community/user/index.ts b/spx-gui/src/components/community/user/index.ts
index 1fe333ca99..07fffd7f2d 100644
--- a/spx-gui/src/components/community/user/index.ts
+++ b/spx-gui/src/components/community/user/index.ts
@@ -2,6 +2,11 @@ import { useModal } from '@/components/ui'
 import ModificationWarningModal from '@/components/common/ModificationWarningModal.vue'
 import ModifyUsernameModal from './ModifyUsernameModal.vue'
 
+/**
+ * Modify username for the signed-in user.
+ * NOTE: The signed-in user will be signed out after modifying the username.
+ * Typically the caller may want to reload the route to trigger navigation guards or initiate sign-in manually.
+ */
 export function useModifyUsername() {
   const warningModal = useModal(ModificationWarningModal)
   const modifyUsernameModal = useModal(ModifyUsernameModal)
@@ -12,6 +17,10 @@ export function useModifyUsername() {
       title: { en: 'Modify username', zh: '修改用户名' },
       tip: { en: 'Modifying the username may have the following impacts.', zh: '修改用户名可能造成以下影响。' },
       items: [
+        {
+          en: 'You will be signed out and need to sign in again to continue your work.',
+          zh: '您将会被登出，需要重新登录才能继续使用。'
+        },
         {
           en: 'Your profile page URL will change, and existing links to your profile may no longer work.',
           zh: '您的个人主页 URL 将会变更，原有主页链接可能无法继续访问。'
diff --git a/spx-gui/src/components/copilot/CopilotRoot.vue b/spx-gui/src/components/copilot/CopilotRoot.vue
index be61eeb463..16359c2af7 100644
--- a/spx-gui/src/components/copilot/CopilotRoot.vue
+++ b/spx-gui/src/components/copilot/CopilotRoot.vue
@@ -2,7 +2,7 @@
 import { z } from 'zod'
 import dayjs from 'dayjs'
 import { debounce } from 'lodash'
-import { onBeforeUnmount, onMounted, onUnmounted, watch, type ComputedRef } from 'vue'
+import { onBeforeUnmount, onMounted, onUnmounted, toValue, watch, type ComputedRef, type WatchSource } from 'vue'
 import { useRouter, type Router } from 'vue-router'
 import { useRadar, type Radar, type RadarNodeInfo } from '@/utils/radar'
 import { useI18n, type I18n } from '@/utils/i18n'
@@ -11,7 +11,6 @@ import { useIsRouteLoaded } from '@/utils/route-loading'
 import * as projectApis from '@/apis/project'
 import type { Sprite } from '@/models/spx/sprite'
 import { SpxProject } from '@/models/spx/project'
-import { getSignedInUsername } from '@/stores/user'
 import { useModalEvents } from '@/components/ui/modal/UIModalProvider.vue'
 import { useEditorCtxRef, type EditorCtx } from '../editor/EditorContextProvider.vue'
 import {
@@ -29,6 +28,7 @@ import * as highlightLink from './custom-elements/HighlightLink.vue'
 import * as codeLink from './custom-elements/CodeLink'
 import * as codeChange from './custom-elements/CodeChange.vue'
 import { codeFilePathSchema, parseProjectIdentifier, projectIdentifierSchema } from './common'
+import { useSignedInStateQuery, type SignedInState } from '@/stores/user'
 import { userSessionStorageRef } from '@/utils/user-storage'
 import { cloudHelpers, type CloudHelpers } from '@/models/common/cloud'
 import { provideCopilot } from './context'
@@ -68,7 +68,7 @@ class Retriever {
     if (currentProject != null && currentProject.owner === owner && currentProject.name === name) {
       return currentProject
     }
-    const p = new SpxProject(owner, name)
+    const p = new SpxProject()
     const serialized = await this.cloudHelpers.load(owner, name, true, signal)
     await p.load(serialized)
     return p
@@ -298,12 +298,16 @@ If there's an API References UI in code editor, encourage the user to insert cod
 }
 
 class UserContextProvider implements ICopilotContextProvider {
+  constructor(private signedInState: WatchSource<SignedInState | null>) {}
+
   provideContext(): string {
-    const signedInUsername = getSignedInUsername()
+    const signedInState = toValue(this.signedInState)
     const userInfo =
-      signedInUsername != null
-        ? `Now the user is signed in with name "${signedInUsername}"`
-        : 'The user is not signed in'
+      signedInState == null
+        ? 'The signed-in state is still loading'
+        : signedInState.isSignedIn
+          ? `Now the user is signed in with name "${signedInState.user.username}"`
+          : 'The user is not signed in'
     return `# Current user
 ${userInfo}`
   }
@@ -409,6 +413,7 @@ const modalEvents = useModalEvents()
 const messageEvents = useMessageEvents()
 const editorCtxRef = useEditorCtxRef()
 const codeEditorRef = useCodeEditorRef()
+const signedInStateQuery = useSignedInStateQuery()
 const retriever = new Retriever(editorCtxRef, cloudHelpers)
 const copilot = new Copilot()
 onUnmounted(() => copilot.dispose())
@@ -450,7 +455,7 @@ copilot.registerCustomElement({
 
 copilot.registerTool(new GetUINodeTextContentTool(radar))
 copilot.registerContextProvider(new UIContextProvider(radar, i18n))
-copilot.registerContextProvider(new UserContextProvider())
+copilot.registerContextProvider(new UserContextProvider(signedInStateQuery.data))
 copilot.registerContextProvider(new LocationContextProvider(router))
 copilot.registerContextProvider(new ProjectContextProvider(editorCtxRef))
 copilot.registerContextProvider(new SpriteContextProvider(editorCtxRef))
diff --git a/spx-gui/src/components/copilot/CopilotUI.vue b/spx-gui/src/components/copilot/CopilotUI.vue
index d653335a77..b9c4e0653f 100644
--- a/spx-gui/src/components/copilot/CopilotUI.vue
+++ b/spx-gui/src/components/copilot/CopilotUI.vue
@@ -29,8 +29,9 @@ import { useRouter } from 'vue-router'
 
 import { isRectIntersecting, useBottomSticky, useContentSize } from '@/utils/dom'
 import { assertNever, localStorageRef, timeout, untilNotNull } from '@/utils/utils'
+import { untilLoaded } from '@/utils/query'
 import { useMessageHandle } from '@/utils/exception'
-import { getSignedInUsername, isSignedIn } from '@/stores/user'
+import { isSignedIn, useSignedInStateQuery } from '@/stores/user'
 import { useDraggable, type Offset } from '@/utils/draggable'
 import { providePopupContainer, UIButton, UITooltip } from '@/components/ui'
 import CopilotInput from './CopilotInput.vue'
@@ -397,7 +398,7 @@ onBeforeUnmount(
 )
 
 // Copilot open handling, implemented here due to high business logic coupling
-const signedInUsername = computed(() => getSignedInUsername())
+const signedInStateQuery = useSignedInStateQuery()
 const usedCopilotUsersRef = localStorageRef<string[]>('spx-gui-used-copilot-users', [])
 watch(
   router.currentRoute,
@@ -411,12 +412,17 @@ watch(
     immediate: true
   }
 )
-/**
- * Records that the current user has used Copilot when the specified condition is met.
- */
-function recordCopilotUsage(shouldRecord: () => boolean) {
-  if (signedInUsername.value == null) return
-  const username = signedInUsername.value
+/** Whether the current user has not used Copilot. */
+const copilotNotUsed = computed(() => {
+  const signedInState = signedInStateQuery.data.value
+  if (signedInState == null) return false
+  return !signedInState.isSignedIn || !usedCopilotUsersRef.value.includes(signedInState.user.username)
+})
+/** Records that the current user has used Copilot when the specified condition is met. */
+async function recordCopilotUsage(shouldRecord: () => boolean) {
+  const signedInState = await untilLoaded(signedInStateQuery)
+  if (!signedInState.isSignedIn) return
+  const { username } = signedInState.user
   const userUsedCopilot = usedCopilotUsersRef.value
   // Skip if condition is not met or user has already been recorded
   if (!shouldRecord() || userUsedCopilot.includes(username)) return
@@ -433,9 +439,10 @@ watch(
   (active) => recordCopilotUsage(() => !active)
 )
 /** Open copilot for signed-in users on their first copilot use */
-onMounted(() => {
-  const username = signedInUsername.value
-  if (username == null || usedCopilotUsersRef.value.includes(username)) return
+onMounted(async () => {
+  const signedInState = await untilLoaded(signedInStateQuery)
+  if (!signedInState.isSignedIn) return
+  if (usedCopilotUsersRef.value.includes(signedInState.user.username)) return
   copilot.open()
 })
 </script>
@@ -539,7 +546,7 @@ onMounted(() => {
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path d="M12 12.6667V3.33333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                 <path
-                  :class="{ arrow: signedInUsername == null || !usedCopilotUsersRef.includes(signedInUsername) }"
+                  :class="{ animating: copilotNotUsed }"
                   d="M3.33301 3.33334L8.66634 8L3.33301 12.6667"
                   stroke-width="1.33333"
                   stroke-linecap="round"
@@ -830,7 +837,7 @@ $toColor: #c390ff;
       }
     }
 
-    .arrow {
+    .animating {
       animation: nudge 0.5s ease-in-out infinite alternate;
     }
 
diff --git a/spx-gui/src/components/copilot/UserMessage.vue b/spx-gui/src/components/copilot/UserMessage.vue
index 94bd278cbb..26fe90514f 100644
--- a/spx-gui/src/components/copilot/UserMessage.vue
+++ b/spx-gui/src/components/copilot/UserMessage.vue
@@ -9,7 +9,7 @@ defineProps<{
 }>()
 
 const signedInUser = useSignedInUser()
-const avatarUrl = useAvatarUrl(() => signedInUser.data.value?.avatar)
+const avatarUrl = useAvatarUrl(() => signedInUser.value?.avatar)
 </script>
 
 <template>
diff --git a/spx-gui/src/components/editor/editing.test.ts b/spx-gui/src/components/editor/editing.test.ts
index 854f601516..fa856f895e 100644
--- a/spx-gui/src/components/editor/editing.test.ts
+++ b/spx-gui/src/components/editor/editing.test.ts
@@ -4,10 +4,14 @@ import { flushPromises } from '@vue/test-utils'
 import { timeout } from '@/utils/utils'
 import { Cancelled } from '@/utils/exception'
 import { ProgressReporter } from '@/utils/progress'
+import type { QueryRet } from '@/utils/query'
+import { Visibility, type ProjectData } from '@/apis/project'
 import { type Files } from '@/models/common/file'
-import type { CloudHelpers } from '@/models/common/cloud'
+import type { CloudHelpers, PreferPublishedContent } from '@/models/common/cloud'
 import { mockFile, MockProject } from '@/models/common/test'
-import type { IProject, ProjectSerialized } from '@/models/project'
+import type { IProject, Metadata, ProjectSerialized } from '@/models/project'
+import { makeSignedInState, makeSignedInStateQuery } from '@/stores/user/test'
+import type { SignedInState } from '@/stores/user'
 import { Editing, SavingState, EditingMode, type ILocalCache, type UIHelpersForLoadingProject } from './editing'
 
 function makeFiles() {
@@ -30,9 +34,43 @@ function makeProject({
   return new MockProject(owner, name, files)
 }
 
+function makeCloudSerialized(owner: string, name: string, version: number = 1): ProjectSerialized<Metadata> {
+  return {
+    metadata: {
+      id: 'project-id',
+      createdAt: '2025-01-01T00:00:00Z',
+      updatedAt: '2025-01-01T00:00:00Z',
+      owner,
+      remixedFrom: null,
+      name,
+      displayName: name,
+      version,
+      visibility: Visibility.Private,
+      description: '',
+      instructions: '',
+      extraSettings: {},
+      thumbnail: null,
+      viewCount: 0,
+      likeCount: 0,
+      releaseCount: 0,
+      remixCount: 0,
+      aiDescription: null,
+      aiDescriptionHash: null
+    },
+    files: { 'main.spx': mockFile('main.spx') }
+  }
+}
+
+function makeLocalSerialized(owner: string, name: string, version?: number): ProjectSerialized {
+  return {
+    metadata: { owner, name, version },
+    files: { 'main.spx': mockFile('main.spx') }
+  }
+}
+
 function makeCloudHelper(): CloudHelpers {
   return {
-    load: vi.fn().mockResolvedValue({ metadata: {}, files: {} }),
+    load: vi.fn().mockResolvedValue(makeCloudSerialized('owner', 'project')),
     save: vi.fn().mockResolvedValue({ metadata: {}, files: {} })
   }
 }
@@ -54,15 +92,26 @@ function makeEditing({
   isOnline = () => true,
   cloudHelper = makeCloudHelper(),
   localCacheHelper = makeLocalCache(),
-  signedInUsername = project.owner ?? null
+  signedInStateQuery = makeSignedInStateQuery(makeSignedInState(project.owner ?? null))
 }: Partial<{
   project: IProject
   isOnline: WatchSource<boolean>
   cloudHelper: CloudHelpers
   localCacheHelper: ILocalCache
-  signedInUsername: string | null
+  signedInStateQuery: QueryRet<SignedInState>
 }>) {
-  return new Editing(project, cloudHelper, localCacheHelper, isOnline, signedInUsername)
+  return new Editing(project, cloudHelper, localCacheHelper, isOnline, signedInStateQuery)
+}
+
+// Extract the latest preferPublishedContent argument passed to cloudHelper.load.
+function getLatestPreferPublishedContent(
+  load: CloudHelpers['load']
+): Exclude<NonNullable<Parameters<CloudHelpers['load']>[2]>, boolean> {
+  const preferPublishedContent = vi.mocked(load).mock.lastCall?.[2]
+  if (typeof preferPublishedContent !== 'function') {
+    throw new Error('preferPublishedContent function expected')
+  }
+  return preferPublishedContent
 }
 
 describe('Editing', () => {
@@ -196,7 +245,7 @@ describe('Editing', () => {
       project,
       localCacheHelper,
       cloudHelper,
-      signedInUsername: 'different-user' // Not the owner
+      signedInStateQuery: makeSignedInStateQuery(makeSignedInState('different-user')) // Not the owner
     })
     editing.startEditing()
 
@@ -221,6 +270,67 @@ describe('Editing', () => {
     expect(editing.saving).toBeNull()
   })
 
+  it('should update mode and trigger auto-save when signed-in username changes to owner', async () => {
+    const project = makeProject({ owner: 'project-owner' })
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
+    const signedInStateQuery = makeSignedInStateQuery(makeSignedInState('different-user'))
+    const editing = makeEditing({
+      project,
+      localCacheHelper,
+      cloudHelper,
+      signedInStateQuery
+    })
+    editing.startEditing()
+
+    expect(editing.mode).toBe(EditingMode.EffectFree)
+
+    project.setFile('file1.txt', mockFile('file1.txt updated'))
+    await flushPromises()
+    vi.advanceTimersByTime(autoSaveToCloudDelay)
+    await flushPromises()
+    expect(cloudHelper.save).toHaveBeenCalledTimes(0)
+
+    signedInStateQuery.data.value = makeSignedInState('project-owner')
+    await flushPromises()
+    expect(editing.mode).toBe(EditingMode.AutoSave)
+
+    vi.advanceTimersByTime(autoSaveToLocalCacheDelay)
+    await flushPromises()
+    expect(localCacheHelper.save).toHaveBeenCalledTimes(1)
+
+    vi.advanceTimersByTime(autoSaveToCloudDelay - autoSaveToLocalCacheDelay + 1)
+    await flushPromises()
+    expect(cloudHelper.save).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not trigger auto-save when mode changes without dirty files', async () => {
+    const project = makeProject({ owner: 'project-owner' })
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
+    const signedInStateQuery = makeSignedInStateQuery(makeSignedInState('different-user'))
+    const editing = makeEditing({
+      project,
+      localCacheHelper,
+      cloudHelper,
+      signedInStateQuery
+    })
+    editing.startEditing()
+
+    expect(editing.mode).toBe(EditingMode.EffectFree)
+
+    signedInStateQuery.data.value = makeSignedInState('project-owner')
+    await flushPromises()
+
+    expect(editing.mode).toBe(EditingMode.AutoSave)
+
+    vi.advanceTimersByTime(autoSaveToCloudDelay)
+    await flushPromises()
+    expect(localCacheHelper.save).toHaveBeenCalledTimes(0)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(0)
+    expect(editing.saving).toBeNull()
+  })
+
   it('should wait for online when during auto-save', async () => {
     const project = makeProject()
     const cloudHelper = makeCloudHelper()
@@ -284,15 +394,8 @@ describe('Editing.loadProject', () => {
     }
   }
 
-  function makeSerialized(owner: string, name: string, version?: number): ProjectSerialized {
-    return {
-      metadata: { owner, name, version },
-      files: { 'main.spx': mockFile('main.spx') }
-    }
-  }
-
   it('should load project from cloud when no local cache exists', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache()
@@ -301,14 +404,14 @@ describe('Editing.loadProject', () => {
     const editing = makeEditing({ project, cloudHelper, localCacheHelper })
 
     const ac = new AbortController()
-    await editing.loadProject(makeUIHelpers(), makeReporter(), ac.signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), ac.signal)
 
-    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', false, ac.signal)
+    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', expect.any(Function), ac.signal)
     expect(project.load).toHaveBeenCalledWith(cloudData, ac.signal)
   })
 
   it('should load project from cloud and clear local cache when local cache loading fails', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache()
@@ -318,16 +421,16 @@ describe('Editing.loadProject', () => {
     const editing = makeEditing({ project, cloudHelper, localCacheHelper })
 
     const ac = new AbortController()
-    await editing.loadProject(makeUIHelpers(), makeReporter(), ac.signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), ac.signal)
 
-    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', false, ac.signal)
+    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', expect.any(Function), ac.signal)
     expect(project.load).toHaveBeenCalledWith(cloudData, ac.signal)
     expect(localCacheHelper.clear).toHaveBeenCalled()
   })
 
   it('should prefer local cache when local version is newer than cloud version', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
-    const localData = makeSerialized('alice', 'my-project', 2)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const localData = makeLocalSerialized('alice', 'my-project', 2)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache(localData)
@@ -335,14 +438,14 @@ describe('Editing.loadProject', () => {
     const project = makeProject({ owner: 'alice', name: 'my-project' })
     const editing = makeEditing({ project, cloudHelper, localCacheHelper })
 
-    await editing.loadProject(makeUIHelpers(), makeReporter(), new AbortController().signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), new AbortController().signal)
 
     expect(project.load).toHaveBeenCalledWith(localData, expect.anything())
   })
 
   it('should prefer cloud data and clear cache when cloud version is newer', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 3)
-    const localData = makeSerialized('alice', 'my-project', 1)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 3)
+    const localData = makeLocalSerialized('alice', 'my-project', 1)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache(localData)
@@ -350,15 +453,15 @@ describe('Editing.loadProject', () => {
     const project = makeProject({ owner: 'alice', name: 'my-project' })
     const editing = makeEditing({ project, cloudHelper, localCacheHelper })
 
-    await editing.loadProject(makeUIHelpers(), makeReporter(), new AbortController().signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), new AbortController().signal)
 
     expect(project.load).toHaveBeenCalledWith(cloudData, expect.anything())
     expect(localCacheHelper.clear).toHaveBeenCalled()
   })
 
   it('should clear cache and load from cloud when cache owner mismatches', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
-    const localData = makeSerialized('bob', 'my-project', 2)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const localData = makeLocalSerialized('bob', 'my-project', 2)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache(localData)
@@ -366,15 +469,15 @@ describe('Editing.loadProject', () => {
     const project = makeProject({ owner: 'alice', name: 'my-project' })
     const editing = makeEditing({ project, cloudHelper, localCacheHelper })
 
-    await editing.loadProject(makeUIHelpers(), makeReporter(), new AbortController().signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), new AbortController().signal)
 
     expect(localCacheHelper.clear).toHaveBeenCalled()
     expect(project.load).toHaveBeenCalledWith(cloudData, expect.anything())
   })
 
   it('should clear cache and load from cloud when cache name mismatches', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
-    const localData = makeSerialized('alice', 'other-project', 2)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const localData = makeLocalSerialized('alice', 'other-project', 2)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache(localData)
@@ -385,16 +488,16 @@ describe('Editing.loadProject', () => {
     const helpers = makeUIHelpers()
     vi.mocked(helpers.confirmOpenTargetWithAnotherInCache).mockResolvedValue(true)
 
-    await editing.loadProject(helpers, makeReporter(), new AbortController().signal)
+    await editing.loadProject('alice', 'my-project', helpers, makeReporter(), new AbortController().signal)
 
     expect(helpers.confirmOpenTargetWithAnotherInCache).toHaveBeenCalledWith('my-project', 'other-project')
     expect(localCacheHelper.clear).toHaveBeenCalled()
     expect(project.load).toHaveBeenCalledWith(cloudData, expect.anything())
   })
 
-  it('should treat cache name with different casing as the same project', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
-    const localData = makeSerialized('alice', 'My-Project', 2)
+  it('should treat project name input with different casing as the same project after cloud resolution', async () => {
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const localData = makeLocalSerialized('alice', 'my-project', 2)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache(localData)
@@ -404,7 +507,7 @@ describe('Editing.loadProject', () => {
 
     const helpers = makeUIHelpers()
 
-    await editing.loadProject(helpers, makeReporter(), new AbortController().signal)
+    await editing.loadProject('alice', 'My-Project', helpers, makeReporter(), new AbortController().signal)
 
     expect(helpers.confirmOpenTargetWithAnotherInCache).not.toHaveBeenCalled()
     expect(localCacheHelper.clear).not.toHaveBeenCalled()
@@ -412,8 +515,8 @@ describe('Editing.loadProject', () => {
   })
 
   it('should open cached project and throw Cancelled when user chooses cached project over target', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
-    const localData = makeSerialized('alice', 'cached-project', 2)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const localData = makeLocalSerialized('alice', 'cached-project', 2)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache(localData)
@@ -424,54 +527,135 @@ describe('Editing.loadProject', () => {
     const helpers = makeUIHelpers()
     vi.mocked(helpers.confirmOpenTargetWithAnotherInCache).mockResolvedValue(false)
 
-    await expect(editing.loadProject(helpers, makeReporter(), new AbortController().signal)).rejects.toThrow(Cancelled)
+    await expect(
+      editing.loadProject('alice', 'my-project', helpers, makeReporter(), new AbortController().signal)
+    ).rejects.toThrow(Cancelled)
     expect(localCacheHelper.clear).not.toHaveBeenCalled()
     expect(helpers.openProject).toHaveBeenCalledWith('alice', 'cached-project')
     expect(project.load).not.toHaveBeenCalled()
   })
 
-  it('should throw when project has no owner or name', async () => {
+  it('should load project when the model starts without owner or name', async () => {
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const cloudHelper = makeCloudHelper()
+    vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const project = new MockProject(undefined, undefined, makeFiles())
-    const editing = makeEditing({ project })
+    const editing = makeEditing({
+      project,
+      cloudHelper,
+      signedInStateQuery: makeSignedInStateQuery(makeSignedInState('alice'))
+    })
 
-    await expect(editing.loadProject(makeUIHelpers(), makeReporter(), new AbortController().signal)).rejects.toThrow(
-      'Project owner and name expected'
-    )
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), new AbortController().signal)
+
+    expect(project.load).toHaveBeenCalledWith(cloudData, expect.anything())
+    expect(editing.mode).toBe(EditingMode.AutoSave)
   })
 
   it('should set preferPublishedContent to false when signed-in user is the owner', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache()
 
     const project = makeProject({ owner: 'alice', name: 'my-project' })
-    const editing = new Editing(project, cloudHelper, localCacheHelper, () => true, 'alice')
+    const editing = new Editing(
+      project,
+      cloudHelper,
+      localCacheHelper,
+      () => true,
+      makeSignedInStateQuery(makeSignedInState('alice'))
+    )
 
     const ac = new AbortController()
-    await editing.loadProject(makeUIHelpers(), makeReporter(), ac.signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), ac.signal)
 
-    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', false, ac.signal)
+    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', expect.any(Function), ac.signal)
+    const preferPublishedContent = getLatestPreferPublishedContent(cloudHelper.load)
+    await expect(preferPublishedContent({ owner: 'alice' } as ProjectData)).resolves.toBe(false)
   })
 
   it('should set preferPublishedContent to true when signed-in user is not the owner', async () => {
-    const cloudData = makeSerialized('alice', 'my-project', 1)
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache()
 
     const project = makeProject({ owner: 'alice', name: 'my-project' })
-    const editing = new Editing(project, cloudHelper, localCacheHelper, () => true, 'bob')
+    const editing = new Editing(
+      project,
+      cloudHelper,
+      localCacheHelper,
+      () => true,
+      makeSignedInStateQuery(makeSignedInState('bob'))
+    )
 
     const ac = new AbortController()
-    await editing.loadProject(makeUIHelpers(), makeReporter(), ac.signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), ac.signal)
 
-    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', true, ac.signal)
+    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', expect.any(Function), ac.signal)
+    const preferPublishedContent = getLatestPreferPublishedContent(cloudHelper.load)
+    await expect(preferPublishedContent({ owner: 'alice' } as ProjectData)).resolves.toBe(true)
+  })
+
+  it('should start loading from cloud before signed-in state resolves', async () => {
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const cloudHelper = makeCloudHelper()
+    vi.mocked(cloudHelper.load).mockImplementation(async (_owner, _name, preferPublishedContent) => {
+      expect(preferPublishedContent).toBeTypeOf('function')
+      await (preferPublishedContent as Exclude<PreferPublishedContent, boolean>)({ owner: 'alice' } as ProjectData)
+      return cloudData
+    })
+    const localCacheHelper = makeLocalCache()
+    const signedInStateQuery = makeSignedInStateQuery(null)
+    const project = makeProject({ owner: 'alice', name: 'my-project' })
+    const editing = new Editing(project, cloudHelper, localCacheHelper, () => true, signedInStateQuery)
+
+    const ac = new AbortController()
+    const loadPromise = editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), ac.signal)
+    await flushPromises()
+
+    expect(cloudHelper.load).toHaveBeenCalledWith('alice', 'my-project', expect.any(Function), ac.signal)
+    expect(project.load).not.toHaveBeenCalled()
+
+    signedInStateQuery.data.value = makeSignedInState('alice')
+    signedInStateQuery.isLoading.value = false
+
+    await loadPromise
+
+    const preferPublishedContent = getLatestPreferPublishedContent(cloudHelper.load)
+    await expect(preferPublishedContent({ owner: 'alice' } as ProjectData)).resolves.toBe(false)
+  })
+
+  it('should treat owner input with different casing as the same owner', async () => {
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const localData = makeLocalSerialized('alice', 'my-project', 2)
+    const cloudHelper = makeCloudHelper()
+    vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
+    const localCacheHelper = makeLocalCache(localData)
+
+    const project = new MockProject(undefined, undefined, makeFiles())
+    const editing = makeEditing({
+      project,
+      cloudHelper,
+      localCacheHelper,
+      signedInStateQuery: makeSignedInStateQuery(makeSignedInState('alice'))
+    })
+
+    const ac = new AbortController()
+    await editing.loadProject('Alice', 'my-project', makeUIHelpers(), makeReporter(), ac.signal)
+
+    expect(cloudHelper.load).toHaveBeenCalledWith('Alice', 'my-project', expect.any(Function), ac.signal)
+    const preferPublishedContent = getLatestPreferPublishedContent(cloudHelper.load)
+    await expect(preferPublishedContent({ owner: 'alice' } as ProjectData)).resolves.toBe(false)
+    expect(localCacheHelper.clear).not.toHaveBeenCalled()
+    expect(project.load).toHaveBeenCalledWith(localData, expect.anything())
+    expect(editing.mode).toBe(EditingMode.AutoSave)
   })
 
-  it('should prefer local cache when cloud version is undefined and local version is undefined', async () => {
-    const cloudData = makeSerialized('alice', 'my-project')
-    const localData = makeSerialized('alice', 'my-project')
+  it('should prefer local cache when cloud and local versions are equal', async () => {
+    const cloudData = makeCloudSerialized('alice', 'my-project', 1)
+    const localData = makeLocalSerialized('alice', 'my-project', 1)
     const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.load).mockResolvedValue(cloudData)
     const localCacheHelper = makeLocalCache(localData)
@@ -479,9 +663,9 @@ describe('Editing.loadProject', () => {
     const project = makeProject({ owner: 'alice', name: 'my-project' })
     const editing = makeEditing({ project, cloudHelper, localCacheHelper })
 
-    await editing.loadProject(makeUIHelpers(), makeReporter(), new AbortController().signal)
+    await editing.loadProject('alice', 'my-project', makeUIHelpers(), makeReporter(), new AbortController().signal)
 
-    // Both versions are undefined (-1 == -1), so cloudVersion > localVersion is false, local data wins
+    // Equal versions keep the local cache to preserve unsaved local work.
     expect(project.load).toHaveBeenCalledWith(localData, expect.anything())
   })
 })
diff --git a/spx-gui/src/components/editor/editing.ts b/spx-gui/src/components/editor/editing.ts
index d64b6e4f05..de4132a4d8 100644
--- a/spx-gui/src/components/editor/editing.ts
+++ b/spx-gui/src/components/editor/editing.ts
@@ -2,9 +2,12 @@ import { watchEffect, type WatchSource, watch, ref, shallowRef } from 'vue'
 import { Disposable, getCleanupSignal } from '@/utils/disposable'
 import { ProgressCollector, type ProgressReporter } from '@/utils/progress'
 import { timeout, until } from '@/utils/utils'
+import { untilLoaded, type QueryRet } from '@/utils/query'
 import { Cancelled, capture } from '@/utils/exception'
+import type { ProjectData } from '@/apis/project'
 import type { IProject, ProjectSerialized } from '@/models/project'
 import type { CloudHelpers } from '@/models/common/cloud'
+import type { SignedInState } from '@/stores/user'
 
 export enum SavingState {
   Pending,
@@ -110,19 +113,21 @@ export type UIHelpersForLoadingProject = {
  * renaming it with a more accurate name.
  */
 export class Editing extends Disposable {
-  mode: EditingMode
   constructor(
     private project: IProject,
     private cloudHelpers: CloudHelpers,
     private localCacheHelper: ILocalCache,
     private isOnline: WatchSource<boolean>,
-    private signedInUsername: string | null
+    private signedInStateQuery: QueryRet<SignedInState>
   ) {
     super()
-    this.mode = EditingMode.AutoSave
-    if (signedInUsername == null || signedInUsername !== this.project.owner) {
-      this.mode = EditingMode.EffectFree
-    }
+  }
+
+  get mode() {
+    const signedInState = this.signedInStateQuery.data.value
+    if (signedInState == null || !signedInState.isSignedIn) return EditingMode.EffectFree
+    if (this.project.owner == null || signedInState.user.username !== this.project.owner) return EditingMode.EffectFree
+    return EditingMode.AutoSave
   }
 
   private startAutoPreload() {
@@ -173,22 +178,25 @@ export class Editing extends Disposable {
 
   private startAutoSave() {
     this.addDisposer(
-      watch(
-        () => this.project.exportFiles(),
-        (_, __, onCleanup) => {
-          if (this.mode === EditingMode.EffectFree) return
+      watch([() => this.project.exportFiles(), () => this.mode], ([, mode], __, onCleanup) => {
+        if (mode === EditingMode.EffectFree || !this.dirty) return
 
-          const signal = getCleanupSignal(onCleanup)
-          const saving = new Saving(this.project, this.cloudHelpers, this.localCacheHelper, this.isOnline, signal)
+        const signal = getCleanupSignal(onCleanup)
+        const saving = new Saving(this.project, this.cloudHelpers, this.localCacheHelper, this.isOnline, signal)
 
-          this.savingRef.value = saving
-          signal.addEventListener('abort', () => (this.savingRef.value = null))
-        }
-      )
+        this.savingRef.value = saving
+        signal.addEventListener('abort', () => (this.savingRef.value = null))
+      })
     )
   }
 
-  async loadProject(helpers: UIHelpersForLoadingProject, reporter: ProgressReporter, signal: AbortSignal) {
+  async loadProject(
+    ownerInput: string,
+    projectNameInput: string,
+    helpers: UIHelpersForLoadingProject,
+    reporter: ProgressReporter,
+    signal: AbortSignal
+  ) {
     const collector = ProgressCollector.collectorFor(reporter)
     const loadFromLocalCacheReporter = collector.getSubReporter(
       { en: 'Reading local cache...', zh: '读取本地缓存中...' },
@@ -200,8 +208,14 @@ export class Editing extends Disposable {
     )
     const projectLoadReporter = collector.getSubReporter({ en: 'Loading project...', zh: '加载项目中...' }, 5)
 
-    const { owner: ownerName, name: projectName } = this.project
-    if (ownerName == null || projectName == null) throw new Error('Project owner and name expected')
+    const preferPublished = async (projectData: ProjectData) => {
+      const signedInState = await untilLoaded(this.signedInStateQuery, signal)
+      const ownedBySignedInUser = signedInState.isSignedIn && signedInState.user.username === projectData.owner
+      return !ownedBySignedInUser
+    }
+    const cloudData = await this.cloudHelpers.load(ownerInput, projectNameInput, preferPublished, signal)
+    signal.throwIfAborted()
+    loadFromCloudReporter.report(1)
 
     // For details about local-cache saving & restoring
     // https://github.com/goplus/builder/issues/259
@@ -215,25 +229,21 @@ export class Editing extends Disposable {
       this.localCacheHelper.clear().catch((e) => capture(e, 'Failed to clear local cache'))
     }
     if (localData != null) {
-      const localMetadata = localData.metadata
-      // If owner mismatch, ignore & clear the cached data
-      if (localMetadata.owner !== ownerName) {
+      const { owner: localOwner, name: localName } = localData.metadata
+      const { owner: cloudOwner, name: cloudName } = cloudData.metadata
+      // If no owner/name info or owner mismatch, ignore & clear the cached data
+      if (localOwner == null || localName == null || localOwner !== cloudOwner) {
         localData = null
         this.localCacheHelper.clear().catch((e) => capture(e, 'Failed to clear local cache'))
-      }
-      if (
-        localMetadata.owner === ownerName &&
-        localMetadata.name != null &&
-        localMetadata.name.toLowerCase() !== projectName.toLowerCase()
-      ) {
+      } else if (localName !== cloudName) {
         // If project name mismatch, ask user whether to open the cached project or not, to avoid potential data loss by clearing cache
-        const stillOpenTarget = await helpers.confirmOpenTargetWithAnotherInCache(projectName, localMetadata.name)
+        const stillOpenTarget = await helpers.confirmOpenTargetWithAnotherInCache(cloudName, localName)
         signal.throwIfAborted()
         if (stillOpenTarget) {
           localData = null
           this.localCacheHelper.clear().catch((e) => capture(e, 'Failed to clear local cache'))
         } else {
-          helpers.openProject(localMetadata.owner, localMetadata.name)
+          helpers.openProject(localOwner, localName)
           throw new Cancelled('Open another project')
         }
       }
@@ -241,13 +251,7 @@ export class Editing extends Disposable {
     signal.throwIfAborted()
     loadFromLocalCacheReporter.report(1)
 
-    // For projects not owned by the signed-in user, we prefer to load the published version.
-    const preferPublishedContent = this.signedInUsername !== ownerName
-    const cloudData = await this.cloudHelpers.load(ownerName, projectName, preferPublishedContent, signal)
-    signal.throwIfAborted()
-    loadFromCloudReporter.report(1)
-
-    let finalData = cloudData
+    let finalData: ProjectSerialized = cloudData
     if (localData != null) {
       const cloudVersion = cloudData?.metadata.version ?? -1
       const localVersion = localData.metadata.version ?? -1
diff --git a/spx-gui/src/components/editor/editor-state.test.ts b/spx-gui/src/components/editor/editor-state.test.ts
index 0d7315999a..dd517b4384 100644
--- a/spx-gui/src/components/editor/editor-state.test.ts
+++ b/spx-gui/src/components/editor/editor-state.test.ts
@@ -2,6 +2,7 @@ import { ref, type WatchSource } from 'vue'
 import { afterEach, beforeEach, describe, expect, vi, it } from 'vitest'
 import { flushPromises } from '@vue/test-utils'
 import { createI18n } from '@/utils/i18n'
+import type { QueryRet } from '@/utils/query'
 import { SpxProject } from '@/models/spx/project'
 import { Sprite } from '@/models/spx/sprite'
 import { Sound } from '@/models/spx/sound'
@@ -9,11 +10,12 @@ import { Backdrop } from '@/models/spx/backdrop'
 import { Monitor } from '@/models/spx/widget/monitor'
 import { Costume } from '@/models/spx/costume'
 import { Animation } from '@/models/spx/animation'
-import type * as editing from './editing'
-
-import { EditorState, type IRouter, type Selected } from './editor-state'
 import type { CloudHelpers } from '@/models/common/cloud'
 import { mockFile } from '@/models/common/test'
+import { makeSignedInState, makeSignedInStateQuery } from '@/stores/user/test'
+import type { SignedInState } from '@/stores/user'
+import type * as editing from './editing'
+import { EditorState, type IRouter, type Selected } from './editor-state'
 
 function makeCloudHelpers(): CloudHelpers {
   return {
@@ -32,12 +34,16 @@ function makeLocalCache(): editing.ILocalCache {
 
 function makeEmptyProject(): SpxProject {
   const project = new SpxProject()
+  project.owner = 'test-owner'
+  project.name = 'test-project'
   project.bindScreenshotTaker(async () => mockFile())
   return project
 }
 
 function makeProjectWithResources(): SpxProject {
   const project = new SpxProject()
+  project.owner = 'test-owner'
+  project.name = 'test-project'
 
   // Add sounds
   const sound1 = new Sound('sound1', mockFile())
@@ -93,10 +99,14 @@ function makeProjectWithResources(): SpxProject {
   return project
 }
 
-function makeRouter() {
-  const currentRoute = ref({
-    fullPath: '/',
-    params: {},
+function makeRouter(ownerNameInput = 'test-owner', projectNameInput = 'test-project') {
+  const currentRoute: IRouter['currentRoute'] = ref({
+    fullPath: `/editor/${ownerNameInput}/${projectNameInput}`,
+    params: {
+      ownerNameInput,
+      projectNameInput,
+      inEditorPath: []
+    },
     query: {},
     hash: ''
   })
@@ -110,11 +120,11 @@ function makeRouter() {
 function makeEditorState(
   project: SpxProject = makeEmptyProject(),
   isOnline: WatchSource<boolean> = ref(true),
-  signedInUsername: string | null = 'user',
+  signedInStateQuery: QueryRet<SignedInState> = makeSignedInStateQuery(makeSignedInState('user')),
   cloudHelpers: CloudHelpers = makeCloudHelpers(),
   localCache: editing.ILocalCache = makeLocalCache()
 ): EditorState {
-  return new EditorState(createI18n({ lang: 'en' }), project, isOnline, signedInUsername, cloudHelpers, localCache)
+  return new EditorState(createI18n({ lang: 'en' }), project, isOnline, signedInStateQuery, cloudHelpers, localCache)
 }
 
 describe('EditorState', () => {
@@ -473,7 +483,7 @@ describe('EditorState', () => {
     it('should sync selection to router correctly', async () => {
       const project = makeProjectWithResources()
       const editorState = makeEditorState(project)
-      const router = makeRouter()
+      const router = makeRouter(project.owner, project.name)
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -496,7 +506,7 @@ describe('EditorState', () => {
     it('should sync from router to selection correctly', async () => {
       const project = makeProjectWithResources()
       const editorState = makeEditorState(project)
-      const router = makeRouter()
+      const router = makeRouter(project.owner, project.name)
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -505,6 +515,7 @@ describe('EditorState', () => {
       router.currentRoute.value = {
         ...router.currentRoute.value,
         params: {
+          ...router.currentRoute.value.params,
           inEditorPath: ['sounds', 'sound2']
         }
       }
@@ -524,7 +535,7 @@ describe('EditorState', () => {
     it('should handle legacy bare sounds route correctly', async () => {
       const project = makeProjectWithResources()
       const editorState = makeEditorState(project)
-      const router = makeRouter()
+      const router = makeRouter(project.owner, project.name)
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -533,6 +544,7 @@ describe('EditorState', () => {
       router.currentRoute.value = {
         ...router.currentRoute.value,
         params: {
+          ...router.currentRoute.value.params,
           inEditorPath: ['sounds']
         }
       }
@@ -552,7 +564,7 @@ describe('EditorState', () => {
     it('should handle stage routes correctly', async () => {
       const project = makeProjectWithResources()
       const editorState = makeEditorState(project)
-      const router = makeRouter()
+      const router = makeRouter(project.owner, project.name)
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -561,6 +573,7 @@ describe('EditorState', () => {
       router.currentRoute.value = {
         ...router.currentRoute.value,
         params: {
+          ...router.currentRoute.value.params,
           inEditorPath: ['stage']
         }
       }
@@ -574,7 +587,7 @@ describe('EditorState', () => {
     it('should handle sprite sub-routes correctly', async () => {
       const project = makeProjectWithResources()
       const editorState = makeEditorState(project)
-      const router = makeRouter()
+      const router = makeRouter(project.owner, project.name)
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -583,6 +596,7 @@ describe('EditorState', () => {
       router.currentRoute.value = {
         ...router.currentRoute.value,
         params: {
+          ...router.currentRoute.value.params,
           inEditorPath: ['sprites', 'sprite1', 'costumes', 'costume2']
         }
       }
@@ -603,7 +617,7 @@ describe('EditorState', () => {
     it('should default to sprites route when no specific route provided', async () => {
       const project = makeProjectWithResources()
       const editorState = makeEditorState(project)
-      const router = makeRouter()
+      const router = makeRouter(project.owner, project.name)
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -612,6 +626,7 @@ describe('EditorState', () => {
       router.currentRoute.value = {
         ...router.currentRoute.value,
         params: {
+          ...router.currentRoute.value.params,
           inEditorPath: []
         }
       }
@@ -631,7 +646,7 @@ describe('EditorState', () => {
     it('should do replace instead of push when selected resource renamed', async () => {
       const project = makeProjectWithResources()
       const editorState = makeEditorState(project)
-      const router = makeRouter()
+      const router = makeRouter(project.owner, project.name)
 
       editorState.syncWithRouter(router)
       await flushPromises()
diff --git a/spx-gui/src/components/editor/editor-state.ts b/spx-gui/src/components/editor/editor-state.ts
index 4745940127..1191bce7ba 100644
--- a/spx-gui/src/components/editor/editor-state.ts
+++ b/spx-gui/src/components/editor/editor-state.ts
@@ -3,6 +3,7 @@ import type { RouteLocationAsRelativeGeneric, RouteLocationNormalizedGeneric } f
 import { shiftPath, type PathSegments } from '@/utils/route'
 import { Disposable } from '@/utils/disposable'
 import type { I18n } from '@/utils/i18n'
+import type { QueryRet } from '@/utils/query'
 import { CloudHelpers } from '@/models/common/cloud'
 import type { Files } from '@/models/common/file'
 import type { ResourceModel } from '@/models/spx/common/resource'
@@ -14,7 +15,8 @@ import { Backdrop } from '@/models/spx/backdrop'
 import { isWidget } from '@/models/spx/widget'
 import { Costume } from '@/models/spx/costume'
 import { Animation } from '@/models/spx/animation'
-import type { IProject, Metadata, ProjectSerialized } from '@/models/project'
+import type { IProject, PartialMetadata, ProjectSerialized } from '@/models/project'
+import type { SignedInState } from '@/stores/user'
 import { StageEditorState, type Selected as StageEditorSelected } from './stage/StageEditor.vue'
 import { SpriteEditorState, type Selected as SpriteEditorSelected } from './sprite/SpriteEditor.vue'
 import { Runtime } from './runtime'
@@ -59,7 +61,7 @@ class SpxProjectWithGens implements IProject {
   get name() {
     return this.project.name
   }
-  setMetadata(metadata: Metadata) {
+  setMetadata(metadata: PartialMetadata) {
     return this.project.setMetadata(metadata)
   }
   private filesComputed = computed(() => {
@@ -94,7 +96,7 @@ export class EditorState extends Disposable {
     i18n: I18n,
     readonly project: SpxProject,
     isOnline: WatchSource<boolean>,
-    signedInUsername: string | null,
+    signedInStateQuery: QueryRet<SignedInState>,
     cloudHelpers: CloudHelpers,
     localCache: editing.ILocalCache
   ) {
@@ -104,7 +106,7 @@ export class EditorState extends Disposable {
     this.addDisposable((this.genState = new GenState(i18n, project)))
     const projectWithGens = new SpxProjectWithGens(project, this.genState)
     this.addDisposable(
-      (this.editing = new editing.Editing(projectWithGens, cloudHelpers, localCache, isOnline, signedInUsername))
+      (this.editing = new editing.Editing(projectWithGens, cloudHelpers, localCache, isOnline, signedInStateQuery))
     )
     this.addDisposable(
       (this.stageState = new StageEditorState(
@@ -369,9 +371,11 @@ export class EditorState extends Disposable {
     this.addDisposer(
       watch(
         router.currentRoute,
-        (currentRoute) => {
-          const { inEditorPath, projectName } = currentRoute.params
-          if (projectName !== this.project.name) return // if project changed, do nothing. new `EditorState` instance will be constructed
+        (currentRoute, prevRoute) => {
+          const { inEditorPath, projectNameInput } = currentRoute.params
+          // if project changed, skip selecting. A new `EditorState` instance will be constructed later.
+          // Selecting on the old instance with new route may cause unexpected behavior.
+          if (prevRoute != null && projectNameInput !== prevRoute.params.projectNameInput) return
           const inEditorSections = typeof inEditorPath === 'string' ? [inEditorPath] : inEditorPath ?? []
           this.selectByRoute(inEditorSections)
         },
diff --git a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
index aa47cec234..252b0f7e71 100644
--- a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
@@ -3,13 +3,14 @@ import { computed, ref, watch } from 'vue'
 
 import type { SpxProject } from '@/models/spx/project'
 import type { Sprite } from '@/models/spx/sprite'
+import { AssetType } from '@/apis/asset'
 import { useMessageHandle } from '@/utils/exception'
 
 import { getCssVars, UICard, UIIcon, UIMenu, UIMenuItem, UITooltip, useUIVariables } from '@/components/ui'
-import SpriteList from '@/components/editor/sprite/SpriteList.vue'
+import { useAddAssetFromLibrary, useAddSpriteFromLocalFile, useSpriteGenModal } from '@/components/asset'
+import { useEditorCtx } from '../EditorContextProvider.vue'
+import SpriteList from '../sprite/SpriteList.vue'
 import PanelHeader from '../panels/common/PanelHeader.vue'
-import { useAddAssetFromLibrary, useAddSpriteFromLocalFile } from '@/components/asset'
-import { AssetType } from '@/apis/asset'
 import PanelFooter from '../panels/common/PanelFooter.vue'
 import SpriteBasicConfig from './SpriteBasicConfig.vue'
 
@@ -22,6 +23,8 @@ const emit = defineEmits<{
   'update:selectedSprite': [sprite: Sprite]
 }>()
 
+const editorCtx = useEditorCtx()
+
 const footerExpanded = ref(props.selectedSprite != null)
 watch(
   () => props.selectedSprite,
@@ -59,6 +62,22 @@ const handleAddFromAssetLibrary = useMessageHandle(
     zh: '从素材库添加失败'
   }
 ).fn
+
+const invokeSpriteGenModal = useSpriteGenModal()
+const handleGenerate = useMessageHandle(
+  async () => {
+    const sprite = await invokeSpriteGenModal(editorCtx.project)
+    await editorCtx.state.history.doAction({ name: { en: 'Add sprite', zh: '添加精灵' } }, async () => {
+      editorCtx.project.addSprite(sprite)
+      await sprite.autoFit()
+    })
+    handleSpriteClick(sprite)
+  },
+  {
+    en: 'Failed to generate sprite',
+    zh: '生成精灵失败'
+  }
+).fn
 </script>
 
 <template>
@@ -74,13 +93,21 @@ const handleAddFromAssetLibrary = useMessageHandle(
           <UIMenuItem
             v-radar="{ name: 'Add from local file', desc: 'Click to add sprite from local file' }"
             @click="handleAddFromLocalFile"
-            >{{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}</UIMenuItem
           >
+            {{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}
+          </UIMenuItem>
           <UIMenuItem
             v-radar="{ name: 'Add from asset library', desc: 'Click to add sprite from asset library' }"
             @click="handleAddFromAssetLibrary"
-            >{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}</UIMenuItem
           >
+            {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
+          </UIMenuItem>
+          <UIMenuItem
+            v-radar="{ name: 'Generate sprite', desc: 'Click to generate sprite with AI' }"
+            @click="handleGenerate"
+          >
+            {{ $t({ en: 'Generate with AI', zh: '使用 AI 生成' }) }}
+          </UIMenuItem>
         </UIMenu>
       </template>
     </PanelHeader>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index b2bcfe3147..1b6f0184ec 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -164,7 +164,7 @@ import { useNetwork } from '@/utils/network'
 import { selectFile } from '@/utils/file'
 import { convertScratchToXbp } from '@/apis/sb2xbp'
 import { type SpxProject } from '@/models/spx/project'
-import { getSignedInUsername, useUser } from '@/stores/user'
+import { useSignedInUser, useUser } from '@/stores/user'
 import { Visibility } from '@/apis/common'
 import { getProjectPageRoute } from '@/router'
 import { showTutorialsEntry } from '@/utils/env'
@@ -204,8 +204,9 @@ const { isOnline } = useNetwork()
 const i18n = useI18n()
 const router = useRouter()
 const confirm = useConfirmDialog()
+const signedInUser = useSignedInUser()
 const canManageProject = computed(() => {
-  const signedInUsername = getSignedInUsername()
+  const signedInUsername = signedInUser.value?.username
   if (signedInUsername == null || props.project == null) return false
   return props.project.owner === signedInUsername
 })
@@ -217,7 +218,7 @@ const selectedEditMode = computed(() => props.state?.selectedEditMode ?? EditMod
 const ownerInfoToDisplay = computed(() => {
   const owner = projectOwnerRet.data.value
   if (owner == null) return null
-  const signedInUsername = getSignedInUsername()
+  const signedInUsername = signedInUser.value?.username
   if (signedInUsername == null || signedInUsername !== owner.username) return owner
   return null
 })
@@ -332,8 +333,8 @@ const handleModifyProjectName = useMessageHandle(
       router.replace({
         params: {
           ...currentRoute.params,
-          ownerName: project.owner,
-          projectName: nextName
+          ownerNameInput: project.owner,
+          projectNameInput: nextName
         },
         query: currentRoute.query
       })
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index fa0f29af3c..b67c833eee 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -17,6 +17,12 @@
             >
               {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
             </UIMenuItem>
+            <UIMenuItem
+              v-radar="{ name: 'Generate sprite', desc: 'Click to generate sprite with AI' }"
+              @click="handleGenerate"
+            >
+              {{ $t({ en: 'Generate with AI', zh: '使用 AI 生成' }) }}
+            </UIMenuItem>
           </UIMenu>
         </template>
       </PanelHeader>
@@ -29,7 +35,7 @@
 import { computed } from 'vue'
 import { AssetType } from '@/apis/asset'
 import { useMessageHandle } from '@/utils/exception'
-import { useAddAssetFromLibrary, useAddSpriteFromLocalFile } from '@/components/asset'
+import { useAddAssetFromLibrary, useAddSpriteFromLocalFile, useSpriteGenModal } from '@/components/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { UIMenu, UIMenuItem, useUIVariables, getCssVars } from '@/components/ui'
 import SpriteList from '@/components/editor/sprite/SpriteList.vue'
@@ -66,6 +72,22 @@ const handleAddFromAssetLibrary = useMessageHandle(
     zh: '从素材库添加失败'
   }
 ).fn
+
+const invokeSpriteGenModal = useSpriteGenModal()
+const handleGenerate = useMessageHandle(
+  async () => {
+    const sprite = await invokeSpriteGenModal(editorCtx.project)
+    await editorCtx.state.history.doAction({ name: { en: 'Add sprite', zh: '添加精灵' } }, async () => {
+      editorCtx.project.addSprite(sprite)
+      await sprite.autoFit()
+    })
+    editorCtx.state.selectSprite(sprite.id)
+  },
+  {
+    en: 'Failed to generate sprite',
+    zh: '生成精灵失败'
+  }
+).fn
 </script>
 
 <style scoped lang="scss">
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 8941037c92..5f4000c148 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -166,6 +166,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { capture, useMessageHandle } from '@/utils/exception'
 import { useI18n, type LocaleMessage } from '@/utils/i18n'
 import { humanizeListWithLimit, untilNotNull } from '@/utils/utils'
+import { useSignedInUser } from '@/stores/user'
 import { UICard, UICardHeader, UIButton, useConfirmDialog, UITooltip } from '@/components/ui'
 import ProjectRunnerSurface from '@/components/project/runner/ProjectRunnerSurface.vue'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
@@ -180,11 +181,11 @@ import StageViewer from './stage-viewer/StageViewer.vue'
 import { useNetwork } from '@/utils/network'
 import { usePublishProject } from '@/components/project'
 import publishSvg from './publish.svg'
-import { getSignedInUsername } from '@/stores/user'
 
 const editorCtx = useEditorCtx()
 const codeEditor = useCodeEditor()
 const { isOnline } = useNetwork()
+const signedInUser = useSignedInUser()
 
 const runtime = computed(() => editorCtx.state.runtime)
 const runnerState = ref<'initial' | 'loading' | 'running'>('initial')
@@ -344,7 +345,7 @@ async function executeRun(action: 'run' | 'rerun') {
 
 const canManageProject = computed(() => {
   if (editorCtx.project == null) return false
-  const signedInUsername = getSignedInUsername()
+  const signedInUsername = signedInUser.value?.username
   if (signedInUsername == null) return false
   if (editorCtx.project.owner !== signedInUsername) return false
   return true
diff --git a/spx-gui/src/components/editor/sprite/SpriteList.vue b/spx-gui/src/components/editor/sprite/SpriteList.vue
index 8766964a3c..93f97b6ad0 100644
--- a/spx-gui/src/components/editor/sprite/SpriteList.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteList.vue
@@ -85,7 +85,7 @@ const invokeSpriteGenModal = useSpriteGenModal()
 
 const handleSpriteGenClick = useMessageHandle(
   async (gen: SpriteGen) => {
-    const result = await invokeSpriteGenModal(gen)
+    const result = await invokeSpriteGenModal(editorCtx.project, gen)
 
     // TODO: should disposal of gen be implemented in `useSpriteGenModal`?
     gen.dispose()
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
index 35d4de398e..823430c0f0 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
@@ -19,13 +19,21 @@
         <UIMenuItem
           v-radar="{ name: 'Add from local file', desc: 'Click to add backdrop from local file' }"
           @click="handleAddFromLocalFile"
-          >{{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}</UIMenuItem
         >
+          {{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}
+        </UIMenuItem>
         <UIMenuItem
           v-radar="{ name: 'Add from asset library', desc: 'Click to add backdrop from asset library' }"
           @click="handleAddFromAssetLibrary"
-          >{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}</UIMenuItem
         >
+          {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
+        </UIMenuItem>
+        <UIMenuItem
+          v-radar="{ name: 'Generate backdrop', desc: 'Click to generate backdrop with AI' }"
+          @click="handleGenerate"
+        >
+          {{ $t({ en: 'Generate with AI', zh: '使用 AI 生成' }) }}
+        </UIMenuItem>
       </UIMenu>
     </template>
     <template #detail>
@@ -76,7 +84,7 @@ import { capture, useMessageHandle } from '@/utils/exception'
 import { shiftPath, type PathSegments } from '@/utils/route'
 import type { Stage } from '@/models/spx/stage'
 import { Backdrop } from '@/models/spx/backdrop'
-import { useAddAssetFromLibrary, useAddBackdropFromLocalFile } from '@/components/asset'
+import { useAddAssetFromLibrary, useAddBackdropFromLocalFile, useBackdropGenModal } from '@/components/asset'
 import { AssetType } from '@/apis/asset'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import EditorList from '../../common/EditorList.vue'
@@ -121,6 +129,21 @@ const handleAddFromAssetLibrary = useMessageHandle(
   }
 ).fn
 
+const invokeBackdropGenModal = useBackdropGenModal()
+const handleGenerate = useMessageHandle(
+  async () => {
+    const backdrop = await invokeBackdropGenModal(editorCtx.project)
+    await editorCtx.state.history.doAction({ name: { en: 'Add backdrop', zh: '添加背景' } }, () => {
+      editorCtx.project.stage.addBackdrop(backdrop)
+    })
+    props.state.select(backdrop.id)
+  },
+  {
+    en: 'Failed to generate backdrop',
+    zh: '生成背景失败'
+  }
+).fn
+
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update backdrop order', zh: '更新背景顺序' } }
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index 3bb3dacf40..794a25f046 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div v-if="!signedInUser" class="sign-in">
+  <div v-if="!loading && signedInUser == null" class="sign-in">
     <UIButton
       v-radar="{ name: 'Sign-in button', desc: 'Click to sign in' }"
       class="sign-in-button"
@@ -86,7 +86,7 @@ import { useNetwork } from '@/utils/network'
 import { useMessageHandle } from '@/utils/exception'
 import { getUserPageRoute } from '@/router'
 import { AssetType } from '@/apis/asset'
-import { initiateSignIn, signOut, useSignedInUser } from '@/stores/user'
+import { initiateSignIn, signOut, useSignedInStateQuery } from '@/stores/user'
 import { useAvatarUrl } from '@/stores/user/avatar'
 import { UIButton, UIDropdown, UIMenu, UIMenuGroup, UIMenuItem, UITooltip } from '@/components/ui'
 import { useAssetLibraryManagement } from '@/components/asset'
@@ -102,7 +102,9 @@ const router = useRouter()
 const { controls } = useAgentCopilotCtx()
 const i18n = useI18n()
 
-const { data: signedInUser } = useSignedInUser()
+const signedInStateQuery = useSignedInStateQuery()
+const loading = computed(() => signedInStateQuery.isLoading.value)
+const signedInUser = computed(() => signedInStateQuery.data.value?.user ?? null)
 const avatarUrl = useAvatarUrl(() => signedInUser.value?.avatar)
 
 const handleAskCopilotAgent = useMessageHandle(
diff --git a/spx-gui/src/components/project/ProjectCreateModal.vue b/spx-gui/src/components/project/ProjectCreateModal.vue
index c59c899ce0..8685678a0a 100644
--- a/spx-gui/src/components/project/ProjectCreateModal.vue
+++ b/spx-gui/src/components/project/ProjectCreateModal.vue
@@ -51,8 +51,8 @@ import {
 import { getProject, addProject, Visibility, parseRemixSource } from '@/apis/project'
 import { useI18n } from '@/utils/i18n'
 import { useMessageHandle } from '@/utils/exception'
-import { untilNotNull } from '@/utils/utils'
-import { getSignedInUsername } from '@/stores/user'
+import { untilLoaded } from '@/utils/query'
+import { useSignedInStateQuery } from '@/stores/user'
 import { ApiException, ApiExceptionCode } from '@/apis/common/exception'
 import { cloudHelpers } from '@/models/common/cloud'
 import { xbpHelpers } from '@/models/common/xbp'
@@ -70,7 +70,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const signedInUsername = computed(() => getSignedInUsername())
+const signedInStateQuery = useSignedInStateQuery()
 const title = computed(() => {
   if (props.remixSource == null) return { en: 'Create a new project', zh: '创建新的项目' }
   return { en: `Remix ${props.remixSource}`, zh: `改编 ${props.remixSource}` }
@@ -97,9 +97,10 @@ const handleSubmit = useMessageHandle(
         remixSource: props.remixSource
       })
     } else {
-      const username = await untilNotNull(signedInUsername)
+      const signedInState = await untilLoaded(signedInStateQuery)
+      if (!signedInState.isSignedIn) throw new Error('login required')
       const defaultProjectFile = await getDefaultProjectFile()
-      const project = new SpxProject(username, projectName)
+      const project = new SpxProject(signedInState.user.username, projectName)
       const serialized = await xbpHelpers.load(defaultProjectFile)
       await project.load(serialized)
       project.setDisplayName(projectName)
@@ -136,9 +137,9 @@ async function validateName(name: string): Promise<FormValidationResult> {
     })
 
   // check naming conflict
-  if (signedInUsername.value == null) throw new Error('login required')
-  const username = signedInUsername.value
-  const existedProject = await getProject(username, name).catch((e) => {
+  const signedInState = await untilLoaded(signedInStateQuery)
+  if (!signedInState.isSignedIn) throw new Error('login required')
+  const existedProject = await getProject(signedInState.user.username, name).catch((e) => {
     if (e instanceof ApiException && e.code === ApiExceptionCode.errorNotFound) return null
     throw e
   })
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index 8401b4c161..a65d0ca5ff 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -124,7 +124,7 @@ import {
 import { getProjectEditorRoute, getProjectPageRoute } from '@/router'
 import { Visibility, type ProjectData } from '@/apis/project'
 import { createFileWithUniversalUrl, getPublishedContent } from '@/models/common/cloud'
-import { getSignedInUsername } from '@/stores/user'
+import { useSignedInUser } from '@/stores/user'
 import { useIsLikingProject } from '@/stores/liking'
 import { UIImg, UIDropdown, UIIcon, UIMenu, UIMenuItem } from '@/components/ui'
 import UserAvatar from '@/components/community/user/UserAvatar.vue'
@@ -154,7 +154,8 @@ const emit = defineEmits<{
   removed: []
 }>()
 
-const isOwner = computed(() => props.project.owner === getSignedInUsername())
+const signedInUser = useSignedInUser()
+const isOwner = computed(() => props.project.owner === signedInUser.value?.username)
 const operatable = computed(() => props.context === 'mine' && isOwner.value)
 
 const router = useRouter()
diff --git a/spx-gui/src/models/common/cloud.ts b/spx-gui/src/models/common/cloud.ts
index e3cd63d3f6..73bb37fda5 100644
--- a/spx-gui/src/models/common/cloud.ts
+++ b/spx-gui/src/models/common/cloud.ts
@@ -11,20 +11,22 @@ import { Visibility, addProject, getProject, type UpdateProjectParams, updatePro
 import { getUpInfo, makeObjectUrls, type UpInfo as RawUpInfo } from '@/apis/util'
 import { DefaultException, TimeoutException } from '@/utils/exception'
 import { getUphostsByRegion } from '@/utils/kodo'
-import type { Metadata, ProjectSerialized } from '../project'
+import type { Metadata, PartialMetadata, ProjectSerialized } from '../project'
 import { File, toText, type Files, isText } from './file'
 import { hashFileCollection } from './hash'
 import { createAIDescriptionFiles, extractAIDescription } from './'
 import { getUniversalUrlScheme, stringifyDataUrl, stringifyKodoUrl, UniversalUrlScheme } from '@/utils/universal-url'
 
+export type PreferPublishedContent = boolean | ((project: ProjectData) => boolean | Promise<boolean>)
+
 /** Helpers for cloud storage of project data. */
 export class CloudHelpers {
   load(
     owner: string,
     name: string,
-    preferPublishedContent: boolean = false,
+    preferPublishedContent: PreferPublishedContent = false,
     signal?: AbortSignal
-  ): Promise<ProjectSerialized> {
+  ): Promise<ProjectSerialized<Metadata>> {
     return load(owner, name, preferPublishedContent, signal)
   }
   save({ metadata, files }: ProjectSerialized, signal?: AbortSignal) {
@@ -34,9 +36,16 @@ export class CloudHelpers {
 
 export const cloudHelpers = new CloudHelpers()
 
-async function load(owner: string, name: string, preferPublishedContent: boolean = false, signal?: AbortSignal) {
+async function load(
+  owner: string,
+  name: string,
+  preferPublishedContent: PreferPublishedContent = false,
+  signal?: AbortSignal
+) {
   let projectData = await getProject(owner, name, signal)
-  if (preferPublishedContent) {
+  const shouldPreferPublishedContent =
+    typeof preferPublishedContent === 'function' ? await preferPublishedContent(projectData) : preferPublishedContent
+  if (shouldPreferPublishedContent) {
     const published = getPublishedContent(projectData)
     if (published != null) {
       projectData = {
@@ -55,7 +64,7 @@ export function getPublishedContent(project: ProjectData) {
   return null
 }
 
-async function save(metadata: Metadata, files: Files, signal?: AbortSignal) {
+async function save(metadata: PartialMetadata, files: Files, signal?: AbortSignal) {
   const { owner, name, displayName, id } = metadata
   if (owner == null) throw new Error('owner expected')
   if (!name) throw new DefaultException({ en: 'project name not specified', zh: '未指定项目名' })
diff --git a/spx-gui/src/models/common/index.ts b/spx-gui/src/models/common/index.ts
index b6bdea5862..33189f47d2 100644
--- a/spx-gui/src/models/common/index.ts
+++ b/spx-gui/src/models/common/index.ts
@@ -1,5 +1,5 @@
 import { fromText, toText, type Files } from './file'
-import type { Metadata } from '../project'
+import type { PartialMetadata } from '../project'
 
 export type Size = {
   width: number
@@ -14,7 +14,7 @@ const aiDescriptionFileName = 'builder-ai-description.md'
 const aiDescriptionHashFileName = 'builder-ai-description.hash'
 
 /** Create AI description files from metadata */
-export function createAIDescriptionFiles(metadata: Metadata): Files {
+export function createAIDescriptionFiles(metadata: PartialMetadata): Files {
   const files: Files = {}
   if (metadata.aiDescription != null) {
     files[aiDescriptionFileName] = fromText(aiDescriptionFileName, metadata.aiDescription)
diff --git a/spx-gui/src/models/common/local.ts b/spx-gui/src/models/common/local.ts
index 81037dd048..13af091076 100644
--- a/spx-gui/src/models/common/local.ts
+++ b/spx-gui/src/models/common/local.ts
@@ -1,5 +1,5 @@
 import localforage from 'localforage'
-import type { Metadata, ProjectSerialized } from '../project'
+import type { PartialMetadata, ProjectSerialized } from '../project'
 import { File, type Files, type Metadata as FileMetadata } from './file'
 
 const storage = localforage.createInstance({
@@ -24,7 +24,7 @@ export class LocalHelpers {
 
 export const localHelpers = new LocalHelpers()
 
-type MetadataEx = Omit<Metadata, 'thumbnail'> & {
+type MetadataEx = Omit<PartialMetadata, 'thumbnail'> & {
   files: string[]
   // `?`(`undefined`) for compatibility with legacy data
   thumbnail?: RawFile | null
@@ -112,7 +112,7 @@ async function load(key: string, signal?: AbortSignal) {
   }
 }
 
-async function save(key: string, { thumbnail, ...metadata }: Metadata, files: Files, signal?: AbortSignal) {
+async function save(key: string, { thumbnail, ...metadata }: PartialMetadata, files: Files, signal?: AbortSignal) {
   await clear(key)
   const fileList = Object.keys(files)
   let rawThumbnail: RawFile | null = null
diff --git a/spx-gui/src/models/common/test.ts b/spx-gui/src/models/common/test.ts
index ad7856ba49..cd24e968cd 100644
--- a/spx-gui/src/models/common/test.ts
+++ b/spx-gui/src/models/common/test.ts
@@ -1,7 +1,7 @@
 import { vi } from 'vitest'
 import { shallowRef } from 'vue'
 import Mutex from '@/utils/mutex'
-import type { IProject, Metadata, ProjectSerialized } from '@/models/project'
+import type { IProject, PartialMetadata, ProjectSerialized } from '@/models/project'
 import { File, fromText, type Files } from '../common/file'
 import { createFileWithUniversalUrl } from './cloud'
 
@@ -24,13 +24,13 @@ export class MockProject implements IProject {
   ) {
     this.filesRef.value = files
   }
-  private getMetadata(): Metadata {
+  private getMetadata(): PartialMetadata {
     return {
       owner: this.owner,
       name: this.name
     }
   }
-  setMetadata = vi.fn((metadata: Metadata): void => {
+  setMetadata = vi.fn((metadata: PartialMetadata): void => {
     Object.assign(this, metadata)
   })
   loadFiles = vi.fn(async (files: Files, _signal?: AbortSignal): Promise<void> => {
diff --git a/spx-gui/src/models/common/xbp.ts b/spx-gui/src/models/common/xbp.ts
index be20c1d4c9..d1cf51f0c3 100644
--- a/spx-gui/src/models/common/xbp.ts
+++ b/spx-gui/src/models/common/xbp.ts
@@ -10,7 +10,7 @@ import { zip, unzip, type Zippable } from '@/utils/zip'
 import { filename, stripExt } from '@/utils/path'
 import { getExtFromMime } from '@/utils/file'
 import { File as LazyFile, toConfig, type Files as LazyFiles } from './file'
-import type { Metadata, ProjectSerialized } from '../project'
+import type { PartialMetadata, ProjectSerialized } from '../project'
 import { createAIDescriptionFiles, extractAIDescription } from './'
 
 const metadataFileName = 'builder-meta.json'
@@ -29,7 +29,7 @@ export class XbpHelpers {
 export const xbpHelpers = new XbpHelpers()
 
 export async function load(xbpFile: File) {
-  const metadata: Metadata = {}
+  const metadata: PartialMetadata = {}
   const arrayBuffer = await xbpFile.arrayBuffer()
   const unzipped = await unzip(new Uint8Array(arrayBuffer))
   const files: LazyFiles = {}
@@ -57,7 +57,7 @@ export async function load(xbpFile: File) {
   return { metadata, files }
 }
 
-export async function save(metadata: Metadata, files: LazyFiles, signal?: AbortSignal) {
+export async function save(metadata: PartialMetadata, files: LazyFiles, signal?: AbortSignal) {
   const zippable: Zippable = {}
 
   const metadataJson = JSON.stringify({
@@ -65,7 +65,7 @@ export async function save(metadata: Metadata, files: LazyFiles, signal?: AbortS
     description: metadata.description,
     instructions: metadata.instructions,
     extraSettings: metadata.extraSettings
-  } satisfies Metadata)
+  } satisfies PartialMetadata)
   zippable[metadataFileName] = new TextEncoder().encode(metadataJson)
 
   if (metadata.thumbnail != null) {
diff --git a/spx-gui/src/models/project.ts b/spx-gui/src/models/project.ts
index de60c9da08..e35c844a91 100644
--- a/spx-gui/src/models/project.ts
+++ b/spx-gui/src/models/project.ts
@@ -3,24 +3,23 @@ import type Mutex from '@/utils/mutex'
 import type { ProjectData } from '@/apis/project'
 import type { File, Files } from './common/file'
 
-export type CloudMetadata = Prettify<
+export type Metadata = Prettify<
   Omit<ProjectData, 'latestRelease' | 'files' | 'thumbnail'> & {
     thumbnail: File | null
+    // The ai-description related fields are specific for spx projects.
+    // We retain them in the project metadata for easier access and management,
+    // and they will be saved to the cloud or xbp as separate files.
+    // TODO: Consider relocating them from project metadata (to project files?) if they are not applicable to other project types.
+    // Refer to https://github.com/goplus/builder/pull/1932#discussion_r2266234375 before implementing this change.
+    aiDescription: string | null
+    aiDescriptionHash: string | null
   }
 >
 
-export type Metadata = Partial<CloudMetadata> & {
-  // The ai-description related fields are specific for spx projects.
-  // We retain them in the project metadata for easier access and management,
-  // and they will be saved to the cloud or xbp as separate files.
-  // TODO: Consider relocating them from project metadata (to project files?) if they are not applicable to other project types.
-  // Refer to https://github.com/goplus/builder/pull/1932#discussion_r2266234375 before implementing this change.
-  aiDescription?: string | null
-  aiDescriptionHash?: string | null
-}
+export type PartialMetadata = Partial<Metadata>
 
-export type ProjectSerialized = {
-  metadata: Metadata
+export type ProjectSerialized<M extends PartialMetadata = PartialMetadata> = {
+  metadata: M
   files: Files
 }
 
@@ -42,7 +41,7 @@ export interface IProject {
   name?: string
 
   /** Set metadata fields of the project. */
-  setMetadata(metadata: Metadata): void
+  setMetadata(metadata: PartialMetadata): void
 
   /** Load project content from files. */
   loadFiles(files: Files, signal?: AbortSignal): Promise<void>
diff --git a/spx-gui/src/models/spx/common/asset.ts b/spx-gui/src/models/spx/common/asset.ts
index 30dfeb9b01..7a66b47a5b 100644
--- a/spx-gui/src/models/spx/common/asset.ts
+++ b/spx-gui/src/models/spx/common/asset.ts
@@ -8,6 +8,7 @@ import type { SpriteGen } from '../gen/sprite-gen'
 import type { BackdropGen } from '../gen/backdrop-gen'
 import { fromBlob, fromConfig, toConfig } from '../../common/file'
 import { getFiles, saveFiles } from '../../common/cloud'
+import type { SpxProject } from '@/models/spx/project'
 
 export type AssetMetadata = Partial<Omit<AssetData, 'files'>>
 
@@ -144,3 +145,26 @@ export async function genAssetFromCanvas(name: string, width: number, height: nu
   const file = fromBlob(filename, blob)
   return file
 }
+
+export async function addAssetToProject(asset: AssetData, project: SpxProject) {
+  switch (asset.type) {
+    case AssetType.Sprite: {
+      const sprite = await asset2Sprite(asset)
+      project.addSprite(sprite)
+      await sprite.autoFit()
+      return sprite
+    }
+    case AssetType.Backdrop: {
+      const backdrop = await asset2Backdrop(asset)
+      project.stage.addBackdrop(backdrop)
+      return backdrop
+    }
+    case AssetType.Sound: {
+      const sound = await asset2Sound(asset)
+      project.addSound(sound)
+      return sound
+    }
+    default:
+      throw new Error('unknown asset type')
+  }
+}
diff --git a/spx-gui/src/models/spx/project.ts b/spx-gui/src/models/spx/project.ts
index f927564158..75ad981f07 100644
--- a/spx-gui/src/models/spx/project.ts
+++ b/spx-gui/src/models/spx/project.ts
@@ -22,13 +22,13 @@ import { DumbTilemap as Tilemap } from './tilemap'
 import { Sprite } from './sprite'
 import { Sound } from './sound'
 import type { RawWidgetConfig } from './widget'
-import type { CloudMetadata, IProject, Metadata, ProjectSerialized } from '@/models/project'
+import type { Metadata, IProject, PartialMetadata, ProjectSerialized } from '@/models/project'
 
 /**
  * A Project loaded from cloud.
  * TODO: better organization & type derivation
  */
-export type CloudProject = SpxProject & CloudMetadata
+export type CloudProject = SpxProject & Metadata
 
 const projectConfigFileName = 'index.json'
 const assetsDir = 'assets'
@@ -376,11 +376,11 @@ export class SpxProject extends Disposable implements IProject {
     return reactiveThis
   }
 
-  setMetadata(metadata: Metadata) {
+  setMetadata(metadata: PartialMetadata) {
     assign<SpxProject>(this, metadata)
   }
 
-  private exportMetadata(): Metadata {
+  private exportMetadata(): PartialMetadata {
     return {
       id: this.id,
       createdAt: this.createdAt,
diff --git a/spx-gui/src/pages/community/home.vue b/spx-gui/src/pages/community/home.vue
index fc1cfe031a..94950b8af9 100644
--- a/spx-gui/src/pages/community/home.vue
+++ b/spx-gui/src/pages/community/home.vue
@@ -121,7 +121,7 @@ import { useQuery } from '@/utils/query'
 import { usePageTitle } from '@/utils/utils'
 import { ExploreOrder, exploreProjects, listProject } from '@/apis/project'
 import { getExploreRoute, getUserPageRoute } from '@/router'
-import { isSignedIn, getSignedInUsername } from '@/stores/user'
+import { isSignedIn, useSignedInUser } from '@/stores/user'
 import { useResponsive } from '@/components/ui'
 import ProjectsSection from '@/components/community/ProjectsSection.vue'
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
@@ -133,17 +133,16 @@ usePageTitle([])
 
 const isDesktopLarge = useResponsive('desktop-large')
 const numInRow = computed(() => (isDesktopLarge.value ? 5 : 4))
-
-const signedInUsername = computed(() => getSignedInUsername())
+const signedInUser = useSignedInUser()
 
 const myProjectsRoute = computed(() => {
-  if (signedInUsername.value == null) return ''
-  return getUserPageRoute(signedInUsername.value, 'projects')
+  if (signedInUser.value == null) return ''
+  return getUserPageRoute(signedInUser.value.username, 'projects')
 })
 
 const myProjects = useQuery(
   async () => {
-    if (signedInUsername.value == null) return []
+    if (!isSignedIn()) return []
     const { data: projects } = await listProject({
       pageIndex: 1,
       pageSize: numInRow.value,
@@ -169,14 +168,11 @@ const communityRemixingProjects = useQuery(
   { en: 'Failed to load projects', zh: '加载失败' }
 )
 
-const followingCreatedRoute = computed(() => {
-  if (signedInUsername.value == null) return ''
-  return getExploreRoute(ExploreOrder.FollowingCreated)
-})
+const followingCreatedRoute = computed(() => getExploreRoute(ExploreOrder.FollowingCreated))
 
 const followingCreatedProjects = useQuery(
   async () => {
-    if (signedInUsername.value == null) return []
+    if (!isSignedIn()) return []
     return exploreProjects({ order: ExploreOrder.FollowingCreated, count: numInRow.value })
   },
   { en: 'Failed to load projects', zh: '加载失败' }
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 19b1347159..051dd6751c 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -12,7 +12,7 @@ import { ownerAll, recordProjectView, stringifyProjectFullName, stringifyRemixSo
 import { listProject } from '@/apis/project'
 import { listReleases } from '@/apis/project-release'
 import { SpxProject, type CloudProject } from '@/models/spx/project'
-import { useUser, isSignedIn, getSignedInUsername, initiateSignIn } from '@/stores/user'
+import { useSignedInUser, useUser, isSignedIn, initiateSignIn } from '@/stores/user'
 import { getOwnProjectEditorRoute, getProjectEditorRoute, getUserPageRoute } from '@/router'
 import {
   UIIcon,
@@ -42,8 +42,8 @@ import { cloudHelpers } from '@/models/common/cloud'
 import kikoWaveSvg from './kiko-wave.svg?raw'
 
 const props = defineProps<{
-  owner: string
-  name: string
+  ownerInput: string
+  nameInput: string
 }>()
 
 const router = useRouter()
@@ -54,9 +54,9 @@ const {
   refetch: reloadProject
 } = useQuery(
   async (ctx) => {
-    const p = new SpxProject(props.owner, props.name)
+    const p = new SpxProject()
     ;(window as any).project = p // for debug purpose, TODO: remove me
-    const serialized = await cloudHelpers.load(props.owner, props.name, true, ctx.signal)
+    const serialized = await cloudHelpers.load(props.ownerInput, props.nameInput, true, ctx.signal)
     await p.load(serialized)
     return p as CloudProject
   },
@@ -66,7 +66,8 @@ const {
   }
 )
 
-const { data: ownerInfo } = useUser(() => props.owner)
+const { data: ownerInfo } = useUser(() => props.ownerInput)
+const signedInUser = useSignedInUser()
 
 usePageTitle(() => {
   if (ownerInfo.value == null || project.value == null) return null
@@ -83,21 +84,26 @@ usePageTitle(() => {
 })
 
 watch(
-  () => [props.owner, props.name],
-  () => isSignedIn() && recordProjectView(props.owner, props.name),
+  () => [props.ownerInput, props.nameInput],
+  () => isSignedIn() && recordProjectView(props.ownerInput, props.nameInput),
   { immediate: true }
 )
 
 const runnerState = ref<'initial' | 'loading' | 'running'>('initial')
 watch(
-  () => [props.owner, props.name],
+  () => [props.ownerInput, props.nameInput],
   () => {
     runnerState.value = 'initial'
   }
 )
 
-const isOwner = computed(() => props.owner === getSignedInUsername())
-const { data: liking } = useIsLikingProject(() => ({ owner: props.owner, name: props.name }))
+const isOwner = computed(() => {
+  const signedInUsername = signedInUser.value?.username
+  const projectOwner = project.value?.owner
+  if (signedInUsername == null || projectOwner == null) return false
+  return projectOwner === signedInUsername
+})
+const { data: liking } = useIsLikingProject(() => ({ owner: props.ownerInput, name: props.nameInput }))
 
 const projectRunnerRef = ref<InstanceType<typeof ProjectRunnerSurface> | null>(null)
 const isFullScreenRunning = ref(false)
@@ -189,7 +195,7 @@ const handleRerun = useMessageHandle(
 
 const handleEdit = useMessageHandle(
   async () => {
-    const projectEditorRoute = getProjectEditorRoute(props.owner, props.name)
+    const projectEditorRoute = getProjectEditorRoute(props.ownerInput, props.nameInput)
     await router.push(projectEditorRoute)
   },
   { en: 'Failed to open editor', zh: '打开编辑器失败' }
@@ -199,7 +205,7 @@ const likeProject = useLikeProject()
 const handleLike = useMessageHandle(
   async () => {
     await ensureSignedIn()
-    await likeProject(props.owner, props.name)
+    await likeProject(props.ownerInput, props.nameInput)
     if (project.value != null) {
       // refresh project info (likeCount)
       const serialized = await cloudHelpers.load(project.value.owner!, project.value.name!, true)
@@ -213,7 +219,7 @@ const unlikeProject = useUnlikeProject()
 const handleUnlike = useMessageHandle(
   async () => {
     await ensureSignedIn()
-    await unlikeProject(props.owner, props.name)
+    await unlikeProject(props.ownerInput, props.nameInput)
     if (project.value != null) {
       // refresh project info (likeCount)
       const serialized = await cloudHelpers.load(project.value.owner!, project.value.name!, true)
@@ -231,7 +237,7 @@ function handleToggleLike() {
 
 const shareProject = useShareProject()
 
-const handleShare = useMessageHandle(() => shareProject(props.owner, props.name), {
+const handleShare = useMessageHandle(() => shareProject(props.ownerInput, props.nameInput), {
   en: 'Failed to share project',
   zh: '分享项目失败'
 })
@@ -241,7 +247,7 @@ const createProject = useCreateProject()
 const handleRemix = useMessageHandle(
   async () => {
     await ensureSignedIn()
-    const name = await createProject(stringifyRemixSource(props.owner, props.name))
+    const name = await createProject(stringifyRemixSource(props.ownerInput, props.nameInput))
     router.push(getOwnProjectEditorRoute(name))
   },
   { en: 'Failed to remix project', zh: '改编项目失败' }
@@ -249,9 +255,9 @@ const handleRemix = useMessageHandle(
 
 const releasesRet = useQuery(
   async () => {
-    const { owner, name } = props
+    const { ownerInput, nameInput } = props
     const { data } = await listReleases({
-      projectFullName: stringifyProjectFullName(owner, name),
+      projectFullName: stringifyProjectFullName(ownerInput, nameInput),
       orderBy: 'createdAt',
       sortOrder: 'desc',
       pageIndex: 1,
@@ -281,15 +287,16 @@ const handleUnpublish = useMessageHandle(
 const handlePublish = useMessageHandle(
   // there may be no thumbnail for some projects (see details in https://github.com/goplus/builder/issues/1025),
   // to ensure thumbnail for project-release, we jump to editor where we are able to generate thumbnails and then finish publishing
-  async () => router.push(getOwnProjectEditorRoute(props.name, true)),
+  async () => router.push(getOwnProjectEditorRoute(props.nameInput, true)),
   { en: 'Failed to publish project', zh: '发布项目失败' }
 )
 
 const removeProject = useRemoveProject()
 const handleRemove = useMessageHandle(
   async () => {
-    await removeProject(props.owner, props.name, project.value!.displayName)
-    await router.push(getUserPageRoute(getSignedInUsername()!, 'projects'))
+    await removeProject(props.ownerInput, props.nameInput, project.value!.displayName)
+    const { username } = await untilNotNull(signedInUser)
+    await router.push(getUserPageRoute(username, 'projects'))
   },
   { en: 'Failed to remove project', zh: '删除项目失败' },
   { en: 'Project removed', zh: '项目已删除' }
@@ -303,7 +310,7 @@ const remixesRet = useQuery(
     const { data: projects } = await listProject({
       visibility: Visibility.Public,
       owner: ownerAll,
-      remixedFrom: stringifyRemixSource(props.owner, props.name),
+      remixedFrom: stringifyRemixSource(props.ownerInput, props.nameInput),
       pageIndex: 1,
       pageSize: remixNumInRow.value,
       orderBy: 'likeCount',
diff --git a/spx-gui/src/pages/community/user/followers.vue b/spx-gui/src/pages/community/user/followers.vue
index 5561ec1ecb..653c03f19b 100644
--- a/spx-gui/src/pages/community/user/followers.vue
+++ b/spx-gui/src/pages/community/user/followers.vue
@@ -11,10 +11,10 @@ import UserContent from '@/components/community/user/content/UserContent.vue'
 import UserItem from '@/components/community/user/UserItem.vue'
 
 const props = defineProps<{
-  name: string
+  nameInput: string
 }>()
 
-const { data: user } = useUser(() => props.name)
+const { data: user } = useUser(() => props.nameInput)
 usePageTitle(() => {
   if (user.value == null) return null
   return {
@@ -30,7 +30,7 @@ const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / p
 const queryRet = useQuery(
   () =>
     listUsers({
-      followee: props.name,
+      followee: props.nameInput,
       orderBy: 'followedAt',
       sortOrder: 'desc',
       pageSize,
diff --git a/spx-gui/src/pages/community/user/following.vue b/spx-gui/src/pages/community/user/following.vue
index 10f924a807..ea405a8e38 100644
--- a/spx-gui/src/pages/community/user/following.vue
+++ b/spx-gui/src/pages/community/user/following.vue
@@ -11,10 +11,10 @@ import UserContent from '@/components/community/user/content/UserContent.vue'
 import UserItem from '@/components/community/user/UserItem.vue'
 
 const props = defineProps<{
-  name: string
+  nameInput: string
 }>()
 
-const { data: user } = useUser(() => props.name)
+const { data: user } = useUser(() => props.nameInput)
 usePageTitle(() => {
   if (user.value == null) return null
   return {
@@ -30,7 +30,7 @@ const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / p
 const queryRet = useQuery(
   () =>
     listUsers({
-      follower: props.name,
+      follower: props.nameInput,
       orderBy: 'followedAt',
       sortOrder: 'desc',
       pageSize,
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index 1e642b5576..e22d609e12 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -6,10 +6,10 @@ import UserHeader from '@/components/community/user/UserHeader.vue'
 import UserSidebar from '@/components/community/user/sidebar/UserSidebar.vue'
 
 const props = defineProps<{
-  name: string
+  nameInput: string
 }>()
 
-const { data: user, error, refetch } = useUser(() => props.name)
+const { data: user, error, refetch } = useUser(() => props.nameInput)
 </script>
 
 <template>
@@ -20,7 +20,7 @@ const { data: user, error, refetch } = useUser(() => props.name)
     <template v-else-if="user != null">
       <UserHeader :user="user" />
       <div class="main">
-        <UserSidebar class="sidebar" :username="name" />
+        <UserSidebar class="sidebar" :username="user.username" />
         <div class="content">
           <router-view />
         </div>
diff --git a/spx-gui/src/pages/community/user/likes.vue b/spx-gui/src/pages/community/user/likes.vue
index f397bd8f0c..82876a5cb2 100644
--- a/spx-gui/src/pages/community/user/likes.vue
+++ b/spx-gui/src/pages/community/user/likes.vue
@@ -11,10 +11,10 @@ import UserContent from '@/components/community/user/content/UserContent.vue'
 import ProjectItem from '@/components/project/ProjectItem.vue'
 
 const props = defineProps<{
-  name: string
+  nameInput: string
 }>()
 
-const { data: user } = useUser(() => props.name)
+const { data: user } = useUser(() => props.nameInput)
 usePageTitle(() => {
   if (user.value == null) return null
   return {
@@ -34,7 +34,7 @@ const queryRet = useQuery(
     listProject({
       visibility: Visibility.Public,
       owner: ownerAll,
-      liker: props.name,
+      liker: props.nameInput,
       orderBy: 'likedAt',
       sortOrder: 'desc',
       pageSize: pageSize.value,
diff --git a/spx-gui/src/pages/community/user/overview.vue b/spx-gui/src/pages/community/user/overview.vue
index f6ce0c67f9..c09c8cfd19 100644
--- a/spx-gui/src/pages/community/user/overview.vue
+++ b/spx-gui/src/pages/community/user/overview.vue
@@ -4,7 +4,7 @@ import { getUserPageRoute } from '@/router'
 import { useQuery } from '@/utils/query'
 import { usePageTitle } from '@/utils/utils'
 import { Visibility, listProject, ownerAll } from '@/apis/project'
-import { getSignedInUsername, useUser } from '@/stores/user'
+import { useSignedInUser, useUser } from '@/stores/user'
 import { useResponsive } from '@/components/ui'
 import CommunityCard from '@/components/community/CommunityCard.vue'
 import ProjectsSection from '@/components/community/ProjectsSection.vue'
@@ -12,14 +12,15 @@ import ProjectItem from '@/components/project/ProjectItem.vue'
 import MyProjectsEmpty from '@/components/community/MyProjectsEmpty.vue'
 
 const props = defineProps<{
-  name: string
+  nameInput: string
 }>()
 
 const isDesktopLarge = useResponsive('desktop-large')
 const numInRow = computed(() => (isDesktopLarge.value ? 5 : 4))
-const isSignedInUser = computed(() => props.name === getSignedInUsername())
+const { data: user } = useUser(() => props.nameInput)
+const signedInUser = useSignedInUser()
+const isSignedInUser = computed(() => user.value != null && user.value.username === signedInUser.value?.username)
 
-const { data: user } = useUser(() => props.name)
 usePageTitle(() => {
   if (user.value == null) return null
   return {
@@ -31,13 +32,13 @@ usePageTitle(() => {
 const projectsRoute = computed(() => {
   const projectsNum = projectsRet.data.value?.length ?? 0
   if (projectsNum === 0) return null
-  return getUserPageRoute(props.name, 'projects')
+  return getUserPageRoute(props.nameInput, 'projects')
 })
 
 const projectsRet = useQuery(
   async () => {
     const { data: projects } = await listProject({
-      owner: props.name,
+      owner: props.nameInput,
       pageIndex: 1,
       pageSize: numInRow.value,
       orderBy: 'updatedAt',
@@ -49,7 +50,7 @@ const projectsRet = useQuery(
 )
 
 const likesRoute = computed(() => {
-  return getUserPageRoute(props.name, 'likes')
+  return getUserPageRoute(props.nameInput, 'likes')
 })
 
 const likesRet = useQuery(
@@ -57,7 +58,7 @@ const likesRet = useQuery(
     const { data: likes } = await listProject({
       visibility: Visibility.Public,
       owner: ownerAll,
-      liker: props.name,
+      liker: props.nameInput,
       orderBy: 'likedAt',
       sortOrder: 'desc',
       pageIndex: 1,
diff --git a/spx-gui/src/pages/community/user/projects.vue b/spx-gui/src/pages/community/user/projects.vue
index f8219b973a..4a6cb5494e 100644
--- a/spx-gui/src/pages/community/user/projects.vue
+++ b/spx-gui/src/pages/community/user/projects.vue
@@ -8,7 +8,7 @@ import { usePageTitle } from '@/utils/utils'
 import { useEnsureSignedIn } from '@/utils/user'
 import { Visibility, listProject, type ListProjectParams } from '@/apis/project'
 import { getOwnProjectEditorRoute } from '@/router'
-import { getSignedInUsername, useUser } from '@/stores/user'
+import { useSignedInUser, useUser } from '@/stores/user'
 import { UISelect, UISelectOption, UIPagination, UIButton, useResponsive } from '@/components/ui'
 import { useCreateProject } from '@/components/project'
 import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
@@ -16,12 +16,13 @@ import UserContent from '@/components/community/user/content/UserContent.vue'
 import ProjectItem from '@/components/project/ProjectItem.vue'
 
 const props = defineProps<{
-  name: string
+  nameInput: string
 }>()
 
-const isSignedInUser = computed(() => props.name === getSignedInUsername())
+const { data: user } = useUser(() => props.nameInput)
+const signedInUser = useSignedInUser()
+const isSignedInUser = computed(() => user.value != null && user.value.username === signedInUser.value?.username)
 
-const { data: user } = useUser(() => props.name)
 usePageTitle(() => {
   if (user.value == null) return null
   return {
@@ -47,7 +48,7 @@ const order = useRouteQueryParamStrEnum('o', Order, Order.RecentlyUpdated, (kvs)
 
 const listParams = computed<ListProjectParams>(() => {
   const p: ListProjectParams = {
-    owner: props.name,
+    owner: props.nameInput,
     pageSize: pageSize.value,
     pageIndex: page.value
   }
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 82d5345f3b..b3aa6aefbc 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -35,9 +35,9 @@ class LocalCache implements ILocalCache {
 </script>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, computed, nextTick, watch } from 'vue'
+import { onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
-import { getSignedInUsername } from '@/stores/user'
+import { useSignedInStateQuery } from '@/stores/user'
 import { getProjectEditorRoute } from '@/router'
 import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 import { composeQuery, useQuery } from '@/utils/query'
@@ -70,12 +70,12 @@ import type { ProjectSerialized } from '@/models/project'
 import { SpxProject } from '@/models/spx/project'
 
 const props = defineProps<{
-  ownerName: string
-  projectName: string
+  ownerNameInput: string
+  projectNameInput: string
 }>()
 const localCache = new LocalCache(localHelpers)
 
-const signedInUsername = computed(() => getSignedInUsername())
+const signedInStateQuery = useSignedInStateQuery()
 const copilotCtx = useAgentCopilotCtx()
 
 const router = useRouter()
@@ -105,23 +105,24 @@ const confirmOpenTargetWithAnotherInCache = (targetName: string, cachedName: str
 
 const stateQueryRet = useQuery(
   async (ctx) => {
-    // We need to access deps (`ownerName`, `projectName`, `signedInUsername`) synchronously,
+    // We need to access deps (`ownerNameInput`, `projectNameInput`) synchronously,
     // so their change will drive `useQuery` to re-fetch
-    const ownerName = props.ownerName
-    const projectName = props.projectName
-    const username = signedInUsername.value
+    const ownerInput = props.ownerNameInput
+    const projectNameInput = props.projectNameInput
 
     // Add `nextTick` to avoid data accessing in following code to be considered as deps, which will cause infinite loop of query fetching.
     // TODO: Refactor `useQuery` to accept deps fn explicitly to avoid such issue.
     await nextTick()
 
-    const project = new SpxProject(ownerName, projectName)
+    const project = new SpxProject()
     project.disposeOnSignal(ctx.signal)
     ;(window as any).project = project // for debug purpose, TODO: remove me
     ctx.signal.throwIfAborted()
-    const state = new EditorState(i18n, project, isOnline, username, cloudHelpers, localCache)
+    const state = new EditorState(i18n, project, isOnline, signedInStateQuery, cloudHelpers, localCache)
     state.disposeOnSignal(ctx.signal)
     await state.editing.loadProject(
+      ownerInput,
+      projectNameInput,
       {
         confirmOpenTargetWithAnotherInCache,
         openProject
@@ -139,7 +140,7 @@ const stateQueryRet = useQuery(
 const state = stateQueryRet.data
 
 usePageTitle(() => {
-  const displayName = state.value?.project.displayName ?? props.projectName
+  const displayName = state.value?.project.displayName ?? props.projectNameInput
   return {
     en: `Edit ${displayName}`,
     zh: `编辑 ${displayName}`
diff --git a/spx-gui/src/pages/tutorials/course-series.vue b/spx-gui/src/pages/tutorials/course-series.vue
index 9a06f5c80c..acf217d980 100644
--- a/spx-gui/src/pages/tutorials/course-series.vue
+++ b/spx-gui/src/pages/tutorials/course-series.vue
@@ -24,12 +24,12 @@ const numInColumn = 2
 const height = numInColumn * (courseItemHeight + coursePadding) - coursePadding
 
 const props = defineProps<{
-  courseSeriesId: string
+  courseSeriesIdInput: string
 }>()
 
 const tutorial = useTutorial()
 
-const courseSeriesQuery = useQuery(async () => getCourseSeries(props.courseSeriesId), {
+const courseSeriesQuery = useQuery(async () => getCourseSeries(props.courseSeriesIdInput), {
   en: 'Failed to load course series',
   zh: '加载课程系列失败'
 })
@@ -67,7 +67,7 @@ const courseQuery = useQuery(
   async (ctx) => {
     return listCourse(
       {
-        courseSeriesID: props.courseSeriesId,
+        courseSeriesID: props.courseSeriesIdInput,
         pageIndex: page.value,
         pageSize: pageSize.value,
         orderBy: 'sequenceInCourseSeries',
diff --git a/spx-gui/src/pages/tutorials/course-start.vue b/spx-gui/src/pages/tutorials/course-start.vue
index 6cd1102d4a..fac7408f2c 100644
--- a/spx-gui/src/pages/tutorials/course-start.vue
+++ b/spx-gui/src/pages/tutorials/course-start.vue
@@ -6,17 +6,17 @@ import { UIDetailedLoading, UIError } from '@/components/ui'
 import { composeQuery, useQuery } from '@/utils/query'
 
 const props = defineProps<{
-  courseSeriesId: string
-  courseId: string
+  courseSeriesIdInput: string
+  courseIdInput: string
 }>()
 
 const tutorial = useTutorial()
 
-const courseSeriesQuery = useQuery(async () => getCourseSeries(props.courseSeriesId), {
+const courseSeriesQuery = useQuery(async () => getCourseSeries(props.courseSeriesIdInput), {
   en: 'Failed to load course series',
   zh: '加载课程系列失败'
 })
-const courseQuery = useQuery(async () => await getCourse(props.courseId), {
+const courseQuery = useQuery(async () => await getCourse(props.courseIdInput), {
   en: 'Failed to load course',
   zh: '加载课程失败'
 })
diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
index 9e97bc3abb..6b4000d30c 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/router.ts
@@ -2,7 +2,7 @@ import type { App } from 'vue'
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { searchKeywordQueryParamName } from '@/pages/community/search.vue'
 import type { ExploreOrder } from './apis/project'
-import { initiateSignIn, isSignedIn, getSignedInUsername } from './stores/user'
+import { initiateSignIn, isSignedIn, getUnresolvedSignedInUsername } from './stores/user'
 
 export function getProjectEditorRoute(ownerName: string, projectName: string, publish = false) {
   ownerName = encodeURIComponent(ownerName)
@@ -11,7 +11,7 @@ export function getProjectEditorRoute(ownerName: string, projectName: string, pu
 }
 
 export function getOwnProjectEditorRoute(projectName: string, publish = false) {
-  const username = getSignedInUsername()
+  const username = getUnresolvedSignedInUsername()
   if (username == null) throw new Error('User not signed in')
   return getProjectEditorRoute(username, projectName, publish)
 }
@@ -71,7 +71,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: { isSearch: true }
       },
       {
-        path: '/user/:name',
+        path: '/user/:nameInput',
         component: () => import('@/pages/community/user/index.vue'),
         props: true,
         children: [
@@ -103,7 +103,7 @@ const routes: Array<RouteRecordRaw> = [
         ]
       },
       {
-        path: '/project/:owner/:name',
+        path: '/project/:ownerInput/:nameInput',
         component: () => import('@/pages/community/project.vue'),
         props: true
       }
@@ -114,7 +114,7 @@ const routes: Array<RouteRecordRaw> = [
     redirect: '/'
   },
   {
-    path: '/editor/:ownerName/:projectName/:inEditorPath*',
+    path: '/editor/:ownerNameInput/:projectNameInput/:inEditorPath*',
     component: () => import('@/pages/editor/index.vue'),
     props: true
   },
@@ -123,27 +123,27 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('@/pages/tutorials/index.vue')
   },
   {
-    path: '/course/:courseSeriesId/:courseId/start',
+    path: '/course/:courseSeriesIdInput/:courseIdInput/start',
     component: () => import('@/pages/tutorials/course-start.vue'),
     props: true
   },
   {
-    path: '/course-series/:courseSeriesId',
+    path: '/course-series/:courseSeriesIdInput',
     component: () => import('@/pages/tutorials/course-series.vue'),
     props: true
   },
   {
-    path: '/editor/:projectName',
+    path: '/editor/:projectNameInput',
     redirect(to) {
-      const { projectName } = to.params
-      const username = getSignedInUsername()
+      const { projectNameInput } = to.params
+      const username = getUnresolvedSignedInUsername()
       // Route with `redirect` will not trigger the global `beforeEach` guard,
       // so we need to check sign-in status here.
       if (username == null) {
         initiateSignIn()
         throw new Error('User not signed in') // prevent router from redirecting
       }
-      return getProjectEditorRoute(username, projectName as string)
+      return getProjectEditorRoute(username, projectNameInput as string)
     }
   },
   {
diff --git a/spx-gui/src/stores/following.ts b/spx-gui/src/stores/following.ts
index 12b2ea5c4c..04e9e27265 100644
--- a/spx-gui/src/stores/following.ts
+++ b/spx-gui/src/stores/following.ts
@@ -2,22 +2,22 @@ import { computed, toRef, type WatchSource } from 'vue'
 import { useQueryWithCache, useQueryCache } from '@/utils/query'
 import { useAction } from '@/utils/exception'
 import * as apis from '@/apis/user'
-import { getSignedInUsername } from './user'
+import { getUnresolvedSignedInUsername } from './user'
 
-function getFollowingQueryKey(username: string) {
-  return ['following', getSignedInUsername(), username]
+function getFollowingQueryKey(signedInUsernameInput: string | null, username: string) {
+  return ['following', signedInUsernameInput, username]
 }
 
 const staleTime = 5 * 60 * 1000 // 5min
 
 export function useIsFollowing(username: WatchSource<string>) {
   const usernameRef = toRef(username)
-  const queryKey = computed(() => getFollowingQueryKey(usernameRef.value))
+  const queryKey = computed(() => getFollowingQueryKey(getUnresolvedSignedInUsername(), usernameRef.value))
   return useQueryWithCache({
     queryKey,
     async queryFn() {
-      const signedInUsername = getSignedInUsername()
-      if (signedInUsername == null || signedInUsername === usernameRef.value) return false
+      const signedInUsernameInput = getUnresolvedSignedInUsername()
+      if (signedInUsernameInput == null || signedInUsernameInput === usernameRef.value) return false
       return apis.isFollowing(usernameRef.value)
     },
     failureSummaryMessage: { en: 'Failed to check following status', zh: '检查关注状态失败' },
@@ -30,7 +30,7 @@ export function useFollow() {
   return useAction(
     async function follow(username: string) {
       await apis.follow(username)
-      const queryKey = getFollowingQueryKey(username)
+      const queryKey = getFollowingQueryKey(getUnresolvedSignedInUsername(), username)
       queryCache.invalidateWithOptimisticValue(queryKey, true)
     },
     { en: 'Failed to follow', zh: '关注用户失败' }
@@ -42,7 +42,7 @@ export function useUnfollow() {
   return useAction(
     async function unfollow(username: string) {
       await apis.unfollow(username)
-      const queryKey = getFollowingQueryKey(username)
+      const queryKey = getFollowingQueryKey(getUnresolvedSignedInUsername(), username)
       queryCache.invalidateWithOptimisticValue(queryKey, false)
     },
     { en: 'Failed to unfollow', zh: '取消关注失败' }
diff --git a/spx-gui/src/stores/liking.ts b/spx-gui/src/stores/liking.ts
index 78449a4d3b..022d49d1bd 100644
--- a/spx-gui/src/stores/liking.ts
+++ b/spx-gui/src/stores/liking.ts
@@ -2,10 +2,10 @@ import { computed, toRef, type WatchSource } from 'vue'
 import { useQueryWithCache, useQueryCache } from '@/utils/query'
 import { useAction } from '@/utils/exception'
 import * as apis from '@/apis/project'
-import { isSignedIn, getSignedInUsername } from './user'
+import { getUnresolvedSignedInUsername, isSignedIn } from './user'
 
-function getLikingQueryKey(owner: string, name: string) {
-  return ['liking', getSignedInUsername(), owner, name]
+function getLikingQueryKey(signedInUsernameInput: string | null, owner: string, name: string) {
+  return ['liking', signedInUsernameInput, owner, name]
 }
 
 const staleTime = 5 * 60 * 1000 // 5min
@@ -14,7 +14,7 @@ export function useIsLikingProject(project: WatchSource<{ owner: string; name: s
   const projectRef = toRef(project)
   const queryKey = computed(() => {
     const { owner, name } = projectRef.value
-    return getLikingQueryKey(owner, name)
+    return getLikingQueryKey(getUnresolvedSignedInUsername(), owner, name)
   })
   return useQueryWithCache({
     queryKey,
@@ -32,7 +32,7 @@ export function useLikeProject() {
   return useAction(
     async function likeProject(owner: string, name: string) {
       await apis.likeProject(owner, name)
-      const queryKey = getLikingQueryKey(owner, name)
+      const queryKey = getLikingQueryKey(getUnresolvedSignedInUsername(), owner, name)
       queryCache.invalidateWithOptimisticValue(queryKey, true)
     },
     { en: 'Failed to like', zh: '标记喜欢失败' }
@@ -44,7 +44,7 @@ export function useUnlikeProject() {
   return useAction(
     async function unlikeProject(owner: string, name: string) {
       await apis.unlikeProject(owner, name)
-      const queryKey = getLikingQueryKey(owner, name)
+      const queryKey = getLikingQueryKey(getUnresolvedSignedInUsername(), owner, name)
       queryCache.invalidateWithOptimisticValue(queryKey, false)
     },
     { en: 'Failed to unlike', zh: '取消喜欢失败' }
diff --git a/spx-gui/src/stores/user/signed-in.ts b/spx-gui/src/stores/user/signed-in.ts
index 286aca1613..19d3573a8d 100644
--- a/spx-gui/src/stores/user/signed-in.ts
+++ b/spx-gui/src/stores/user/signed-in.ts
@@ -2,11 +2,13 @@ import { reactive, watchEffect, computed } from 'vue'
 import Sdk from 'casdoor-js-sdk'
 import { casdoorConfig } from '@/utils/env'
 import { jwtDecode } from 'jwt-decode'
-import { useQueryWithCache, useQueryCache } from '@/utils/query'
+import { useQueryWithCache, useQueryCache, useQuery, composeQuery } from '@/utils/query'
 import { useAction } from '@/utils/exception'
 import * as apis from '@/apis/user'
 import { getUserQueryKey } from './query-keys'
 
+export type SignedInUser = apis.SignedInUser
+
 const casdoorAuthRedirectPath = '/sign-in/callback'
 const casdoorSdk = new Sdk({
   ...casdoorConfig,
@@ -18,6 +20,10 @@ const userState = reactive({
   accessToken: null as string | null,
   accessTokenExpiresAt: null as number | null,
   refreshToken: null as string | null,
+  /**
+   * User name parsed from access token, or null if not available.
+   * This is only a hint and should not be treated as canonical backend-confirmed identity.
+   */
   username: null as string | null
 })
 
@@ -127,7 +133,17 @@ export function isSignedIn(): boolean {
   return isAccessTokenValid() || userState.refreshToken != null
 }
 
-export function getSignedInUsername(): string | null {
+/**
+ * Returns the current signed-in username from locally available auth state only.
+ *
+ * The returned value is unresolved: it comes from the access token,
+ * and should not be treated as canonical backend-confirmed identity.
+ *
+ * Use this only at boundaries that need a synchronous identity hint, such as cache keys, route
+ * derivation, or other session-scoping data. Do not use it for behavior-sensitive checks like
+ * ownership, permissions, or other logic that should depend on canonical backend data.
+ */
+export function getUnresolvedSignedInUsername(): string | null {
   if (!isSignedIn()) return null
   if (userState.username != null) return userState.username
   if (userState.accessToken == null) return null
@@ -139,19 +155,17 @@ export function getSignedInUsername(): string | null {
 
 const signedInUserStaleTime = 60 * 1000 // 1min
 
-export function getSignedInUserQueryKey() {
-  return [...getUserQueryKey(getSignedInUsername() ?? ''), 'signed-in']
+function getSignedInUserQueryKey() {
+  return [...getUserQueryKey(getUnresolvedSignedInUsername() ?? ''), 'signed-in']
 }
 
-export function useSignedInUser() {
+function useSignedInUserQuery() {
   const queryKey = computed(() => getSignedInUserQueryKey())
   return useQueryWithCache({
     queryKey: queryKey,
     async queryFn() {
-      if (!isSignedIn()) return null
-      const signedInUser = await apis.getSignedInUser()
-      userState.username = signedInUser.username
-      return signedInUser
+      if (!isSignedIn()) throw new Error('User not signed in')
+      return apis.getSignedInUser()
     },
     failureSummaryMessage: {
       en: 'Failed to load signed-in user information',
@@ -161,6 +175,42 @@ export function useSignedInUser() {
   })
 }
 
+export type SignedInState =
+  | {
+      isSignedIn: false
+      user: null
+    }
+  | {
+      isSignedIn: true
+      user: SignedInUser
+    }
+
+/**
+ * Get the signed-in state, including whether the user is signed in and the signed-in user information if available.
+ * Suitable for scenarios like:
+ * - callers need to known whether the user is signed in or not
+ * - callers need to acccess the loading or error state of the signed-in user query
+ */
+export function useSignedInStateQuery() {
+  const signedInUserQuery = useSignedInUserQuery()
+  return useQuery<SignedInState>(async (ctx) => {
+    if (!isSignedIn()) return { isSignedIn: false, user: null }
+    const user = await composeQuery(ctx, signedInUserQuery)
+    return { isSignedIn: true, user }
+  })
+}
+
+/**
+ * Get the signed-in user information, or null if not signed in or the information is not available (e.g. due to loading or error).
+ * Suitable for scenarios like:
+ * - callers only need the signed-in user information
+ * - callers don't need to distinguish between "not signed in" and "signed in but user information not available"
+ */
+export function useSignedInUser() {
+  const signedInStateQuery = useSignedInStateQuery()
+  return computed(() => signedInStateQuery.data.value?.user ?? null)
+}
+
 export function useUpdateSignedInUser() {
   const queryCache = useQueryCache()
 
@@ -168,7 +218,9 @@ export function useUpdateSignedInUser() {
     async function updateSignedInUser(
       params: Pick<apis.UpdateSignedInUserParams, 'displayName' | 'avatar' | 'description'>
     ) {
+      const unresolvedUsername = getUnresolvedSignedInUsername()
       const updated = await apis.updateSignedInUser(params)
+      if (unresolvedUsername != null) queryCache.invalidate(getUserQueryKey(unresolvedUsername))
       queryCache.invalidate(getUserQueryKey(updated.username))
       return updated
     },
@@ -176,18 +228,23 @@ export function useUpdateSignedInUser() {
   )
 }
 
+/**
+ * Modify username for the signed-in user.
+ * NOTE: The signed-in user will be signed out after modifying the username.
+ * Typically the caller may want to reload the route to trigger navigation guards or initiate sign-in manually.
+ */
 export function useModifySignedInUsername() {
   const queryCache = useQueryCache()
 
   return useAction(
     async function modifySignedInUsername(newUsername: string) {
-      const oldUsername = getSignedInUsername()
+      const oldUsername = getUnresolvedSignedInUsername()
       if (oldUsername == null) throw new Error('Signed-in username is not available')
 
       const updated = await apis.updateSignedInUser({ username: newUsername })
-      userState.username = updated.username
       queryCache.invalidate(getUserQueryKey(oldUsername))
       queryCache.invalidate(getUserQueryKey(updated.username))
+      signOut()
       return updated
     },
     { en: 'Failed to modify username', zh: '修改用户名失败' }
diff --git a/spx-gui/src/stores/user/test.ts b/spx-gui/src/stores/user/test.ts
new file mode 100644
index 0000000000..7d2affbab6
--- /dev/null
+++ b/spx-gui/src/stores/user/test.ts
@@ -0,0 +1,46 @@
+import { ref, shallowRef } from 'vue'
+import { vi } from 'vitest'
+import type { ActionException } from '@/utils/exception'
+import type { QueryRet } from '@/utils/query'
+import type { SignedInState, SignedInUser } from './signed-in'
+
+function createSignedInUser(username: string): SignedInUser {
+  return {
+    id: 'user-id',
+    createdAt: '2025-01-01T00:00:00Z',
+    updatedAt: '2025-01-01T00:00:00Z',
+    username,
+    displayName: username,
+    avatar: '',
+    description: '',
+    plan: 'free',
+    capabilities: {
+      canManageAssets: false,
+      canManageCourses: false,
+      canUsePremiumLLM: false
+    }
+  }
+}
+
+export function makeSignedInState(username: string | null): SignedInState {
+  if (username == null) {
+    return {
+      isSignedIn: false,
+      user: null
+    }
+  }
+  return {
+    isSignedIn: true,
+    user: createSignedInUser(username)
+  }
+}
+
+export function makeSignedInStateQuery(initialState: SignedInState | null): QueryRet<SignedInState> {
+  return {
+    isLoading: ref(initialState == null),
+    data: shallowRef(initialState),
+    error: shallowRef<ActionException | null>(null),
+    progress: shallowRef({ percentage: 0, timeLeft: null, desc: null }),
+    refetch: vi.fn()
+  }
+}
diff --git a/spx-gui/src/utils/query.ts b/spx-gui/src/utils/query.ts
index 622569b40e..c2d6bf4b5a 100644
--- a/spx-gui/src/utils/query.ts
+++ b/spx-gui/src/utils/query.ts
@@ -159,6 +159,13 @@ function getCollector(reporter: ProgressReporter) {
 
 export type SubReporterParams = Parameters<ProgressCollector['getSubReporter']>
 
+/** Wait until a query is loaded, then return its data or throw its error. */
+export async function untilLoaded<T>(queryRet: QueryRet<T>, signal?: AbortSignal): Promise<T> {
+  await until(() => !queryRet.isLoading.value, signal)
+  if (queryRet.error.value != null) throw queryRet.error.value
+  return queryRet.data.value!
+}
+
 /**
  * Compose query in another query.
  * - If the query is loading, wait until it's done.
@@ -184,7 +191,5 @@ export async function composeQuery<T>(
   const stopWatch = watch(queryRet.progress, (p) => subReporter.report(p), { immediate: true })
   ctx.signal.addEventListener('abort', () => stopWatch())
 
-  await until(() => !queryRet.isLoading.value, ctx.signal)
-  if (queryRet.error.value != null) throw queryRet.error.value
-  return queryRet.data.value!
+  return untilLoaded(queryRet, ctx.signal)
 }
diff --git a/spx-gui/src/utils/user-storage.ts b/spx-gui/src/utils/user-storage.ts
index d6db2c9e87..7821ca68b8 100644
--- a/spx-gui/src/utils/user-storage.ts
+++ b/spx-gui/src/utils/user-storage.ts
@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue'
-import { getSignedInUsername } from '@/stores/user'
+import { getUnresolvedSignedInUsername } from '@/stores/user'
 import { isObject, isString } from 'lodash'
 
 type IStorage = {
@@ -31,7 +31,10 @@ function createUserScopeValue<T>(user: string, value: T): UserScopeValue<T> {
 
 // private
 function userStorageRef<T>(key: string, initialValue: T, storage: IStorage = localStorage) {
-  const scope = computed(() => getSignedInUsername() ?? unauthorized)
+  // Ideally user-scoped storage would use a canonical signed-in username. We currently use the
+  // unresolved signed-in username as a temporary fallback because this scope needs to be computed
+  // synchronously from locally available session state.
+  const scope = computed(() => getUnresolvedSignedInUsername() ?? unauthorized)
   const counter = ref(0)
   return computed<T>({
     get() {