diff --git a/spx-gui/src/components/common/markdown-vue/MarkdownView.ts b/spx-gui/src/components/common/markdown-vue/MarkdownView.ts
index 37c54b79b..9339667bb 100644
--- a/spx-gui/src/components/common/markdown-vue/MarkdownView.ts
+++ b/spx-gui/src/components/common/markdown-vue/MarkdownView.ts
@@ -106,14 +106,18 @@ function renderHastNode(node: hast.Node, components: Components, key?: string |
 function renderHastElement(element: hast.Element, components: Components, key?: string | number): VNode {
   let props: Record<string, string | number | boolean>
   let type: string | Component
-  let children: VRendered | (() => VRendered)
+  let children: VRendered | (() => VRendered) | undefined
   const customComponents = components.custom ?? {}
   if (Object.prototype.hasOwnProperty.call(customComponents, element.tagName)) {
     type = customComponents[element.tagName]
     props = hastProps2VueProps(element.properties)
-    // Use function slot for custom components to avoid Vue warning:
-    // [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
-    children = () => element.children.map((c, i) => renderHastNode(c, components, i))
+    if (element.children.length === 0) {
+      children = undefined
+    } else {
+      // Use function slot for custom components to avoid Vue warning:
+      // [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
+      children = () => element.children.map((c, i) => renderHastNode(c, components, i))
+    }
   } else if (
     // Render code blocks with `components.codeBlock`
     // TODO: It may be simpler to recognize & process code blocks based on mdast instead of hast
diff --git a/spx-gui/src/components/editor/code-editor/CodeLink.vue b/spx-gui/src/components/editor/code-editor/CodeLink.vue
new file mode 100644
index 000000000..c1def5931
--- /dev/null
+++ b/spx-gui/src/components/editor/code-editor/CodeLink.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { useI18n } from '@/utils/i18n'
+import { type Range, type Position, type TextDocumentIdentifier, textDocumentId2CodeFileName } from './common'
+import { useCodeEditorCtx } from './context'
+
+const props = defineProps<{
+  file: TextDocumentIdentifier
+  position?: Position
+  range?: Range
+}>()
+
+const slots = useSlots()
+const i18n = useI18n()
+const codeEditorCtx = useCodeEditorCtx()
+
+const codeFileName = computed(() => i18n.t(textDocumentId2CodeFileName(props.file)))
+
+const defaultText = computed(() => {
+  const { position, range } = props
+  if (position != null)
+    return i18n.t({
+      en: `${codeFileName.value}: Line ${position.line} Col ${position.column}`,
+      zh: `${codeFileName.value}: 第 ${position.line} 行 第 ${position.column} 列`
+    })
+  if (range != null) {
+    const { start, end } = range
+    if (start.line === end.line) {
+      return i18n.t({
+        en: `${codeFileName.value}: Line ${start.line} Col ${start.column}-${end.column}`,
+        zh: `${codeFileName.value}: 第 ${start.line} 行 第 ${start.column}-${end.column} 列`
+      })
+    } else {
+      return i18n.t({
+        en: `${codeFileName.value}: Line ${start.line}-${end.line}`,
+        zh: `${codeFileName.value}: 第 ${start.line}-${end.line} 行`
+      })
+    }
+  }
+  throw new Error('Either `position` or `range` must be provided')
+})
+
+function handleClick() {
+  const ui = codeEditorCtx.getAttachedUI()
+  if (ui == null) return
+  const { file, position, range } = props
+  if (position != null) {
+    ui.open(file, position)
+    return
+  }
+  if (range != null) {
+    ui.open(file, range)
+    return
+  }
+  throw new Error('Either `position` or `range` must be provided')
+}
+</script>
+
+<template>
+  <a class="code-link" href="javascript:;" @click.prevent="handleClick">
+    <template v-if="!!slots.default">
+      <slot></slot>
+    </template>
+    <template v-else>
+      {{ defaultText }}
+    </template>
+  </a>
+</template>
+
+<style lang="scss" scoped>
+@import '@/components/ui/link.scss';
+
+.code-link {
+  @include link(boring);
+}
+</style>
diff --git a/spx-gui/src/components/editor/code-editor/code-editor.ts b/spx-gui/src/components/editor/code-editor/code-editor.ts
index 572467a6b..0d15f88d2 100644
--- a/spx-gui/src/components/editor/code-editor/code-editor.ts
+++ b/spx-gui/src/components/editor/code-editor/code-editor.ts
@@ -485,6 +485,11 @@ export class CodeEditor extends Disposable {
     if (idx !== -1) this.uis.splice(idx, 1)
   }
 
+  getAttachedUI() {
+    if (this.uis.length === 0) return null
+    return this.uis[this.uis.length - 1]
+  }
+
   init() {
     this.lspClient.init()
   }
diff --git a/spx-gui/src/components/editor/code-editor/common.ts b/spx-gui/src/components/editor/code-editor/common.ts
index a292ee21d..f37c2b673 100644
--- a/spx-gui/src/components/editor/code-editor/common.ts
+++ b/spx-gui/src/components/editor/code-editor/common.ts
@@ -537,3 +537,18 @@ export function textDocumentId2ResourceModelId(
   }
   return null
 }
+
+export function textDocumentIdEq(a: TextDocumentIdentifier | null, b: TextDocumentIdentifier | null) {
+  if (a == null || b == null) return a === b
+  return a.uri === b.uri
+}
+
+export function textDocumentId2CodeFileName(id: TextDocumentIdentifier) {
+  const codeFilePath = getCodeFilePath(id.uri)
+  if (stageCodeFilePaths.includes(codeFilePath)) {
+    return { en: 'Stage', zh: '舞台' }
+  } else {
+    const spriteName = codeFilePath.replace(/\.spx$/, '')
+    return { en: spriteName, zh: spriteName }
+  }
+}
diff --git a/spx-gui/src/components/editor/code-editor/context.ts b/spx-gui/src/components/editor/code-editor/context.ts
index 72e5bd8ae..96509dcd1 100644
--- a/spx-gui/src/components/editor/code-editor/context.ts
+++ b/spx-gui/src/components/editor/code-editor/context.ts
@@ -15,6 +15,7 @@ import { CodeEditor } from './code-editor'
 export type CodeEditorCtx = {
   attachUI(ui: ICodeEditorUI): void
   detachUI(ui: ICodeEditorUI): void
+  getAttachedUI(): ICodeEditorUI | null
   getMonaco(): Monaco
   getTextDocument: (id: TextDocumentIdentifier) => TextDocument | null
   formatTextDocument(id: TextDocumentIdentifier): Promise<void>
@@ -159,6 +160,10 @@ export function useProvideCodeEditorCtx(
       if (editorRef.value == null) throw new Error('Code editor not initialized')
       editorRef.value.detachUI(ui)
     },
+    getAttachedUI() {
+      if (editorRef.value == null) throw new Error('Code editor not initialized')
+      return editorRef.value.getAttachedUI()
+    },
     getMonaco() {
       if (monacoRef.value == null) throw new Error('Monaco not initialized')
       return monacoRef.value
diff --git a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
index 866d39671..ddbe7d29d 100644
--- a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
@@ -59,6 +59,8 @@ import CopilotUI from './copilot/CopilotUI.vue'
 import DiagnosticsUI from './diagnostics/DiagnosticsUI.vue'
 import ResourceReferenceUI from './resource-reference/ResourceReferenceUI.vue'
 import ContextMenuUI from './context-menu/ContextMenuUI.vue'
+import DocumentTabs from './document-tab/DocumentTabs.vue'
+import ZoomControl from './ZoomControl.vue'
 
 const props = defineProps<{
   codeFilePath: string
@@ -117,13 +119,17 @@ const uiRef = computed(() => {
   )
 })
 
-const monacoEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
+const initialFontSize = 12
+const fontSize = useLocalStorage('spx-gui-code-font-size', initialFontSize)
+
+const monacoEditorOptions = computed<monaco.editor.IStandaloneEditorConstructionOptions>(() => ({
   language: 'spx',
   theme,
   tabSize,
   insertSpaces,
+  fontSize: fontSize.value,
   contextmenu: false
-}
+}))
 
 const monacEditorInitDataRef = shallowRef<MonacoEditorInitData | null>(null)
 
@@ -141,6 +147,13 @@ watch(
     signal.throwIfAborted()
     ui.init(...initData)
 
+    ui.editor.onDidChangeConfiguration((e) => {
+      const fontSizeId = ui.monaco.editor.EditorOption.fontSize
+      if (e.hasChanged(fontSizeId)) {
+        fontSize.value = ui.editor.getOptions().get(fontSizeId)
+      }
+    })
+
     codeEditorCtx.attachUI(ui)
     signal.addEventListener('abort', () => {
       codeEditorCtx.detachUI(ui)
@@ -200,6 +213,19 @@ watchEffect((onCleanup) => {
   )
   signal.addEventListener('abort', endResizing)
 })
+
+function zoomIn() {
+  uiRef.value.editor.trigger('keyboard', `editor.action.fontZoomIn`, {})
+}
+
+function zoomOut() {
+  uiRef.value.editor.trigger('keyboard', `editor.action.fontZoomOut`, {})
+}
+
+function zoomReset() {
+  uiRef.value.editor.updateOptions({ fontSize: initialFontSize })
+  uiRef.value.editor.trigger('keyboard', `editor.action.fontZoomReset`, {})
+}
 </script>
 
 <template>
@@ -241,6 +267,10 @@ watchEffect((onCleanup) => {
     <DiagnosticsUI :controller="uiRef.diagnosticsController" />
     <ResourceReferenceUI :controller="uiRef.resourceReferenceController" />
     <ContextMenuUI :controller="uiRef.contextMenuController" />
+    <aside class="right-sidebar">
+      <DocumentTabs class="document-tabs" />
+      <ZoomControl class="zoom-control" @in="zoomIn" @out="zoomOut" @reset="zoomReset" />
+    </aside>
   </div>
 </template>
 
@@ -323,10 +353,31 @@ watchEffect((onCleanup) => {
 .monaco-editor {
   flex: 1 1 0;
   min-width: 0;
+  margin: 12px 0;
 }
 
 :global(.code-editor-content-widget) {
   z-index: 10; // Ensure content widget is above other elements, especially cursor
   padding: 2px 0; // Gap between content widget and text
 }
+
+.right-sidebar {
+  padding: 12px 8px;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 40px;
+
+  .document-tabs {
+    flex: 0 1 auto;
+    min-height: 0;
+  }
+
+  .zoom-control {
+    flex: 0 0 auto;
+  }
+}
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/ui/ZoomControl.vue b/spx-gui/src/components/editor/code-editor/ui/ZoomControl.vue
new file mode 100644
index 000000000..134beba07
--- /dev/null
+++ b/spx-gui/src/components/editor/code-editor/ui/ZoomControl.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import iconZoomIn from './icons/zoom-in.svg?raw'
+import iconZoomOut from './icons/zoom-out.svg?raw'
+import iconZoomReset from './icons/zoom-reset.svg?raw'
+
+const emit = defineEmits<{
+  in: []
+  out: []
+  reset: []
+}>()
+</script>
+
+<template>
+  <div class="zoomer">
+    <!-- eslint-disable vue/no-v-html -->
+    <button class="zoom-btn" title="Zoom in" @click="emit('in')" v-html="iconZoomIn" />
+    <button class="zoom-btn" title="Zoom out" @click="emit('out')" v-html="iconZoomOut" />
+    <button class="zoom-btn" title="Reset" @click="emit('reset')" v-html="iconZoomReset" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.zoomer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.zoom-btn {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  border-radius: 12px;
+  color: var(--ui-color-text);
+  background: none;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--ui-color-grey-300);
+  }
+  &:active {
+    background-color: var(--ui-color-grey-400);
+  }
+}
+</style>
diff --git a/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts b/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
index 2f410cc20..313b6b778 100644
--- a/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
@@ -1,5 +1,5 @@
 import { uniqueId } from 'lodash'
-import { ref, shallowRef } from 'vue'
+import { ref, shallowReactive, shallowRef } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { timeout } from '@/utils/utils'
 import type { I18n } from '@/utils/i18n'
@@ -21,7 +21,8 @@ import {
   type ResourceIdentifier,
   getResourceModel,
   type TextDocumentRange,
-  isRangeEmpty
+  isRangeEmpty,
+  textDocumentIdEq
 } from '../common'
 import { TextDocument } from '../text-document'
 import type { Monaco, MonacoEditor } from '../monaco'
@@ -188,6 +189,23 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
   resourceReferenceController = new ResourceReferenceController(this)
   documentBase: IDocumentBase | null = null
 
+  /** Temporary text document IDs */
+  private tempTextDocumentIds = shallowReactive<TextDocumentIdentifier[]>([])
+
+  /** Temporary text documents */
+  get tempTextDocuments() {
+    return this.tempTextDocumentIds.map((id) => {
+      const doc = this.getTextDocument(id)
+      if (doc == null) throw new Error(`Text document not found: ${id.uri}`)
+      return doc
+    })
+  }
+
+  closeTempTextDocuments() {
+    this.setActiveTextDocument(this.mainTextDocumentId)
+    this.tempTextDocumentIds.splice(0)
+  }
+
   /** Current active text document ID */
   private activeTextDocumentIdRef = shallowRef<TextDocumentIdentifier | null>(null)
 
@@ -204,6 +222,12 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
       this.editor.setModel(null)
       return
     }
+    if (
+      !textDocumentIdEq(textDocument.id, this.mainTextDocumentId) &&
+      !this.tempTextDocumentIds.some((id) => textDocumentIdEq(id, textDocument.id))
+    ) {
+      this.tempTextDocumentIds.push(textDocument.id)
+    }
     this.activeTextDocumentIdRef.value = textDocument.id
     this.editor.setModel(textDocument.monacoTextModel)
   }
diff --git a/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue b/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue
new file mode 100644
index 000000000..0798c0ecb
--- /dev/null
+++ b/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFileUrl } from '@/utils/file'
+import { Sprite } from '@/models/sprite'
+import { Stage } from '@/models/stage'
+import { UIImg, UITooltip } from '@/components/ui'
+import { textDocumentId2CodeFileName, textDocumentId2ResourceModelId } from '../../common'
+import type { TextDocument } from '../../text-document'
+import { useCodeEditorUICtx } from '../CodeEditorUI.vue'
+
+const props = defineProps<{
+  textDocument: TextDocument
+  isActive: boolean
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+const codeEditorUICtx = useCodeEditorUICtx()
+
+const resourceModel = computed(() => {
+  const project = codeEditorUICtx.ui.project
+  const resourceModelId = textDocumentId2ResourceModelId(props.textDocument.id, project)
+  if (resourceModelId == null) return null
+  return project.getResourceModel(resourceModelId)
+})
+
+const name = computed(() => textDocumentId2CodeFileName(props.textDocument.id))
+
+const [spriteImgUrl] = useFileUrl(() => {
+  if (resourceModel.value instanceof Sprite) return resourceModel.value.defaultCostume?.img
+  return null
+})
+
+const [stageImgUrl] = useFileUrl(() => {
+  if (resourceModel.value instanceof Stage) return resourceModel.value.defaultBackdrop?.img
+  return null
+})
+</script>
+
+<template>
+  <UITooltip placement="right">
+    {{ $t(name) }}
+    <template #trigger>
+      <div class="document-tab" :class="{ active: isActive }" @click="emit('click')">
+        <UIImg v-if="spriteImgUrl != null" class="sprite-img" :src="spriteImgUrl" />
+        <!-- TODO: white background? -->
+        <UIImg v-else-if="stageImgUrl != null" class="stage-img" :src="stageImgUrl" />
+      </div>
+    </template>
+  </UITooltip>
+</template>
+
+<style lang="scss" scoped>
+.document-tab {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-radius: var(--ui-border-radius-1);
+  border: 2px solid transparent;
+  transition: 0.2s;
+
+  &.active {
+    border: 2px solid var(--ui-color-yellow-500);
+    background-color: var(--ui-color-yellow-200);
+  }
+
+  &:not(.active) {
+    cursor: pointer;
+    &:hover {
+      background-color: var(--ui-color-grey-300);
+    }
+  }
+}
+
+.sprite-img,
+.stage-img {
+  border-radius: 4px;
+}
+
+.sprite-img {
+  width: 100%;
+  height: 100%;
+}
+
+.stage-img {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+}
+</style>
diff --git a/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTabs.vue b/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTabs.vue
new file mode 100644
index 000000000..977de752d
--- /dev/null
+++ b/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTabs.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UIDivider, UIIcon, UITooltip } from '@/components/ui'
+import { textDocumentIdEq } from '../../common'
+import type { TextDocument } from '../../text-document'
+import { useCodeEditorUICtx } from '../CodeEditorUI.vue'
+import DocumentTab from './DocumentTab.vue'
+
+const codeEditorUICtx = useCodeEditorUICtx()
+const mainTextDocument = computed(() => codeEditorUICtx.ui.mainTextDocument)
+const tempTextDocuments = computed(() => codeEditorUICtx.ui.tempTextDocuments)
+
+function isActive(doc: TextDocument) {
+  return textDocumentIdEq(doc.id, codeEditorUICtx.ui.activeTextDocument?.id ?? null)
+}
+
+function handleTabClick(doc: TextDocument) {
+  codeEditorUICtx.ui.open(doc.id)
+}
+
+function handleClose() {
+  codeEditorUICtx.ui.closeTempTextDocuments()
+}
+</script>
+
+<template>
+  <div class="document-tabs">
+    <DocumentTab
+      v-if="mainTextDocument != null"
+      :text-document="mainTextDocument"
+      :is-active="isActive(mainTextDocument)"
+      @click="handleTabClick(mainTextDocument)"
+    />
+    <template v-if="tempTextDocuments.length > 0">
+      <UIDivider class="divider" />
+      <div class="temp-tabs">
+        <DocumentTab
+          v-for="textDocument in tempTextDocuments"
+          :key="textDocument.id.uri"
+          :text-document="textDocument"
+          :is-active="isActive(textDocument)"
+          @click="handleTabClick(textDocument)"
+        />
+      </div>
+      <UITooltip placement="right">
+        {{ $t({ en: 'Close all', zh: '全部关闭' }) }}
+        <template #trigger>
+          <button class="close-btn" @click="handleClose">
+            <UIIcon class="icon" type="closeCircle" />
+          </button>
+        </template>
+      </UITooltip>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.document-tabs {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.divider {
+  width: 32px;
+  margin: 12px 0;
+}
+
+.temp-tabs {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  scrollbar-width: none;
+}
+
+.close-btn {
+  margin-top: 8px;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  border-radius: var(--ui-border-radius-1);
+
+  &:hover {
+    background-color: var(--ui-color-grey-300);
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.ts b/spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.ts
new file mode 100644
index 000000000..762b6239a
--- /dev/null
+++ b/spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.ts
@@ -0,0 +1,61 @@
+import { defineComponent, h } from 'vue'
+import { type Range, type Position } from '../../common'
+import RawCodeLink from '../../CodeLink.vue'
+
+export type Props = {
+  /** Text document URI, e.g., `file:///NiuXiaoQi.spx` */
+  file: string
+  /** `${line},${column}`, e.g., `10,20` */
+  position?: string
+  /** `${startLine},${startColumn}-${endLine}${endColumn}`, e.g., `10,20-12,10` */
+  range?: string
+}
+
+export default defineComponent<Props>(
+  (props, { slots }) => {
+    return function render() {
+      // We use render function to define `CodeLink` to properly pass `slots` to `RawCodeLink`
+      return h(
+        RawCodeLink,
+        {
+          file: { uri: props.file },
+          position: parsePosition(props.position),
+          range: parseRange(props.range)
+        },
+        slots
+      )
+    }
+  },
+  {
+    name: 'CodeLink',
+    props: {
+      file: {
+        type: String,
+        required: true
+      },
+      position: {
+        type: String,
+        required: false,
+        default: undefined
+      },
+      range: {
+        type: String,
+        required: false,
+        default: undefined
+      }
+    }
+  }
+)
+
+function parsePosition(positionStr: string | undefined): Position | undefined {
+  if (positionStr == null || positionStr === '') return undefined
+  const [line, column] = positionStr.split(',').map((p) => parseInt(p.trim(), 10))
+  return { line, column }
+}
+
+function parseRange(rangeStr: string | undefined): Range | undefined {
+  if (rangeStr == null || rangeStr === '') return undefined
+  const [start, end] = rangeStr.split('-').map(parsePosition)
+  if (start == null || end == null) return undefined
+  return { start, end }
+}
diff --git a/spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.vue b/spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.vue
deleted file mode 100644
index 099ca96b5..000000000
--- a/spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
-import { useI18n } from '@/utils/i18n'
-import { type Range, type Position, getCodeFilePath } from '../../common'
-import { useCodeEditorUICtx } from '../CodeEditorUI.vue'
-
-const props = defineProps<{
-  /** Text document URI, e.g., `file:///NiuXiaoQi.spx` */
-  file: string
-  /** `${line},${column}`, e.g., `10,20` */
-  position?: string
-  /** `${startLine},${startColumn}-${endLine}${endColumn}`, e.g., `10,20-12,10` */
-  range?: string
-}>()
-
-const slots = useSlots()
-const i18n = useI18n()
-const codeEditorContext = useCodeEditorUICtx()
-
-const file = computed(() => {
-  const codeFilePath = getCodeFilePath(props.file)
-  return codeFilePath.replace(/\.spx$/, '')
-})
-
-function parsePosition(positionStr: string): Position {
-  const [line, column] = positionStr.split(',').map((p) => parseInt(p.trim(), 10))
-  return { line, column }
-}
-
-const position = computed<Position | null>(() => {
-  if (props.position == null || props.position === '') return null
-  return parsePosition(props.position)
-})
-
-const range = computed<Range | null>(() => {
-  if (props.range == null || props.range === '') return null
-  const [start, end] = props.range.split('-').map(parsePosition)
-  return { start, end }
-})
-
-const text = computed(() => {
-  if (slots.default != null) {
-    const content = slots.default()
-    if (content.length > 0) return content
-  }
-  if (position.value != null)
-    return i18n.t({
-      en: `${file.value}: Line ${position.value.line} Col ${position.value.column}`,
-      zh: `${file.value}: 第 ${position.value.line} 行 第 ${position.value.column} 列`
-    })
-  if (range.value != null) {
-    const { start, end } = range.value
-    if (start.line === end.line) {
-      return i18n.t({
-        en: `${file.value}: Line ${start.line} Col ${start.column}-${end.column}`,
-        zh: `${file.value}: 第 ${start.line} 行 第 ${start.column}-${end.column} 列`
-      })
-    } else {
-      return i18n.t({
-        en: `${file.value}: Line ${start.line}-${end.line}`,
-        zh: `${file.value}: 第 ${start.line}-${end.line} 行`
-      })
-    }
-  }
-  throw new Error('Either `position` or `range` must be provided')
-})
-
-function handleClick() {
-  const textDocumentId = { uri: props.file }
-  if (position.value != null) {
-    codeEditorContext.ui.open(textDocumentId, position.value)
-    return
-  }
-  if (range.value != null) {
-    codeEditorContext.ui.open(textDocumentId, range.value)
-    return
-  }
-  throw new Error('either `position` or `range` must be provided')
-}
-</script>
-
-<template>
-  <a class="code-link" href="javascript:;" @click.prevent="handleClick">{{ text }}</a>
-</template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/link.scss';
-
-.code-link {
-  @include link(boring);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue b/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue
index 1f6527ee7..4c0ec3f66 100644
--- a/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue
@@ -4,7 +4,7 @@ import { useI18n, type LocaleMessage } from '@/utils/i18n'
 import MarkdownView from '@/components/common/markdown-vue/MarkdownView'
 import type { MarkdownStringFlag } from '../../common'
 import DefinitionItem from '../definition/DefinitionItem.vue'
-import CodeLink from './CodeLink.vue'
+import CodeLink from './CodeLink'
 import CodeBlock from './CodeBlock.vue'
 import ResourcePreview from './ResourcePreview.vue'
 import DiagnosticItem from './DiagnosticItem.vue'
diff --git a/spx-gui/src/components/editor/panels/ConsolePanel.vue b/spx-gui/src/components/editor/panels/ConsolePanel.vue
index 5121b1352..96b624365 100644
--- a/spx-gui/src/components/editor/panels/ConsolePanel.vue
+++ b/spx-gui/src/components/editor/panels/ConsolePanel.vue
@@ -1,10 +1,35 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { UICard, UICardHeader } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import type { RuntimeOutput } from '@/models/runtime'
+import { UICard, UICardHeader, UIEmpty } from '@/components/ui'
 import { useEditorCtx } from '../EditorContextProvider.vue'
+import CodeLink from '../code-editor/CodeLink.vue'
+import { textDocumentId2CodeFileName } from '../code-editor/common'
 
+const i18n = useI18n()
 const editorCtx = useEditorCtx()
 const runtime = computed(() => editorCtx.runtime)
+
+function handleOutput(outputEl: unknown, i: number) {
+  if (i !== runtime.value.outputs.length - 1) return
+  if (outputEl == null) return
+  ;(outputEl as HTMLElement).scrollIntoView({ behavior: 'smooth' })
+}
+
+function getOutputSourceLocation(output: RuntimeOutput) {
+  // TODO: use `output.source`, see details in https://github.com/goplus/builder/issues/1096
+  return {
+    file: { uri: 'file:///main.spx' },
+    position: { line: 1, column: 1 }
+  }
+}
+
+function getOutputSourceLocationText(runtime: RuntimeOutput) {
+  const { file, position } = getOutputSourceLocation(runtime)
+  const codeFileName = i18n.t(textDocumentId2CodeFileName(file))
+  return `${codeFileName}:${position.line}`
+}
 </script>
 
 <template>
@@ -13,8 +38,26 @@ const runtime = computed(() => editorCtx.runtime)
       {{ $t({ en: 'Console', zh: '控制台' }) }}
     </UICardHeader>
     <ul class="output-container">
-      <li v-for="(output, i) in runtime.outputs" :key="i" class="output">
-        {{ output.message }}
+      <UIEmpty v-if="runtime.outputs.length === 0" size="small">
+        <template v-if="runtime.running.mode === 'debug' && runtime.running.initializing">
+          {{ $t({ en: 'Initializing...', zh: '初始化中...' }) }}
+        </template>
+        <template v-else>
+          {{ $t({ en: 'No output', zh: '无输出' }) }}
+        </template>
+      </UIEmpty>
+      <li
+        v-for="(output, i) in runtime.outputs"
+        :key="i"
+        :ref="(el) => handleOutput(el, i)"
+        class="output"
+        :class="`kind-${output.kind}`"
+      >
+        <span class="message">{{ output.message }}</span>
+        <!-- TODO: reconfirm style detail here -->
+        <CodeLink class="link" v-bind="getOutputSourceLocation(output)">{{
+          getOutputSourceLocationText(output)
+        }}</CodeLink>
       </li>
     </ul>
   </UICard>
@@ -26,7 +69,30 @@ const runtime = computed(() => editorCtx.runtime)
   flex-direction: column;
 }
 .output-container {
+  padding: 12px;
   flex: 1 1 0;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.output {
+  color: var(--ui-color-grey-900);
+  &.kind-error {
+    color: var(--ui-color-red-200);
+  }
+}
+
+.message {
+  flex: 1 1 0;
+  white-space: pre-line;
+  font-family: var(--ui-font-family-code);
+}
+
+.link {
+  float: right;
+  margin-left: 8px;
+  color: var(--ui-color-grey-900);
 }
 </style>
diff --git a/spx-gui/src/components/editor/panels/EditorPanels.vue b/spx-gui/src/components/editor/panels/EditorPanels.vue
index 16290f6ed..58ee4eec4 100644
--- a/spx-gui/src/components/editor/panels/EditorPanels.vue
+++ b/spx-gui/src/components/editor/panels/EditorPanels.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="running !== 'debug'" class="editor-panels">
+  <div v-show="running.mode !== 'debug'" class="editor-panels">
     <UICard class="main">
       <SpritesPanel :expanded="expandedPanel === 'sprites'" @expand="expand('sprites')" />
       <SoundsPanel :expanded="expandedPanel === 'sounds'" @expand="expand('sounds')" />
@@ -8,7 +8,7 @@
       <StagePanel></StagePanel>
     </UICard>
   </div>
-  <ConsolePanel v-show="running === 'debug'" class="console-panel" />
+  <ConsolePanel v-show="running.mode === 'debug'" class="console-panel" />
 </template>
 
 <script setup lang="ts">
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 22cf4466b..e3ee054a8 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -1,6 +1,6 @@
 <template>
   <UICard class="editor-preview">
-    <UICardHeader v-if="running !== 'debug'">
+    <UICardHeader v-if="running.mode !== 'debug'">
       <div class="header">
         {{ $t({ en: 'Preview', zh: '预览' }) }}
       </div>
@@ -8,7 +8,7 @@
         ref="runButtonRef"
         class="button"
         type="primary"
-        icon="play"
+        icon="playHollow"
         :loading="startDebugging.isLoading.value"
         @click="startDebugging.fn"
       >
@@ -16,20 +16,55 @@
       </UIButton>
       <UIButton
         ref="fullScreenRunButtonRef"
-        class="button"
-        type="primary"
-        icon="play"
+        class="button full-screen-run-button"
+        type="boring"
         :loading="startRunning.isLoading.value"
         @click="startRunning.fn"
       >
-        {{ $t({ en: 'Full screen', zh: '全屏' }) }}
+        <template #icon>
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M8.61229 7.50624L6.59284 9.20967C6.25334 9.49609 5.73593 9.25286 5.73593 8.80778V5.19214C5.73593 4.74647 6.25276 4.50382 6.59284 4.79024L8.61229 6.49367C8.92554 6.75792 8.92554 7.24199 8.61229 7.50624Z"
+              fill="#57606A"
+            />
+            <path
+              d="M4.99991 2.3501H2.55001C2.43955 2.3501 2.35001 2.43964 2.35001 2.5501V5"
+              stroke="#57606A"
+              stroke-width="1.4"
+            />
+            <path
+              d="M9.00009 2.3501H11.45C11.5605 2.3501 11.65 2.43964 11.65 2.5501V5"
+              stroke="#57606A"
+              stroke-width="1.4"
+            />
+            <path
+              d="M4.99991 11.6499H2.55001C2.43955 11.6499 2.35001 11.5604 2.35001 11.4499V9"
+              stroke="#57606A"
+              stroke-width="1.4"
+            />
+            <path
+              d="M9.00009 11.6499H11.45C11.5605 11.6499 11.65 11.5604 11.65 11.4499V9"
+              stroke="#57606A"
+              stroke-width="1.4"
+            />
+          </svg>
+        </template>
       </UIButton>
     </UICardHeader>
     <UICardHeader v-else>
       <div class="header">
         {{ $t({ en: 'Running', zh: '运行中' }) }}
       </div>
-      <UIButton class="button" type="primary" icon="stop" @click="setRunning('none')">
+      <UIButton
+        class="button"
+        type="primary"
+        icon="rotate"
+        :disabled="running.initializing"
+        @click="handleInPlaceRerun"
+      >
+        {{ $t({ en: 'Rerun', zh: '重新运行' }) }}
+      </UIButton>
+      <UIButton class="button" type="boring" icon="stop" :disabled="running.initializing" @click="handleStop">
         {{ $t({ en: 'Stop', zh: '停止' }) }}
       </UIButton>
     </UICardHeader>
@@ -39,15 +74,15 @@
       Although naive-ui modal supports `display-directive: show`, it does not initialize the component until it is shown for the first time.
       TODO: Update `UIModal` to support this requirement.
     -->
-    <div class="full-screen-runner-modal" :class="{ visible: running === 'run' }" :style="modalStyle">
-      <RunnerContainer :project="editorCtx.project" :visible="running === 'run'" @close="setRunning('none')" />
+    <div class="full-screen-runner-modal" :class="{ visible: running.mode === 'run' }" :style="modalStyle">
+      <RunnerContainer :project="editorCtx.project" :visible="running.mode === 'run'" @close="handleStop" />
     </div>
 
     <div class="main">
       <div class="stage-viewer-container">
         <StageViewer />
-        <div v-show="running === 'debug'" class="in-place-runner">
-          <InPlaceRunner :project="editorCtx.project" :visible="running === 'debug'" />
+        <div v-show="running.mode === 'debug'" class="in-place-runner">
+          <InPlaceRunner ref="inPlaceRunner" :project="editorCtx.project" :visible="running.mode === 'debug'" />
         </div>
       </div>
     </div>
@@ -57,7 +92,6 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { useAction, useMessageHandle } from '@/utils/exception'
-import type { RunningMode } from '@/models/runtime'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { useCodeEditorCtx } from '@/components/editor/code-editor/context'
 import { UICard, UICardHeader, UIButton } from '@/components/ui'
@@ -70,8 +104,8 @@ const codeEditorCtx = useCodeEditorCtx()
 
 const running = computed(() => editorCtx.runtime.running)
 
-function setRunning(running: RunningMode) {
-  editorCtx.runtime.setRunning(running)
+function handleStop() {
+  editorCtx.runtime.setRunning({ mode: 'none' })
 }
 
 const formatWorkspace = useAction(
@@ -87,14 +121,20 @@ const formatWorkspace = useAction(
 
 const startRunning = useMessageHandle(async () => {
   await formatWorkspace()
-  setRunning('run')
+  editorCtx.runtime.setRunning({ mode: 'run' })
 })
 
 const startDebugging = useMessageHandle(async () => {
   await formatWorkspace()
-  setRunning('debug')
+  editorCtx.runtime.setRunning({ mode: 'debug', initializing: true })
 })
 
+const inPlaceRunner = ref<InstanceType<typeof InPlaceRunner>>()
+
+function handleInPlaceRerun() {
+  inPlaceRunner.value?.rerun()
+}
+
 const fullScreenRunButtonRef = ref<InstanceType<typeof UIButton>>()
 const modalStyle = computed(() => {
   if (!fullScreenRunButtonRef.value) return null
@@ -120,6 +160,10 @@ const modalStyle = computed(() => {
     margin-left: 8px;
   }
 
+  .full-screen-run-button :deep(.content) {
+    padding: 0 9px;
+  }
+
   .main {
     display: flex;
     overflow: hidden;
diff --git a/spx-gui/src/components/editor/preview/InPlaceRunner.vue b/spx-gui/src/components/editor/preview/InPlaceRunner.vue
index a795a8e17..b7648d5c6 100644
--- a/spx-gui/src/components/editor/preview/InPlaceRunner.vue
+++ b/spx-gui/src/components/editor/preview/InPlaceRunner.vue
@@ -30,13 +30,26 @@ watch(
     const signal = getCleanupSignal(onCleanup)
     const projectRunner = await untilNotNull(projectRunnerRef)
     signal.throwIfAborted()
-    projectRunner.run()
+    editorCtx.runtime.clearOutputs()
+    projectRunner.run().then(() => {
+      editorCtx.runtime.setRunning({ mode: 'debug', initializing: false })
+    })
     signal.addEventListener('abort', () => {
       projectRunner.stop()
     })
   },
   { immediate: true }
 )
+
+defineExpose({
+  async rerun() {
+    editorCtx.runtime.setRunning({ mode: 'debug', initializing: true })
+    const projectRunner = await untilNotNull(projectRunnerRef)
+    editorCtx.runtime.clearOutputs()
+    await projectRunner.rerun()
+    editorCtx.runtime.setRunning({ mode: 'debug', initializing: false })
+  }
+})
 </script>
 
 <template>
diff --git a/spx-gui/src/components/editor/preview/RunnerContainer.vue b/spx-gui/src/components/editor/preview/RunnerContainer.vue
index d193b8e98..1be98dda8 100644
--- a/spx-gui/src/components/editor/preview/RunnerContainer.vue
+++ b/spx-gui/src/components/editor/preview/RunnerContainer.vue
@@ -9,51 +9,21 @@
         <UIButton class="button" icon="rotate" @click="handleRerun">
           {{ $t({ en: 'Rerun', zh: '重新运行' }) }}
         </UIButton>
-        <UIButton class="button" type="boring" icon="share" @click="handlePublish">
-          {{ $t({ en: 'Publish', zh: '发布' }) }}
-        </UIButton>
+        <!-- TODO: support "stop", which preserves the last frame -->
         <UIModalClose class="close" @click="emit('close')" />
       </div>
     </div>
-    <div :class="['main', displayMode, { expanded }]">
-      <div class="runner-container">
-        <div class="wrapper" :style="runnerAspectRatio">
-          <ProjectRunner
-            ref="projectRunnerRef"
-            :project="project"
-            :style="runnerAspectRatio"
-            class="runner"
-            @console="handleConsole"
-          />
-        </div>
-      </div>
-      <div class="console-container">
-        <div class="console-header">
-          <div>Console</div>
-          <button class="expand-icon" @click="expanded = !expanded">
-            <UIIcon type="arrowAlt" />
-          </button>
-        </div>
-        <div class="console">
-          <div class="spacer"></div>
-          <div v-for="{ id, time, message, type } in consoleMessages" :key="id" :class="`message message-${type}`">
-            <span class="time">{{ time }}</span>
-            <pre class="content">{{ message }}</pre>
-          </div>
-        </div>
-      </div>
+    <div class="main">
+      <ProjectRunner ref="projectRunnerRef" class="runner" :project="project" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, type CSSProperties, watch } from 'vue'
-import dayjs from 'dayjs'
+import { ref, watch } from 'vue'
 import { untilNotNull } from '@/utils/utils'
-import { useMessageHandle } from '@/utils/exception'
 import type { Project } from '@/models/project'
-import { UIButton, UIIcon, UIModalClose } from '@/components/ui'
-import { usePublishProject } from '@/components/project'
+import { UIButton, UIModalClose } from '@/components/ui'
 import ProjectRunner from '@/components/project/runner/ProjectRunner.vue'
 
 const props = defineProps<{
@@ -67,33 +37,12 @@ const emit = defineEmits<{
 
 const projectRunnerRef = ref<InstanceType<typeof ProjectRunner>>()
 
-const consoleMessages = ref<
-  {
-    id: number
-    time: string
-    message: string
-    type: 'log' | 'warn'
-  }[]
->([])
-const nextId = ref(0)
-
-const runnerAspectRatio = ref<CSSProperties>({
-  aspectRatio: '1/1'
-})
-const displayMode = ref<'landscape' | 'portrait'>('landscape')
-const expanded = ref(false)
-
 watch(
   () => props.visible,
   async (visible, _, onCleanup) => {
     if (!visible) return
 
-    const mapSize = props.project.stage.getMapSize()
-    runnerAspectRatio.value.aspectRatio = `${mapSize.width}/${mapSize.height}`
-    displayMode.value = mapSize.width > mapSize.height ? 'landscape' : 'portrait'
-
     const projectRunner = await untilNotNull(projectRunnerRef)
-    consoleMessages.value = []
     projectRunner.run()
     onCleanup(() => {
       projectRunner.stop()
@@ -102,31 +51,11 @@ watch(
   { immediate: true }
 )
 
-const handleConsole = (type: 'log' | 'warn', args: any[]) => {
-  const time = dayjs().format('HH:mm:ss.SSS')
-  const message = args.join(' ')
-  consoleMessages.value.unshift({ id: nextId.value++, time, message, type })
-}
-
 const handleRerun = () => {
   projectRunnerRef.value?.rerun()
-  consoleMessages.value = []
 }
-
-const publishProject = usePublishProject()
-const handlePublish = useMessageHandle(() => publishProject(props.project), {
-  en: 'Failed to publish project',
-  zh: '发布项目失败'
-}).fn
 </script>
 <style lang="scss" scoped>
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-
 .close {
   transform: scale(1.2);
 }
@@ -172,137 +101,19 @@ button {
   padding-right: 20px;
 }
 
-.runner-container {
-  overflow: hidden;
+.main {
+  padding: 20px;
   flex: 1;
-  display: flex;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
   justify-content: center;
   background-color: var(--ui-color-grey-300);
-  padding: 20px;
-}
-
-.wrapper {
-  height: 100%;
-  max-width: 100%;
-  display: flex;
-  align-items: center;
 }
 
 .runner {
-  width: 100%;
+  max-width: 100%;
   max-height: 100%;
-}
-
-.main {
-  flex: 1;
-  display: flex;
   overflow: hidden;
-  height: 100%;
-
-  &.landscape {
-    flex-direction: column;
-  }
-}
-
-.console {
-  padding: var(--ui-gap-middle);
-  flex-direction: column-reverse;
-  display: flex;
-  .message {
-    display: flex;
-    gap: var(--ui-gap-middle);
-    font-family: var(--ui-font-family-code);
-    .time {
-      flex: 0 0 auto;
-      opacity: 0.5;
-    }
-    .content {
-      flex: 1 1 0;
-      text-wrap: wrap;
-    }
-  }
-  .message-warn {
-    color: #ffb039;
-  }
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.expanded {
-  .console {
-    overflow-y: auto;
-  }
-}
-
-.portrait {
-  .console-container {
-    border-bottom: 1px solid var(--ui-color-grey-400);
-    border-right: none;
-    border-top: none;
-  }
-
-  .console {
-    width: 320px;
-  }
-
-  .expand-icon {
-    transform: rotate(-90deg);
-    position: absolute;
-    left: 16px;
-  }
-}
-
-.expanded.portrait {
-  .console {
-    width: calc(50vw - 24px);
-  }
-
-  .expand-icon {
-    transform: rotate(90deg);
-  }
-}
-.spacer {
-  flex: 1;
-}
-
-.landscape {
-  .console {
-    height: 100px;
-  }
-
-  .expand-icon {
-    transform: rotate(0deg);
-  }
-}
-
-.expanded.landscape {
-  .console {
-    height: 40vh;
-  }
-
-  .expand-icon {
-    transform: rotate(180deg);
-  }
-}
-
-.console-container {
-  border: 1px solid var(--ui-color-grey-400);
-  border-bottom: none;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.console-header {
-  min-height: 44px;
-  background-color: var(--ui-color-grey-300);
-  border-bottom: 1px solid var(--ui-color-grey-400);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-  gap: 8px;
-  position: relative;
-  color: var(--ui-color-title);
 }
 </style>
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 534f42605..56837a336 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -20,14 +20,14 @@ function handleConsole(type: 'log' | 'warn', args: unknown[]) {
 const version = useSpxVersion()
 
 defineExpose({
-  run() {
-    projectRunnerRef.value?.run()
+  async run() {
+    return projectRunnerRef.value?.run()
   },
-  stop() {
-    projectRunnerRef.value?.stop()
+  async stop() {
+    return projectRunnerRef.value?.stop()
   },
-  rerun() {
-    projectRunnerRef.value?.rerun()
+  async rerun() {
+    return projectRunnerRef.value?.rerun()
   }
 })
 </script>
diff --git a/spx-gui/src/components/project/runner/v1/ProjectRunnerV1.vue b/spx-gui/src/components/project/runner/v1/ProjectRunnerV1.vue
index d5bb79b3c..89a519585 100644
--- a/spx-gui/src/components/project/runner/v1/ProjectRunnerV1.vue
+++ b/spx-gui/src/components/project/runner/v1/ProjectRunnerV1.vue
@@ -9,6 +9,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue'
 import { registerPlayer } from '@/utils/player-registry'
+import { until } from '@/utils/utils'
 import { useFileUrl } from '@/utils/file'
 import { Project } from '@/models/project'
 import { UIImg, UILoading } from '@/components/ui'
@@ -16,14 +17,13 @@ import IframeDisplay, { preload } from './IframeDisplay.vue'
 
 const props = defineProps<{ project: Project }>()
 
-const zipData = ref<ArrayBuffer | null>(null)
-const loading = ref(false)
-
 const emit = defineEmits<{
   console: [type: 'log' | 'warn', args: unknown[]]
 }>()
 
 const [thumbnailUrl, thumbnailUrlLoading] = useFileUrl(() => props.project.thumbnail)
+const zipData = ref<ArrayBuffer | null>(null)
+const loading = ref(false)
 
 const handleConsole = (type: 'log' | 'warn', args: unknown[]) => {
   emit('console', type, args)
@@ -50,6 +50,7 @@ defineExpose({
     registered.onStart()
     const gbpFile = await props.project.exportGbpFile()
     zipData.value = await gbpFile.arrayBuffer()
+    await until(() => !loading.value)
   },
   stop() {
     zipData.value = null
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index 72d9ddf2d..ac2168fa9 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -9,6 +9,7 @@ import file from './file.svg?raw'
 import arrowDown from './arrow-down.svg?raw'
 import arrowUp from './arrow-up.svg?raw'
 import play from './play.svg?raw'
+import playHollow from './play-hollow.svg?raw'
 import playCircle from './play-circle.svg?raw'
 import loading from './loading.svg?raw'
 import check from './check.svg?raw'
@@ -25,6 +26,7 @@ import more from './more.svg?raw'
 import exchange from './exchange.svg?raw'
 import search from './search.svg?raw'
 import close from './close.svg?raw'
+import closeCircle from './close-circle.svg?raw'
 import rotate from './rotate.svg?raw'
 import share from './share.svg?raw'
 import arrowAlt from './arrow-alt.svg?raw'
@@ -52,6 +54,7 @@ const typeIconMap = {
   arrowDown,
   arrowUp,
   play,
+  playHollow,
   playCircle,
   loading,
   check,
@@ -68,6 +71,7 @@ const typeIconMap = {
   exchange,
   search,
   close,
+  closeCircle,
   rotate,
   share,
   arrowAlt,
diff --git a/spx-gui/src/components/ui/icons/close-circle.svg b/spx-gui/src/components/ui/icons/close-circle.svg
new file mode 100644
index 000000000..4e8ad96f7
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/close-circle.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.99984 1.0415C5.05984 1.0415 1.0415 5.06067 1.0415 9.99984C1.0415 14.939 5.05984 18.9582 9.99984 18.9582C14.9398 18.9582 18.9582 14.939 18.9582 9.99984C18.9582 5.06067 14.9398 1.0415 9.99984 1.0415ZM9.99984 17.7082C5.749 17.7082 2.2915 14.2507 2.2915 9.99984C2.2915 5.749 5.749 2.2915 9.99984 2.2915C14.2507 2.2915 17.7082 5.749 17.7082 9.99984C17.7082 14.2507 14.2507 17.7082 9.99984 17.7082ZM12.9415 7.94153L10.8832 9.99984L12.9415 12.0581C13.1857 12.3023 13.1857 12.6982 12.9415 12.9423C12.8198 13.064 12.6598 13.1257 12.4998 13.1257C12.3398 13.1257 12.1798 13.0648 12.0582 12.9423L9.99984 10.884L7.9415 12.9423C7.81984 13.064 7.65984 13.1257 7.49984 13.1257C7.33984 13.1257 7.17984 13.0648 7.05817 12.9423C6.814 12.6982 6.814 12.3023 7.05817 12.0581L9.11651 9.99984L7.05817 7.94153C6.814 7.69736 6.814 7.3015 7.05817 7.05733C7.30234 6.81317 7.69818 6.81317 7.94234 7.05733L10.0007 9.11569L12.059 7.05733C12.3032 6.81317 12.699 6.81317 12.9432 7.05733C13.1857 7.3015 13.1857 7.69819 12.9415 7.94153Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/play-hollow.svg b/spx-gui/src/components/ui/icons/play-hollow.svg
new file mode 100644
index 000000000..dfea8a14b
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/play-hollow.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.0775 7.75207L11.0774 7.75212L5.19975 11.349L5.19974 11.349C4.52674 11.7608 3.66724 11.2753 3.66724 10.4965V3.50286C3.66724 2.72409 4.52665 2.23858 5.19974 2.6505L5.19975 2.6505L11.0773 6.24724C11.6409 6.59239 11.6404 7.40771 11.0775 7.75207Z" stroke="currentColor" stroke-width="1.5"/>
+</svg>
diff --git a/spx-gui/src/models/runtime.ts b/spx-gui/src/models/runtime.ts
index 9215000ba..bb06af1f4 100644
--- a/spx-gui/src/models/runtime.ts
+++ b/spx-gui/src/models/runtime.ts
@@ -6,17 +6,25 @@ import type { Project } from '@/models/project'
 // TODO: move TextDocumentRange to some proper place
 import type { TextDocumentRange } from '../components/editor/code-editor/common'
 
-export type RunningMode =
-  /** Not running */
-  | 'none'
-  /** Debugging, run in place */
-  | 'debug'
-  /** Running full screen */
-  | 'run'
+export type RunningState =
+  | {
+      /** Not running */
+      mode: 'none'
+    }
+  | {
+      /** Debugging, run in place */
+      mode: 'debug'
+      /** Initializing for debug */
+      initializing: boolean
+    }
+  | {
+      /** Running full screen */
+      mode: 'run'
+    }
 
 export enum RuntimeOutputKind {
-  Error,
-  Log
+  Error = 'error',
+  Log = 'log'
 }
 
 export interface RuntimeOutput {
@@ -29,13 +37,10 @@ export interface RuntimeOutput {
 export class Runtime extends Emitter<{
   didChangeOutput: void
 }> {
-  running: RunningMode = 'none'
+  running: RunningState = { mode: 'none' }
 
-  setRunning(running: RunningMode) {
+  setRunning(running: RunningState) {
     this.running = running
-    if (running === 'debug') {
-      this.clearOutputs()
-    }
   }
 
   outputs: RuntimeOutput[] = []
@@ -48,7 +53,7 @@ export class Runtime extends Emitter<{
     this.outputs.push(output)
   }
 
-  private clearOutputs() {
+  clearOutputs() {
     this.outputs.splice(0, this.outputs.length)
   }
 
@@ -70,7 +75,7 @@ export class Runtime extends Emitter<{
         () => reactiveThis.project.filesHash,
         async (_, oldHash) => {
           if (oldHash == null) return
-          await until(() => reactiveThis.running === 'none')
+          await until(() => reactiveThis.running.mode === 'none')
           reactiveThis.clearOutputs()
         }
       )