From 2695d9dace30b356d56770ad77abd266a7102ddb Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Mon, 1 Jun 2026 19:30:13 +0800
Subject: [PATCH] feat(web): redesign install-progress dialog for MCP/skill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The progress dialog showed plugin-only stages (download + dependency install)
for every type. MCP/skill have no such steps, so show a single
"installing → done/failed" row for them (MCP: adding & connecting the server;
skill: installing the package) while keeping the detailed download/deps
stages for plugins.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../PluginInstallProgressDialog.tsx           | 101 +++++++++++-------
 web/src/i18n/locales/en-US.ts                 |   5 +
 web/src/i18n/locales/zh-Hans.ts               |   5 +
 3 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx
index 3ad5bef9..fdd55363 100644
--- a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx
+++ b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx
@@ -10,6 +10,8 @@ import { Button } from '@/components/ui/button';
 import {
   Download,
   Package,
+  Server,
+  BookOpen,
   CheckCircle2,
   XCircle,
   Loader2,
@@ -171,6 +173,15 @@ function TaskProgressContent({ task }: { task: PluginInstallTask }) {
   const isDone = task.stage === InstallStage.DONE;
   const isError = task.stage === InstallStage.ERROR;
 
+  // MCP / Skill don't have the plugin's download + dependency-install stages;
+  // show a single "installing → done/failed" row instead of plugin steps.
+  const isPlugin = task.extensionType === 'plugin';
+  const simpleIcon = task.extensionType === 'mcp' ? Server : BookOpen;
+  const simpleInstallingLabel =
+    task.extensionType === 'mcp'
+      ? t('addExtension.installStage.mcpInstalling')
+      : t('addExtension.installStage.skillInstalling');
+
   /** Build detail node for a stage */
   const getStageDetail = (
     stageKey: InstallStage,
@@ -307,42 +318,60 @@ function TaskProgressContent({ task }: { task: PluginInstallTask }) {
 
       {/* Stage display */}
       <div className="space-y-1.5">
-        {isDone
-          ? /* When done: show all stages with completed style */
-            STAGES.map((stageConfig) => (
-              <StageRow
-                key={stageConfig.key}
-                icon={stageConfig.icon}
-                label={t(stageConfig.i18nKey)}
-                isActive={false}
-                isCompleted={true}
-                isError={false}
-                detail={getStageDetail(stageConfig.key, true)}
-              />
-            ))
-          : isError
-            ? /* Error: show the failed stage */
-              currentStageIndex >= 0 && (
-                <StageRow
-                  icon={STAGES[currentStageIndex].icon}
-                  label={t(STAGES[currentStageIndex].i18nKey)}
-                  isActive={true}
-                  isCompleted={false}
-                  isError={true}
-                  detail={task.error}
-                />
-              )
-            : /* In progress: only show the current active stage */
-              currentStageIndex >= 0 && (
-                <StageRow
-                  icon={STAGES[currentStageIndex].icon}
-                  label={t(STAGES[currentStageIndex].i18nKey)}
-                  isActive={true}
-                  isCompleted={false}
-                  isError={false}
-                  detail={getStageDetail(STAGES[currentStageIndex].key, false)}
-                />
-              )}
+        {!isPlugin ? (
+          /* MCP / Skill: single installing → done/failed row */
+          <StageRow
+            icon={simpleIcon}
+            label={
+              isDone
+                ? t('addExtension.installStage.installed')
+                : isError
+                  ? t('plugins.installProgress.failed')
+                  : simpleInstallingLabel
+            }
+            isActive={!isDone}
+            isCompleted={isDone}
+            isError={isError}
+            detail={isError ? task.error : undefined}
+          />
+        ) : isDone ? (
+          /* When done: show all stages with completed style */
+          STAGES.map((stageConfig) => (
+            <StageRow
+              key={stageConfig.key}
+              icon={stageConfig.icon}
+              label={t(stageConfig.i18nKey)}
+              isActive={false}
+              isCompleted={true}
+              isError={false}
+              detail={getStageDetail(stageConfig.key, true)}
+            />
+          ))
+        ) : isError ? (
+          /* Error: show the failed stage */
+          currentStageIndex >= 0 && (
+            <StageRow
+              icon={STAGES[currentStageIndex].icon}
+              label={t(STAGES[currentStageIndex].i18nKey)}
+              isActive={true}
+              isCompleted={false}
+              isError={true}
+              detail={task.error}
+            />
+          )
+        ) : (
+          /* In progress: only show the current active stage */
+          currentStageIndex >= 0 && (
+            <StageRow
+              icon={STAGES[currentStageIndex].icon}
+              label={t(STAGES[currentStageIndex].i18nKey)}
+              isActive={true}
+              isCompleted={false}
+              isError={false}
+              detail={getStageDetail(STAGES[currentStageIndex].key, false)}
+            />
+          )
+        )}
       </div>
 
       {/* Done banner */}
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index faa503f8..593e3b24 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -1537,6 +1537,11 @@ const enUS = {
     installInfoId: 'ID',
     installInfoVersion: 'Version',
     installSuccess: 'Installed successfully',
+    installStage: {
+      mcpInstalling: 'Adding and connecting the MCP server…',
+      skillInstalling: 'Installing the skill…',
+      installed: 'Done',
+    },
     manualAdd: 'Manual Add',
     uploadExtension: 'Drag & drop or click to upload',
     uploadHint: 'Supports .zip (skills) and .lbpkg (plugins) files',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index 6e2a7eb1..73fc9138 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -1473,6 +1473,11 @@ const zhHans = {
     installInfoId: '标识',
     installInfoVersion: '版本',
     installSuccess: '安装成功',
+    installStage: {
+      mcpInstalling: '正在添加并连接 MCP 服务器…',
+      skillInstalling: '正在安装技能…',
+      installed: '已完成',
+    },
     manualAdd: '手动添加',
     uploadExtension: '拖拽或点击上传扩展包',
     uploadHint: '支持 .zip（技能）和 .lbpkg（插件）文件',