From 92f6d0b6fbce59bec42160d6a8bd353e6ce09c08 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Mon, 23 Dec 2024 18:44:28 +0800
Subject: [PATCH] Code-editor Tabs & Console

---
 .../preprocessing/common/ProcessItem.vue      |   2 +-
 .../common/markdown-vue/MarkdownView.ts       |  12 +-
 .../code-text-editor/monaco.ts                |   2 +-
 .../editor/code-editor/CodeLink.vue           |  76 +++++++
 .../editor/code-editor/code-editor.ts         |   5 +
 .../components/editor/code-editor/common.ts   |  15 ++
 .../components/editor/code-editor/context.ts  |   5 +
 .../editor/code-editor/ui/CodeEditorUI.vue    |  55 ++++-
 .../editor/code-editor/ui/ZoomControl.vue     |  51 +++++
 .../ui/api-reference/APIReferenceItem.vue     |  19 +-
 .../editor/code-editor/ui/code-editor-ui.ts   |  28 ++-
 .../editor/code-editor/ui/common.ts           |   2 +-
 .../definition/DefinitionOverviewWrapper.vue  |   6 +
 .../ui/diagnostics/DiagnosticsUI.vue          |   2 +-
 .../ui/document-tab/DocumentTab.vue           |  93 ++++++++
 .../ui/document-tab/DocumentTabs.vue          | 102 +++++++++
 .../code-editor/ui/markdown/CodeLink.ts       |  61 +++++
 .../code-editor/ui/markdown/CodeLink.vue      |  92 --------
 .../code-editor/ui/markdown/CodeView.vue      |   6 +-
 .../code-editor/ui/markdown/MarkdownView.vue  |   2 +-
 .../components/editor/panels/ConsolePanel.vue |  90 +++++++-
 .../components/editor/panels/EditorPanels.vue |   4 +-
 .../editor/preview/EditorPreview.vue          |  76 +++++--
 .../editor/preview/InPlaceRunner.vue          |  15 +-
 .../editor/preview/RunnerContainer.vue        | 211 +-----------------
 .../src/components/project/ProjectItem.vue    |   2 +-
 .../project/runner/ProjectRunner.vue          |  12 +-
 .../project/runner/v1/ProjectRunnerV1.vue     |   7 +-
 spx-gui/src/components/ui/UIButton.vue        |   4 +-
 .../src/components/ui/UIConfigProvider.vue    |   2 +-
 spx-gui/src/components/ui/UIIconButton.vue    |   4 +-
 spx-gui/src/components/ui/icons/UIIcon.vue    |   4 +
 .../src/components/ui/icons/close-circle.svg  |   3 +
 .../src/components/ui/icons/play-hollow.svg   |   3 +
 spx-gui/src/components/ui/tokens/colors.ts    |   9 +-
 spx-gui/src/models/runtime.ts                 |  37 +--
 36 files changed, 747 insertions(+), 372 deletions(-)
 create mode 100644 spx-gui/src/components/editor/code-editor/CodeLink.vue
 create mode 100644 spx-gui/src/components/editor/code-editor/ui/ZoomControl.vue
 create mode 100644 spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue
 create mode 100644 spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTabs.vue
 create mode 100644 spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.ts
 delete mode 100644 spx-gui/src/components/editor/code-editor/ui/markdown/CodeLink.vue
 create mode 100644 spx-gui/src/components/ui/icons/close-circle.svg
 create mode 100644 spx-gui/src/components/ui/icons/play-hollow.svg

diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
index 1c0fe5d22..17510a439 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
@@ -59,7 +59,7 @@ defineProps<{
   opacity: 0;
   color: var(--ui-color-grey-100);
   border-radius: 50%;
-  background-color: var(--ui-color-green-200);
+  background-color: var(--ui-color-green-main);
 }
 
 .name {
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-legacy/code-text-editor/monaco.ts b/spx-gui/src/components/editor/code-editor-legacy/code-text-editor/monaco.ts
index a36c16c3b..1a61e6b0f 100644
--- a/spx-gui/src/components/editor/code-editor-legacy/code-text-editor/monaco.ts
+++ b/spx-gui/src/components/editor/code-editor-legacy/code-text-editor/monaco.ts
@@ -48,7 +48,7 @@ export function initMonaco(
       { token: 'string', foreground: color.green[300] },
       { token: 'operator', foreground: color.blue.main },
       { token: 'number', foreground: color.blue[600] },
-      { token: 'keyword', foreground: color.red[300] },
+      { token: 'keyword', foreground: color.red[600] },
       { token: 'typeKeywords', foreground: color.purple.main },
       { token: 'brackets', foreground: color.title }
     ],
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/api-reference/APIReferenceItem.vue b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue
index 8555093ab..58de4c2d1 100644
--- a/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue
@@ -45,15 +45,16 @@ function handleExplain() {
     <UITooltip>
       <template #trigger>
         <button class="explain-btn" type="button" @click.stop="handleExplain">
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
-              d="M8.79243 6.98251C8.79525 6.96872 8.81496 6.96872 8.81778 6.98251C8.96412 7.69849 9.52365 8.25803 10.2396 8.40437C10.2534 8.40719 10.2534 8.4269 10.2396 8.42972C9.52365 8.57606 8.96412 9.13559 8.81778 9.85157C8.81496 9.86537 8.79525 9.86537 8.79243 9.85157C8.64609 9.13559 8.08656 8.57606 7.37058 8.42972C7.35678 8.4269 7.35678 8.40719 7.37058 8.40437C8.08656 8.25803 8.64609 7.69849 8.79243 6.98251Z"
-              stroke="#FAA135"
-              stroke-width="0.75"
+              d="M6.88865 2.89368C6.5761 2.97182 6.38607 3.28853 6.46421 3.60108C6.54234 3.91362 6.85906 4.10365 7.1716 4.02551L6.88865 2.89368ZM6.12299 11.6768L6.24316 11.106H6.24316L6.12299 11.6768ZM3.94284 11.2178L4.06301 10.647L3.94284 11.2178ZM10.9364 7.07624C10.9364 7.3984 11.1976 7.65957 11.5197 7.65957C11.8419 7.65957 12.1031 7.3984 12.1031 7.07624H10.9364ZM8.08563 12.1367C8.40089 12.0703 8.60265 11.7609 8.53628 11.4457C8.46991 11.1304 8.16054 10.9287 7.84529 10.995L8.08563 12.1367ZM7.43841 11.6768L7.31824 11.106H7.31824L7.43841 11.6768ZM6.61528 11.7647L6.66364 11.1833H6.66363L6.61528 11.7647ZM6.94612 11.7647L6.89777 11.1833H6.89776L6.94612 11.7647ZM2.16509 10.1984L1.62986 10.4304H1.62987L2.16509 10.1984ZM2.67294 10.8244L2.33567 11.3003L2.33567 11.3003L2.67294 10.8244ZM10.4651 2.82412L10.2929 3.38144V3.38144L10.4651 2.82412ZM11.3031 3.47843L11.802 3.17616V3.17616L11.3031 3.47843ZM2.04244 4.38249L2.62547 4.40141L2.04244 4.38249ZM3.79216 3.55126C4.10741 3.61763 4.41678 3.41587 4.48315 3.10061C4.54952 2.78536 4.34776 2.47599 4.0325 2.40962L3.79216 3.55126ZM3.79885 2.95736L3.69725 3.53177H3.69725L3.79885 2.95736ZM6.44679 5.12592C6.44679 5.44809 6.70796 5.70926 7.03012 5.70926C7.35229 5.70926 7.61346 5.44809 7.61346 5.12592H6.44679ZM6.3706 2.91395L6.69686 2.43038L6.3706 2.91395ZM5.59275 2.38913L5.26649 2.87269L5.59275 2.38913ZM4.50339 10.0357L4.64148 9.46893L4.64148 9.46893L4.50339 10.0357ZM4.64895 10.0712L4.51086 10.6379H4.51086L4.64895 10.0712ZM6.14591 12.0387C6.26929 12.3363 6.61057 12.4775 6.90817 12.3541C7.20578 12.2308 7.34701 11.8895 7.22363 11.5919L6.14591 12.0387ZM2.62499 8.87473V4.4983H1.45832V8.87473H2.62499ZM7.1716 4.02551L8.68602 3.64691L8.40306 2.51508L6.88865 2.89368L7.1716 4.02551ZM6.24316 11.106L4.06301 10.647L3.82266 11.7887L6.00282 12.2476L6.24316 11.106ZM10.9364 5.40396V7.07624H12.1031V5.40396H10.9364ZM7.84529 10.995L7.31824 11.106L7.55859 12.2476L8.08563 12.1367L7.84529 10.995ZM6.00281 12.2476C6.23482 12.2965 6.39847 12.332 6.56692 12.346L6.66363 11.1833C6.5842 11.1767 6.50229 11.1605 6.24316 11.106L6.00281 12.2476ZM7.31824 11.106C7.05911 11.1605 6.9772 11.1767 6.89777 11.1833L6.99448 12.346C7.16293 12.332 7.32659 12.2965 7.55859 12.2476L7.31824 11.106ZM6.56692 12.346C6.70919 12.3578 6.85221 12.3578 6.99449 12.346L6.89776 11.1833C6.81986 11.1898 6.74155 11.1898 6.66364 11.1833L6.56692 12.346ZM1.45832 8.87473C1.45832 9.21251 1.45795 9.49732 1.47534 9.73253C1.49327 9.97508 1.53207 10.2048 1.62986 10.4304L2.70031 9.96647C2.67467 9.90732 2.65176 9.8215 2.63883 9.64654C2.62536 9.46424 2.62499 9.22959 2.62499 8.87473H1.45832ZM4.06301 10.647C3.71577 10.5739 3.48622 10.5252 3.31061 10.4745C3.14206 10.4258 3.0628 10.3857 3.01021 10.3484L2.33567 11.3003C2.53632 11.4425 2.75311 11.5278 2.98677 11.5953C3.21335 11.6608 3.49213 11.7191 3.82266 11.7887L4.06301 10.647ZM1.62987 10.4304C1.78115 10.7795 2.02528 11.0804 2.33567 11.3003L3.01021 10.3484C2.87392 10.2518 2.76673 10.1197 2.70031 9.96647L1.62987 10.4304ZM8.68602 3.64691C9.20347 3.51755 9.55443 3.43036 9.82643 3.38738C10.0941 3.34507 10.2176 3.35816 10.2929 3.38144L10.6374 2.26679C10.3133 2.16664 9.98354 2.1814 9.64431 2.23501C9.3094 2.28794 8.89975 2.39091 8.40306 2.51508L8.68602 3.64691ZM12.1031 5.40396C12.1031 4.89199 12.1036 4.4696 12.0737 4.13184C12.0435 3.78974 11.9778 3.46624 11.802 3.17616L10.8042 3.78071C10.8451 3.84813 10.8877 3.96471 10.9116 4.23466C10.9359 4.50896 10.9364 4.87058 10.9364 5.40396H12.1031ZM10.2929 3.38144C10.5064 3.44745 10.6884 3.58951 10.8042 3.78071L11.802 3.17616C11.5382 2.7407 11.1238 2.41714 10.6374 2.26679L10.2929 3.38144ZM2.62499 4.4983C2.62499 4.43233 2.62507 4.41375 2.62547 4.40141L1.45942 4.36358C1.45824 4.39975 1.45832 4.44221 1.45832 4.4983H2.62499ZM4.0325 2.40962C3.97762 2.39807 3.93609 2.38924 3.90045 2.38294L3.69725 3.53177C3.70941 3.53392 3.7276 3.53767 3.79216 3.55126L4.0325 2.40962ZM2.62547 4.40141C2.6435 3.8457 3.14975 3.43493 3.69725 3.53177L3.90045 2.38294C2.65349 2.16238 1.50048 3.09792 1.45942 4.36358L2.62547 4.40141ZM7.61346 5.12592V4.15452H6.44679V5.12592H7.61346ZM6.69686 2.43038L5.91901 1.90557L5.26649 2.87269L6.04434 3.39751L6.69686 2.43038ZM3.45371 3.21618V9.44208H4.62038V3.21618H3.45371ZM4.3653 10.6024L4.51086 10.6379L4.78704 9.5044L4.64148 9.46893L4.3653 10.6024ZM4.51086 10.6379C5.24801 10.8175 5.85534 11.3378 6.14591 12.0387L7.22363 11.5919C6.79062 10.5474 5.88555 9.77204 4.78703 9.5044L4.51086 10.6379ZM3.45371 9.44208C3.45371 9.99278 3.83026 10.4721 4.36531 10.6024L4.64148 9.46893C4.62909 9.46592 4.62038 9.45482 4.62038 9.44208H3.45371ZM5.91901 1.90557C4.86893 1.19708 3.45371 1.94945 3.45371 3.21618H4.62038C4.62038 2.88419 4.99128 2.68701 5.26649 2.87269L5.91901 1.90557ZM7.61346 4.15452C7.61346 3.46319 7.26995 2.81705 6.69686 2.43038L6.04434 3.39751C6.29597 3.56728 6.44679 3.85098 6.44679 4.15452H7.61346Z"
+              fill="#57606A"
             />
             <path
-              d="M5.93488 2.60136C5.73395 2.65159 5.61179 2.85519 5.66203 3.05611C5.71226 3.25703 5.91586 3.37919 6.11678 3.32896L5.93488 2.60136ZM5.24828 10.0085L5.32554 9.64153H5.32554L5.24828 10.0085ZM3.37958 9.61508L3.45684 9.24812L3.37958 9.61508ZM9.49907 6.06514C9.49907 6.27224 9.66697 6.44014 9.87407 6.44014C10.0812 6.44014 10.2491 6.27224 10.2491 6.06514H9.49907ZM6.9048 10.2803C7.10746 10.2377 7.23717 10.0388 7.1945 9.83613C7.15184 9.63346 6.95296 9.50376 6.75029 9.54642L6.9048 10.2803ZM6.37579 10.0085L6.29854 9.64153L6.29854 9.64153L6.37579 10.0085ZM5.67025 10.0838L5.70134 9.71008H5.70133L5.67025 10.0838ZM5.95383 10.0838L5.92274 9.71008H5.92274L5.95383 10.0838ZM1.8558 8.74132L1.51173 8.89045H1.51173L1.8558 8.74132ZM2.2911 9.27781L2.07428 9.58377H2.07429L2.2911 9.27781ZM8.9701 2.42046L8.85937 2.77874V2.77874L8.9701 2.42046ZM9.68842 2.98131L10.0091 2.78698V2.78698L9.68842 2.98131ZM1.75067 3.75621L2.12548 3.76837L1.75067 3.75621ZM3.27618 2.92141C3.47885 2.96408 3.67773 2.83437 3.72039 2.63171C3.76306 2.42904 3.63335 2.23016 3.43069 2.1875L3.27618 2.92141ZM3.25617 2.53467L3.19085 2.90393H3.19085L3.25617 2.53467ZM5.65083 4.39344C5.65083 4.60055 5.81872 4.76844 6.02583 4.76844C6.23294 4.76844 6.40083 4.60055 6.40083 4.39344H5.65083ZM5.46052 2.49746L5.67026 2.1866L5.46052 2.49746ZM4.79379 2.04762L4.58405 2.35848L4.79379 2.04762ZM3.86006 8.60181L3.94883 8.23747L3.94883 8.23747L3.86006 8.60181ZM3.98482 8.63221L3.89605 8.99655L3.89605 8.99655L3.98482 8.63221ZM5.3834 10.2708C5.46272 10.4621 5.68211 10.5529 5.87343 10.4736C6.06474 10.3943 6.15554 10.1749 6.07622 9.98356L5.3834 10.2708ZM2.125 7.6067V3.85547H1.375V7.6067H2.125ZM6.11678 3.32896L7.41485 3.00445L7.23295 2.27684L5.93488 2.60136L6.11678 3.32896ZM5.32554 9.64153L3.45684 9.24812L3.30233 9.98203L5.17103 10.3754L5.32554 9.64153ZM9.49907 4.63176V6.06514H10.2491V4.63176H9.49907ZM6.75029 9.54642L6.29854 9.64153L6.45305 10.3754L6.9048 10.2803L6.75029 9.54642ZM5.17103 10.3754C5.37279 10.4179 5.50431 10.4463 5.63916 10.4575L5.70133 9.71008C5.62371 9.70363 5.54474 9.68768 5.32554 9.64153L5.17103 10.3754ZM6.29854 9.64153C6.07934 9.68768 6.00037 9.70363 5.92274 9.71008L5.98492 10.4575C6.11977 10.4463 6.25128 10.4179 6.45305 10.3754L6.29854 9.64153ZM5.63916 10.4575C5.75421 10.4671 5.86986 10.4671 5.98492 10.4575L5.92274 9.71008C5.84907 9.71621 5.77501 9.71621 5.70134 9.71008L5.63916 10.4575ZM1.375 7.6067C1.375 7.89805 1.37476 8.13681 1.38924 8.33275C1.40408 8.5334 1.43563 8.71489 1.51173 8.89045L2.19987 8.59219C2.17016 8.52366 2.14882 8.43467 2.1372 8.27747C2.12524 8.11554 2.125 7.90903 2.125 7.6067H1.375ZM3.45684 9.24812C3.16099 9.18584 2.95896 9.14306 2.80298 9.09799C2.65153 9.05424 2.56886 9.01502 2.50791 8.97184L2.07429 9.58377C2.2304 9.6944 2.40149 9.76267 2.59479 9.81852C2.78355 9.87306 3.01723 9.92201 3.30233 9.98203L3.45684 9.24812ZM1.51173 8.89045C1.63231 9.16866 1.82689 9.40846 2.07428 9.58377L2.50791 8.97184C2.37244 8.87584 2.2659 8.74453 2.19987 8.59219L1.51173 8.89045ZM7.41485 3.00445C7.85616 2.89412 8.16327 2.8177 8.40315 2.77979C8.64026 2.74232 8.76817 2.75055 8.85937 2.77874L9.08083 2.06218C8.82973 1.98458 8.56918 1.99424 8.28608 2.03898C8.00574 2.08328 7.6609 2.16985 7.23295 2.27684L7.41485 3.00445ZM10.2491 4.63176C10.2491 4.19063 10.2494 3.83509 10.2244 3.55239C10.1992 3.26689 10.1453 3.01177 10.0091 2.78698L9.36769 3.17563C9.41716 3.25727 9.45617 3.37937 9.47733 3.61848C9.49873 3.86039 9.49907 4.17687 9.49907 4.63176H10.2491ZM8.85937 2.77874C9.07168 2.84436 9.25254 2.98557 9.36769 3.17563L10.0091 2.78698C9.79885 2.4399 9.46856 2.18202 9.08083 2.06218L8.85937 2.77874ZM2.125 3.85547C2.125 3.79999 2.12505 3.78151 2.12548 3.76837L1.37587 3.74405C1.37495 3.7725 1.375 3.80634 1.375 3.85547H2.125ZM3.43069 2.1875C3.38261 2.17738 3.34951 2.17036 3.32148 2.1654L3.19085 2.90393C3.20379 2.90622 3.22188 2.90998 3.27618 2.92141L3.43069 2.1875ZM2.12548 3.76837C2.1434 3.21599 2.64662 2.80767 3.19085 2.90393L3.32148 2.1654C2.3276 1.9896 1.4086 2.73527 1.37587 3.74405L2.12548 3.76837ZM6.40083 4.39344V3.56081H5.65083V4.39344H6.40083ZM5.67026 2.1866L5.00353 1.73675L4.58405 2.35848L5.25079 2.80832L5.67026 2.1866ZM3.08533 2.75652V8.093H3.83533V2.75652H3.08533ZM3.77129 8.96615L3.89605 8.99655L4.07359 8.26786L3.94883 8.23747L3.77129 8.96615ZM3.89605 8.99655C4.56661 9.15992 5.11908 9.63324 5.3834 10.2708L6.07622 9.98356C5.72033 9.12513 4.97646 8.48784 4.07359 8.26786L3.89605 8.99655ZM3.08533 8.093C3.08533 8.50739 3.36868 8.86806 3.77129 8.96615L3.94883 8.23747C3.88221 8.22124 3.83533 8.16156 3.83533 8.093H3.08533ZM5.00353 1.73675C4.18649 1.1855 3.08533 1.7709 3.08533 2.75652H3.83533C3.83533 2.37181 4.26514 2.14331 4.58405 2.35848L5.00353 1.73675ZM6.40083 3.56081C6.40083 3.00979 6.12704 2.49478 5.67026 2.1866L5.25079 2.80832C5.50091 2.97708 5.65083 3.25908 5.65083 3.56081H6.40083Z"
+              d="M9.94598 7.86012C10.0214 7.49096 10.5489 7.49096 10.6243 7.86012C10.791 8.67544 11.4282 9.3126 12.2435 9.47925C12.6126 9.5547 12.6126 10.0822 12.2435 10.1576C11.4282 10.3243 10.791 10.9614 10.6243 11.7767C10.5489 12.1459 10.0214 12.1459 9.94598 11.7767C9.77934 10.9614 9.14218 10.3243 8.32686 10.1576C7.9577 10.0822 7.9577 9.5547 8.32685 9.47925C9.14218 9.3126 9.77934 8.67544 9.94598 7.86012Z"
               fill="#57606A"
+              stroke="#57606A"
+              stroke-width="0.157866"
             />
           </svg>
         </button>
@@ -92,8 +93,6 @@ function handleExplain() {
 .overview {
   display: flex;
   align-items: start;
-  font-size: 13px;
-  line-height: 20px;
   word-break: break-all;
   color: var(--ui-color-title);
 }
@@ -101,10 +100,10 @@ function handleExplain() {
 .explain-btn {
   position: absolute;
   right: 6px;
-  top: 6px;
+  top: 5px;
   padding: 0;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
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/common.ts b/spx-gui/src/components/editor/code-editor/ui/common.ts
index ae69e459a..cf70af849 100644
--- a/spx-gui/src/components/editor/code-editor/ui/common.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/common.ts
@@ -4,7 +4,7 @@ import type { ResourceModel } from '@/models/common/resource-model'
 import { Sprite } from '@/models/sprite'
 import { Sound } from '@/models/sound'
 import { isWidget } from '@/models/widget'
-import { type Range, type Position, type TextDocumentIdentifier, type Selection, positionEq } from '../common'
+import { type Range, type Position, type TextDocumentIdentifier, type Selection } from '../common'
 import type { Monaco } from '../monaco'
 
 export function token2Signal(token: monaco.CancellationToken): AbortSignal {
diff --git a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue
index 13d254dd2..5cf96bb0a 100644
--- a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue
@@ -23,6 +23,10 @@ const childrenText = useSlotText()
   display: flex;
   color: var(--ui-color-title);
 
+  // Clear style from `h4` in `MarkdownView`
+  font-size: 12px !important;
+  line-height: 1.75 !important;
+
   .icon {
     flex: 0 0 auto;
     margin-top: 2px;
@@ -32,8 +36,10 @@ const childrenText = useSlotText()
   .code {
     flex: 1 1 0;
     word-break: break-all;
+
     // Clear style from `code` in `MarkdownView`
     font-size: inherit;
+    line-height: inherit;
     padding: 0;
     border-radius: 0;
     border: none;
diff --git a/spx-gui/src/components/editor/code-editor/ui/diagnostics/DiagnosticsUI.vue b/spx-gui/src/components/editor/code-editor/ui/diagnostics/DiagnosticsUI.vue
index b2a0b75da..66b031503 100644
--- a/spx-gui/src/components/editor/code-editor/ui/diagnostics/DiagnosticsUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/diagnostics/DiagnosticsUI.vue
@@ -90,7 +90,7 @@ watchEffect((onCleanUp) => {
 }
 
 .code-editor-diagnostic-error {
-  text-decoration: underline wavy var(--ui-color-red-300);
+  text-decoration: underline wavy var(--ui-color-red-600);
 }
 .code-editor-diagnostic-error-line-body {
   background-color: rgba(255, 70, 70, 0.1);
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/CodeView.vue b/spx-gui/src/components/editor/code-editor/ui/markdown/CodeView.vue
index 1c0ae8d0d..f479bc28c 100644
--- a/spx-gui/src/components/editor/code-editor/ui/markdown/CodeView.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/markdown/CodeView.vue
@@ -36,4 +36,8 @@ const codeHtml = computed(() => {
   <div v-else class="code-view" :style="{ tabSize }" v-html="codeHtml"></div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.code-view {
+  font-family: var(--ui-font-family-code);
+}
+</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..08a5851b1 100644
--- a/spx-gui/src/components/editor/panels/ConsolePanel.vue
+++ b/spx-gui/src/components/editor/panels/ConsolePanel.vue
@@ -1,10 +1,41 @@
 <script setup lang="ts">
+import dayjs from 'dayjs'
 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 humanizeTime(time: number) {
+  const d = dayjs(time)
+  return d.format('HH:mm:ss.SSS')
+}
+
+function getOutputSourceLocation(output: RuntimeOutput) {
+  console.warn('TODO: use `output.source`', output) // TODO: 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 +44,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="time">{{ humanizeTime(output.time) }}</span>
+        <CodeLink class="link" v-bind="getOutputSourceLocation(output)">{{
+          getOutputSourceLocationText(output)
+        }}</CodeLink>
+        <span class="message">{{ output.message }}</span>
       </li>
     </ul>
   </UICard>
@@ -26,7 +75,42 @@ 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 {
+  position: relative;
+  font-size: 12px;
+  font-family: var(--ui-font-family-code);
+
+  --console-panel-text-color: var(--ui-color-grey-1000);
+  --console-panel-tip-color: var(--ui-color-grey-700);
+  &.kind-error {
+    --console-panel-text-color: var(--ui-color-red-500);
+    --console-panel-tip-color: var(--ui-color-red-300);
+  }
+}
+
+.message {
+  white-space: pre-line;
+  word-break: break-all;
+  color: var(--console-panel-text-color);
+}
+
+.time {
+  float: left;
+  margin-right: 8px;
+  color: var(--console-panel-tip-color);
+}
+
+.link {
+  float: right;
+  margin-left: 8px;
+  color: var(--console-panel-tip-color);
 }
 </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..46a76980e 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" :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/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index aa427d0b1..762eaa511 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -315,7 +315,7 @@ const handleRemove = useMessageHandle(
       }
 
       &.liking {
-        color: var(--ui-color-red-200);
+        color: var(--ui-color-red-main);
       }
 
       &.time {
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/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 646265176..79d2b9b0d 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -129,10 +129,10 @@ const icon = computed(() => (props.loading ? 'loading' : props.icon))
 .type-danger {
   --ui-button-color: var(--ui-color-grey-100);
   --ui-button-bg-color: var(--ui-color-danger-main);
-  --ui-button-shadow-color: var(--ui-color-danger-300);
+  --ui-button-shadow-color: var(--ui-color-danger-600);
 
   &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-danger-100);
+    --ui-button-bg-color: var(--ui-color-danger-400);
   }
 }
 
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 6c864f2b4..81ac303c3 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -56,7 +56,7 @@ const themeOverrides: GlobalThemeOverrides = {
     dividerColor: uiVariables.color.dividingLine[2],
     borderColor: uiVariables.color.border,
     errorColor: uiVariables.color.danger.main,
-    errorColorHover: uiVariables.color.danger[100],
+    errorColorHover: uiVariables.color.danger[400],
     warningColor: uiVariables.color.yellow.main,
     warningColorHover: uiVariables.color.yellow[100],
     successColor: uiVariables.color.success.main,
diff --git a/spx-gui/src/components/ui/UIIconButton.vue b/spx-gui/src/components/ui/UIIconButton.vue
index a954be629..067579f7b 100644
--- a/spx-gui/src/components/ui/UIIconButton.vue
+++ b/spx-gui/src/components/ui/UIIconButton.vue
@@ -151,10 +151,10 @@ const icon = computed(() => (props.loading ? 'loading' : props.icon))
 .type-danger {
   --ui-button-color: var(--ui-color-grey-100);
   --ui-button-bg-color: var(--ui-color-danger-main);
-  --ui-button-shadow-color: var(--ui-color-danger-300);
+  --ui-button-shadow-color: var(--ui-color-danger-600);
 
   &:hover:not(:active) {
-    --ui-button-bg-color: var(--ui-color-danger-100);
+    --ui-button-bg-color: var(--ui-color-danger-400);
   }
 }
 
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/components/ui/tokens/colors.ts b/spx-gui/src/components/ui/tokens/colors.ts
index 24fc0fefb..19904a2da 100644
--- a/spx-gui/src/components/ui/tokens/colors.ts
+++ b/spx-gui/src/components/ui/tokens/colors.ts
@@ -45,9 +45,12 @@ export const blue = {
 } as const
 
 export const red = {
-  100: '#f15d64',
-  200: '#ef4149',
-  300: '#bc292e',
+  100: '#feefef',
+  200: '#fdc7c7',
+  300: '#ff97a0',
+  400: '#f15d64',
+  500: '#ef4149',
+  600: '#bc292e',
   main: '#ef4149'
 } as const
 
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()
         }
       )