feat(remote): Show the connection progress while reopening a remote project at startup

src/features/welcome/Welcome.module.css

@@ -386,13 +386,33 @@
 .reopening {
   flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 14px;
   color: var(--fg-muted);
   padding-bottom: 38px;
 }
 
+.reopeningTitle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.reopeningStage {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.92em;
+}
+
+.reopeningStage > [role="progressbar"] {
+  align-self: stretch;
+}
+
 /* ---- Recent projects popup -------------------------------------------- */
 
 .popup {

src/features/welcome/WelcomeView.tsx

@@ -2,10 +2,12 @@
 import { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { executeAction } from "@/platform/actions";
-import { useT } from "@/platform/i18n";
+import { useT, useTx } from "@/platform/i18n";
 import { isTauri } from "@/platform/ipc";
 import { useProject } from "@/platform/project";
-import { Icon, IconButton, Menu, Spinner, type MenuItem, T } from "@/ui";
+import { useRemoteProgress } from "@/platform/remote";
+import { stageLabel } from "@/features/remote-dev/model";
+import { Icon, IconButton, Menu, ProgressBar, Spinner, type MenuItem, T } from "@/ui";
 import { useSettingsPages } from "@/workbench/contributions";
 import { ErrorBoundary, Slot } from "@/workbench/ErrorBoundary";
 import logo from "../../../src-tauri/icons/128x128.png";
@@ -111,6 +113,28 @@ function useFolderDrop(): boolean {
   return over;
 }
 
+/** The last session's project opening at startup; a remote one shows how far connecting is. */
+function Reopening({ location }: { location: string }) {
+  const tx = useTx();
+  const progress = useRemoteProgress((s) => s.progress);
+  const name = location.slice(location.lastIndexOf("/") + 1);
+  const percent = progress?.fraction == null ? "" : ` ${Math.round(progress.fraction * 100)}%`;
+  return (
+    <div className={styles.reopening} role="status">
+      <div className={styles.reopeningTitle}>
+        <Spinner size={16} />
+        <span>{tx`Opening ${name}…`}</span>
+      </div>
+      {progress && (
+        <div className={styles.reopeningStage}>
+          <span>{tx(stageLabel(progress.stage)) + percent}</span>
+          <ProgressBar value={progress.fraction} aria-label={tx(stageLabel(progress.stage))} />
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function WelcomeView() {
   const t = useT();
   const version = useRecent((s) => s.version);
@@ -125,15 +149,7 @@ export function WelcomeView() {
     void loadRecent();
   }, []);
 
-  if (reopening) {
-    const name = reopening.slice(reopening.lastIndexOf("/") + 1);
-    return (
-      <div className={styles.reopening} role="status">
-        <Spinner size={16} />
-        <span>Opening {name}…</span>
-      </div>
-    );
-  }
+  if (reopening) return <Reopening location={reopening} />;
 
   return (
     <div className={styles.welcome}>

src/platform/locales/text/zh.json

@@ -1301,7 +1301,6 @@
   "Open project in": "打开项目的位置",
   "Open to the Side": "在侧边打开",
   "OpenSSH config and authentication agent": "OpenSSH 配置和身份验证代理",
-  "Opening": "正在打开",
   "Opening Policy": "打开策略",
   "Opening folders requires the desktop app": "打开文件夹需要桌面应用",
   "Opening projects requires the desktop app": "打开项目需要桌面应用",
@@ -4160,5 +4159,6 @@
   "Installing the IDE backend on the host…": "正在主机上安装 IDE 后端…",
   "Starting the IDE backend…": "正在启动 IDE 后端…",
   "Opening the project…": "正在打开项目…",
-  "Cannot load agent tasks": "无法加载智能体任务"
+  "Cannot load agent tasks": "无法加载智能体任务",
+  "Opening {name}…": "正在打开 {name}…"
 }