From 5e0fece73fd1b755af060151df80197a8e7449fd Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Wed, 29 Apr 2026 07:45:29 +0800
Subject: [PATCH] feat: add Computer Use step to onboarding wizard

---
 .../i18n/locales/en-US/features/welcome.json  |  3 ++
 .../i18n/locales/ru-RU/features/welcome.json  |  3 ++
 .../i18n/locales/zh-CN/features/welcome.json  |  3 ++
 dashboard/src/views/WelcomePage.vue           | 47 +++++++++++++++++++
 4 files changed, 56 insertions(+)

diff --git a/dashboard/src/i18n/locales/en-US/features/welcome.json b/dashboard/src/i18n/locales/en-US/features/welcome.json
index 6f5a8f00d..dcb70b70d 100644
--- a/dashboard/src/i18n/locales/en-US/features/welcome.json
+++ b/dashboard/src/i18n/locales/en-US/features/welcome.json
@@ -18,7 +18,10 @@
     "step1Desc": "Connect AstrBot to IM platforms like QQ, Lark, Slack, Telegram, etc.",
     "step2Title": "Configure AI Model",
     "step2Desc": "Configure AI models for AstrBot.",
+    "step3Title": "Run with Computer Use",
+    "step3Desc": "Learn how to enable the sandbox environment so AstrBot can execute shell commands, edit files, and run Python code.",
     "configure": "Configure",
+    "learnMore": "Learn More",
     "skip": "Skip",
     "pending": "Pending",
     "completed": "Completed",
diff --git a/dashboard/src/i18n/locales/ru-RU/features/welcome.json b/dashboard/src/i18n/locales/ru-RU/features/welcome.json
index 166522401..9a18bca71 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/welcome.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/welcome.json
@@ -16,7 +16,10 @@
         "step1Desc": "Подключите AstrBot к QQ, Lark, WeChat, Telegram и другим мессенджерам.",
         "step2Title": "Настройка AI моделей",
         "step2Desc": "Выберите и настройте AI провайдеров для AstrBot.",
+        "step3Title": "Запуск с Computer Use",
+        "step3Desc": "Узнайте, как включить песочницу, чтобы AstrBot мог выполнять shell-команды, редактировать файлы и запускать Python.",
         "configure": "Настроить",
+        "learnMore": "Подробнее",
         "skip": "Пропустить",
         "pending": "Ожидает",
         "completed": "Готово",
diff --git a/dashboard/src/i18n/locales/zh-CN/features/welcome.json b/dashboard/src/i18n/locales/zh-CN/features/welcome.json
index 7ddac7d25..1934bdea1 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/welcome.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/welcome.json
@@ -18,7 +18,10 @@
     "step1Desc": "将 AstrBot 连接到 QQ、飞书、企业微信、Telegram 等 IM 平台。",
     "step2Title": "配置 AI 模型",
     "step2Desc": "为 AstrBot 配置 AI 模型。",
+    "step3Title": "运行使用电脑",
+    "step3Desc": "了解如何启用沙箱环境，让 AstrBot 能够执行 Shell 命令、编辑文件和运行 Python 代码。",
     "configure": "去配置",
+    "learnMore": "了解更多",
     "skip": "跳过",
     "pending": "待处理",
     "completed": "已完成",
diff --git a/dashboard/src/views/WelcomePage.vue b/dashboard/src/views/WelcomePage.vue
index 6ca2f7b9f..81b303951 100644
--- a/dashboard/src/views/WelcomePage.vue
+++ b/dashboard/src/views/WelcomePage.vue
@@ -171,6 +171,52 @@
                   </div>
                 </div>
               </v-timeline-item>
+
+              <v-timeline-item
+                :dot-color="
+                  computerUseStepState === 'completed' ? 'success' : 'primary'
+                "
+                :icon="
+                  computerUseStepState === 'completed'
+                    ? 'mdi-check'
+                    : 'mdi-numeric-4'
+                "
+                fill-dot
+                size="small"
+              >
+                <div class="pl-2">
+                  <div
+                    class="text-h6 font-weight-bold mb-1"
+                    :class="{
+                      'text-medium-emphasis': providerStepState !== 'completed',
+                    }"
+                  >
+                    {{ tm("onboard.step3Title") }}
+                  </div>
+                  <p class="text-body-2 text-medium-emphasis mb-3">
+                    {{ tm("onboard.step3Desc") }}
+                  </p>
+                  <div class="d-flex align-center">
+                    <v-btn
+                      color="primary"
+                      variant="flat"
+                      rounded="pill"
+                      class="px-6"
+                      :disabled="providerStepState !== 'completed'"
+                      href="https://docs.astrbot.app/usage/computer-use"
+                      target="_blank"
+                    >
+                      {{ tm("onboard.learnMore") }}
+                    </v-btn>
+                    <div
+                      v-if="computerUseStepState === 'completed'"
+                      class="text-success d-flex align-center text-body-2 font-weight-medium ml-3"
+                    >
+                      {{ tm("onboard.completed") }}
+                    </div>
+                  </div>
+                </div>
+              </v-timeline-item>
             </v-timeline>
           </v-card>
         </v-col>
@@ -337,6 +383,7 @@ const apiBaseUrl = ref(apiStore.apiBaseUrl || "http://127.0.0.1:6185");
 
 const platformStepState = ref<StepState>("pending");
 const providerStepState = ref<StepState>("pending");
+const computerUseStepState = ref<StepState>("pending");
 const welcomeAnnouncementRaw = ref<unknown>(null);
 
 function resolveWelcomeAnnouncement(raw: unknown, currentLocale: string) {