diff --git a/MiniApp/Demo/git-graph/README.md b/MiniApp/Demo/git-graph/README.md
index 86c8a8f9..c2115c82 100644
--- a/MiniApp/Demo/git-graph/README.md
+++ b/MiniApp/Demo/git-graph/README.md
@@ -70,11 +70,11 @@ miniapps/git-graph/
 
 3. **Install dependencies**: inside the MiniApp's app directory, run:
    - `bun install` or `npm install` (matching the runtime BitFun detected)
-   - Or use the "Install Dependencies" action in Toolbox (calls `miniapp_install_deps`)
+   - Or use the "Install Dependencies" action in the Mini Apps gallery (calls `miniapp_install_deps`)
 
 4. **Compile**: to regenerate `compiled.html`, call `miniapp_recompile` or let BitFun compile automatically when the MiniApp is opened.
 
-5. Open the MiniApp in the Toolbox scene, pick a repository, and the Git Graph will appear.
+5. Open the MiniApp in the Mini Apps gallery, pick a repository, and the Git Graph will appear.
 
 ### Permissions
 
@@ -159,11 +159,11 @@ miniapps/git-graph/
 
 3. **安装依赖**：在 MiniApp 的 app 目录下执行：
    - `bun install` 或 `npm install`（与 BitFun 检测到的运行时一致）
-   - 或在 Toolbox 中对该 MiniApp 执行「安装依赖」操作（调用 `miniapp_install_deps`）
+   - 或在 Mini Apps 画廊中对该 MiniApp 执行「安装依赖」操作（调用 `miniapp_install_deps`）
 
 4. **编译**：若需重新生成 `compiled.html`，可调用 `miniapp_recompile` 或由 BitFun 在打开该 MiniApp 时自动编译。
 
-5. 在 Toolbox 场景中打开该 MiniApp，选择仓库后即可查看 Git Graph。
+5. 在 Mini Apps 画廊中打开该 MiniApp，选择仓库后即可查看 Git Graph。
 
 ### 权限说明
 
diff --git a/MiniApp/Skills/miniapp-dev/SKILL.md b/MiniApp/Skills/miniapp-dev/SKILL.md
index 14b7206d..904527df 100644
--- a/MiniApp/Skills/miniapp-dev/SKILL.md
+++ b/MiniApp/Skills/miniapp-dev/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: miniapp-dev
-description: Develops and maintains the BitFun MiniApp system (Zero-Dialect Runtime). Use when working on miniapp modules, toolbox scene, bridge scripts, agent tool (InitMiniApp), permission policy, or any code under src/crates/core/src/miniapp/ or src/web-ui/src/app/scenes/toolbox/. Also use when the user mentions MiniApp, toolbox, bridge, or zero-dialect.
+description: Develops and maintains the BitFun MiniApp system (Zero-Dialect Runtime). Use when working on miniapp modules, Mini Apps gallery, bridge scripts, agent tool (InitMiniApp), permission policy, or any code under src/crates/core/src/miniapp/ or src/web-ui/src/app/scenes/miniapps/. Also use when the user mentions MiniApp, miniapps, bridge, or zero-dialect.
 ---
 
 # BitFun MiniApp V2 开发指南
@@ -52,14 +52,16 @@ src/crates/core/src/agentic/tools/implementations/
 ### 前端
 
 ```
-src/web-ui/src/app/scenes/toolbox/
-├── ToolboxScene.tsx / .scss
-├── toolboxStore.ts
-├── views/ GalleryView, AppRunnerView
+src/web-ui/src/app/scenes/miniapps/
+├── MiniAppGalleryScene.tsx / .scss
+├── MiniAppScene.tsx / .scss
+├── miniAppStore.ts
+├── views/ MiniAppGalleryView
 ├── components/ MiniAppCard, MiniAppRunner (iframe 带 data-app-id)
-└── hooks/
-    ├── useMiniAppBridge.ts   # 仅处理 worker.call → workerCall() + dialog.open/save/message
-    └── useMiniAppList.ts
+├── hooks/
+│   ├── useMiniAppBridge.ts        # worker.call → workerCall() + dialog.open/save/message
+│   └── useMiniAppCatalogSync.ts   # 列表与运行态同步
+└── utils/ miniAppIcons.tsx, buildMiniAppThemeVars.ts
 
 src/web-ui/src/infrastructure/api/service-api/MiniAppAPI.ts  # runtimeStatus, workerCall, workerStop, installDeps, recompile
 src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx   # InitMiniAppDisplay
@@ -213,7 +215,7 @@ body {
 
 ### 前端事件
 
-后端 `miniapp-created` / `miniapp-updated` / `miniapp-deleted`，前端 `useMiniAppList` 监听刷新。
+后端 `miniapp-created` / `miniapp-updated` / `miniapp-deleted` / `miniapp-worker-*`，前端 `useMiniAppCatalogSync` 统一监听并刷新 store。
 
 ## 场景注册检查清单
 
diff --git a/MiniApp/Skills/miniapp-dev/architecture.md b/MiniApp/Skills/miniapp-dev/architecture.md
index 458cb52c..21af1078 100644
--- a/MiniApp/Skills/miniapp-dev/architecture.md
+++ b/MiniApp/Skills/miniapp-dev/architecture.md
@@ -7,8 +7,8 @@ AI 对话 → GenerateMiniApp Tool → MiniAppManager::create()
   → storage.rs 持久化 source + meta.json
   → compiler.rs 生成 compiled_html（注入 Bridge）
   → emit miniapp-created 事件
-  → 前端 useMiniAppList 监听 → 刷新 GalleryView
-  → 用户点击「打开」→ AppRunnerView → MiniAppRunner
+  → 前端 useMiniAppCatalogSync 监听 → 刷新 MiniAppGalleryView
+  → 用户点击「打开」→ MiniAppScene → MiniAppRunner
   → <iframe srcDoc={compiled_html}>
   → Bridge Script 拦截 require/fetch → postMessage
   → useMiniAppBridge 路由 → Tauri Commands → Rust 服务
@@ -129,23 +129,26 @@ struct MiniAppFsRequest {
 
 ## 前端状态管理
 
-### toolboxStore (Zustand)
+### miniAppStore (Zustand)
 ```typescript
 {
-  activeView: 'gallery' | 'runner',  // 当前视图
-  currentAppId: string | null,       // runner 视图中的 app
   apps: MiniAppMeta[],               // 画廊列表
   loading: boolean,
-  openApp(id),                       // 切换到 runner
-  backToGallery(),                   // 返回画廊
+  openedAppIds: string[],            // 当前已打开的 MiniApp scene
+  runningWorkerIds: string[],        // 当前运行中的 worker
+  openApp(id),
+  closeApp(id),
+  setRunningWorkerIds(ids),
+  markWorkerRunning(id),
+  markWorkerStopped(id),
 }
 ```
 
 ### 事件驱动刷新
-`useMiniAppList` hook:
-- 组件挂载时加载列表
-- 监听 `miniapp-created`, `miniapp-updated`, `miniapp-deleted` 事件
-- 事件触发时自动重新加载列表
+`useMiniAppCatalogSync` hook:
+- 组件挂载时加载列表和运行中的 worker
+- 监听 `miniapp-created`, `miniapp-updated`, `miniapp-deleted`, `miniapp-worker-restarted`, `miniapp-worker-stopped`
+- 事件触发时统一刷新 store，导航入口与画廊共享同一份状态
 
 ## 工具卡片集成
 
@@ -160,4 +163,4 @@ TOOL_CARD_CONFIGS.set('ListMiniApps', { icon: List, displayName: '列出 MiniApp
 卡片支持:
 - 流式显示工具调用状态
 - 完成后显示应用名/ID/数量
-- "在工具箱中打开" 按钮（调用 `sceneManager.openScene('toolbox')`）
+- "Open in Mini App" 按钮直达 `sceneManager.openScene(\`miniapp:${appId}\`)`
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03913c46..a2fc3132 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -278,6 +278,9 @@ importers:
       vite:
         specifier: ^7.0.4
         version: 7.3.1(@types/node@20.19.37)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitest:
+        specifier: ^4.1.0
+        version: 4.1.0(@types/node@20.19.37)(vite@7.3.1(@types/node@20.19.37)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
 
   tests/e2e:
     devDependencies:
@@ -1265,6 +1268,9 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@tauri-apps/api@2.10.1':
     resolution: {integrity: sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw==}
 
@@ -1378,6 +1384,9 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
@@ -1474,6 +1483,9 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -1578,18 +1590,47 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
+  '@vitest/expect@4.1.0':
+    resolution: {integrity: sha512-EIxG7k4wlWweuCLG9Y5InKFwpMEOyrMb6ZJ1ihYu02LVj/bzUwn2VMU+13PinsjRW75XnITeFrQBMH5+dLvCDA==}
+
+  '@vitest/mocker@4.1.0':
+    resolution: {integrity: sha512-evxREh+Hork43+Y4IOhTo+h5lGmVRyjqI739Rz4RlUPqwrkFFDF6EMvOOYjTx4E8Tl6gyCLRL8Mu7Ry12a13Tw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
   '@vitest/pretty-format@2.1.9':
     resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
 
   '@vitest/pretty-format@4.0.18':
     resolution: {integrity: sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==}
 
+  '@vitest/pretty-format@4.1.0':
+    resolution: {integrity: sha512-3RZLZlh88Ib0J7NQTRATfc/3ZPOnSUn2uDBUoGNn5T36+bALixmzphN26OUD3LRXWkJu4H0s5vvUeqBiw+kS0A==}
+
+  '@vitest/runner@4.1.0':
+    resolution: {integrity: sha512-Duvx2OzQ7d6OjchL+trw+aSrb9idh7pnNfxrklo14p3zmNL4qPCDeIJAK+eBKYjkIwG96Bc6vYuxhqDXQOWpoQ==}
+
   '@vitest/snapshot@2.1.9':
     resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==}
 
   '@vitest/snapshot@4.0.18':
     resolution: {integrity: sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==}
 
+  '@vitest/snapshot@4.1.0':
+    resolution: {integrity: sha512-0Vy9euT1kgsnj1CHttwi9i9o+4rRLEaPRSOJ5gyv579GJkNpgJK+B4HSv/rAWixx2wdAFci1X4CEPjiu2bXIMg==}
+
+  '@vitest/spy@4.1.0':
+    resolution: {integrity: sha512-pz77k+PgNpyMDv2FV6qmk5ZVau6c3R8HC8v342T2xlFxQKTrSeYw9waIJG8KgV9fFwAtTu4ceRzMivPTH6wSxw==}
+
+  '@vitest/utils@4.1.0':
+    resolution: {integrity: sha512-XfPXT6a8TZY3dcGY8EdwsBulFCIw+BeeX0RZn2x/BtiY/75YGh8FeWGG8QISN/WhaqSrE2OrlDgtF8q5uhOTmw==}
+
   '@wdio/cli@9.24.0':
     resolution: {integrity: sha512-dFs1HNmyXne0pDOYPOHhFcck0BC22z0lMdu6RtTX1C4gHdEYsjTtTH2zsZ5N5BzzsZVSUol2PisuqyLQO5dZIA==}
     engines: {node: '>=18.20.0'}
@@ -1790,6 +1831,10 @@ packages:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   ast-types@0.13.4:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
@@ -1948,6 +1993,10 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   chainsaw@0.1.0:
     resolution: {integrity: sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==}
 
@@ -2479,6 +2528,9 @@ packages:
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
+  es-module-lexer@2.0.0:
+    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+
   esbuild@0.27.2:
     resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
     engines: {node: '>=18'}
@@ -2520,6 +2572,9 @@ packages:
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -2543,6 +2598,10 @@ packages:
     resolution: {integrity: sha512-Fqs7ChZm72y40wKjOFXBKg7nJZvQJmewP5/7LtePDdnah/+FH9Hp5sgMujSCMPXlxOAW2//1jrW9pnsY7o20vQ==}
     engines: {node: '>=18'}
 
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   expect-webdriverio@5.6.4:
     resolution: {integrity: sha512-Bkoqs+39fHwjos51qab7ZWmvZrYNBbzgSAIykH2CrgLOLhHJXzC30DP9lZq2MsmaUsbBnN5c5m8VqAhOHTrCRw==}
     engines: {node: '>=20'}
@@ -2727,7 +2786,7 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
@@ -3482,6 +3541,9 @@ packages:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
   on-exit-leak-free@2.1.2:
     resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
     engines: {node: '>=14.0.0'}
@@ -3959,6 +4021,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -4026,6 +4091,9 @@ packages:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   state-local@1.0.7:
     resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
 
@@ -4033,6 +4101,9 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  std-env@4.0.0:
+    resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==}
+
   stream-buffers@3.0.3:
     resolution: {integrity: sha512-pqMqwQCso0PBJt2PQmDO0cFj0lyqmiwOMiMSkVtRokl7e+ZTRYgDHKnuZNbqjiJXgsg4nuqtD/zxuo9KqTp0Yw==}
     engines: {node: '>= 0.10.0'}
@@ -4135,6 +4206,9 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
   tinyexec@1.0.2:
     resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
     engines: {node: '>=18'}
@@ -4372,6 +4446,41 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.0:
+    resolution: {integrity: sha512-YbDrMF9jM2Lqc++2530UourxZHmkKLxrs4+mYhEwqWS97WJ7wOYEkcr+QfRgJ3PW9wz3odRijLZjHEaRLTNbqw==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.0
+      '@vitest/browser-preview': 4.1.0
+      '@vitest/browser-webdriverio': 4.1.0
+      '@vitest/ui': 4.1.0
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
@@ -4466,6 +4575,11 @@ packages:
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   workerpool@6.5.1:
     resolution: {integrity: sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==}
 
@@ -5467,6 +5581,8 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@standard-schema/spec@1.1.0': {}
+
   '@tauri-apps/api@2.10.1': {}
 
   '@tauri-apps/cli-darwin-arm64@2.10.0':
@@ -5563,6 +5679,11 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/d3-array@3.2.2': {}
 
   '@types/d3-axis@3.0.6':
@@ -5684,6 +5805,8 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.8
@@ -5802,6 +5925,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/expect@4.1.0':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.0
+      '@vitest/utils': 4.1.0
+      chai: 6.2.2
+      tinyrainbow: 3.0.3
+
+  '@vitest/mocker@4.1.0(vite@7.3.1(@types/node@20.19.37)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@vitest/spy': 4.1.0
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.1(@types/node@20.19.37)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+
   '@vitest/pretty-format@2.1.9':
     dependencies:
       tinyrainbow: 1.2.0
@@ -5810,6 +5950,15 @@ snapshots:
     dependencies:
       tinyrainbow: 3.0.3
 
+  '@vitest/pretty-format@4.1.0':
+    dependencies:
+      tinyrainbow: 3.0.3
+
+  '@vitest/runner@4.1.0':
+    dependencies:
+      '@vitest/utils': 4.1.0
+      pathe: 2.0.3
+
   '@vitest/snapshot@2.1.9':
     dependencies:
       '@vitest/pretty-format': 2.1.9
@@ -5822,6 +5971,21 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
 
+  '@vitest/snapshot@4.1.0':
+    dependencies:
+      '@vitest/pretty-format': 4.1.0
+      '@vitest/utils': 4.1.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.0': {}
+
+  '@vitest/utils@4.1.0':
+    dependencies:
+      '@vitest/pretty-format': 4.1.0
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.0.3
+
   '@wdio/cli@9.24.0(@types/node@20.19.37)(expect-webdriverio@5.6.4)(puppeteer-core@21.11.0)':
     dependencies:
       '@vitest/snapshot': 2.1.9
@@ -6225,6 +6389,8 @@ snapshots:
 
   aria-query@5.3.2: {}
 
+  assertion-error@2.0.1: {}
+
   ast-types@0.13.4:
     dependencies:
       tslib: 2.8.1
@@ -6353,6 +6519,8 @@ snapshots:
 
   ccount@2.0.1: {}
 
+  chai@6.2.2: {}
+
   chainsaw@0.1.0:
     dependencies:
       traverse: 0.3.9
@@ -6964,6 +7132,8 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
+  es-module-lexer@2.0.0: {}
+
   esbuild@0.27.2:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.27.2
@@ -7017,6 +7187,10 @@ snapshots:
 
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   esutils@2.0.3: {}
 
   event-target-shim@5.0.1: {}
@@ -7046,6 +7220,8 @@ snapshots:
 
   exit-hook@4.0.0: {}
 
+  expect-type@1.3.0: {}
+
   expect-webdriverio@5.6.4(@wdio/globals@9.23.0)(@wdio/logger@9.18.0)(webdriverio@9.24.0(puppeteer-core@21.11.0)):
     dependencies:
       '@vitest/snapshot': 4.0.18
@@ -8327,6 +8503,8 @@ snapshots:
 
   object-inspect@1.13.4: {}
 
+  obug@2.1.1: {}
+
   on-exit-leak-free@2.1.2: {}
 
   once@1.4.0:
@@ -8946,6 +9124,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  siginfo@2.0.0: {}
+
   signal-exit@4.1.0: {}
 
   slash@3.0.0: {}
@@ -9006,10 +9186,14 @@ snapshots:
     dependencies:
       escape-string-regexp: 2.0.0
 
+  stackback@0.0.2: {}
+
   state-local@1.0.7: {}
 
   statuses@2.0.2: {}
 
+  std-env@4.0.0: {}
+
   stream-buffers@3.0.3: {}
 
   stream-shift@1.0.3: {}
@@ -9150,6 +9334,8 @@ snapshots:
 
   through@2.3.8: {}
 
+  tinybench@2.9.0: {}
+
   tinyexec@1.0.2: {}
 
   tinyglobby@0.2.15:
@@ -9375,6 +9561,33 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.8.2
 
+  vitest@4.1.0(@types/node@20.19.37)(vite@7.3.1(@types/node@20.19.37)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
+    dependencies:
+      '@vitest/expect': 4.1.0
+      '@vitest/mocker': 4.1.0(vite@7.3.1(@types/node@20.19.37)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/pretty-format': 4.1.0
+      '@vitest/runner': 4.1.0
+      '@vitest/snapshot': 4.1.0
+      '@vitest/spy': 4.1.0
+      '@vitest/utils': 4.1.0
+      es-module-lexer: 2.0.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 4.0.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.3.1(@types/node@20.19.37)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 20.19.37
+    transitivePeerDependencies:
+      - msw
+
   void-elements@3.1.0: {}
 
   vscode-jsonrpc@8.2.0: {}
@@ -9508,6 +9721,11 @@ snapshots:
     dependencies:
       isexe: 4.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   workerpool@6.5.1: {}
 
   wrap-ansi@6.2.0:
diff --git a/src/apps/desktop/src/api/commands.rs b/src/apps/desktop/src/api/commands.rs
index 30b9bffa..d9ccd5c3 100644
--- a/src/apps/desktop/src/api/commands.rs
+++ b/src/apps/desktop/src/api/commands.rs
@@ -49,6 +49,12 @@ pub struct ResetAssistantWorkspaceRequest {
     pub workspace_id: String,
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ReorderOpenedWorkspacesRequest {
+    pub workspace_ids: Vec<String>,
+}
+
 #[derive(Debug, Deserialize)]
 pub struct TestAIConfigConnectionRequest {
     pub config: bitfun_core::service::config::types::AIModelConfig,
@@ -649,6 +655,7 @@ pub async fn open_workspace(
 #[tauri::command]
 pub async fn create_assistant_workspace(
     state: State<'_, AppState>,
+    app: tauri::AppHandle,
     _request: CreateAssistantWorkspaceRequest,
 ) -> Result<WorkspaceInfoDto, String> {
     match state
@@ -657,6 +664,8 @@ pub async fn create_assistant_workspace(
         .await
     {
         Ok(workspace_info) => {
+            apply_active_workspace_context(&state, &app, &workspace_info).await;
+
             if let Err(e) = state
                 .workspace_identity_watch_service
                 .sync_watched_workspaces()
@@ -951,6 +960,30 @@ pub async fn set_active_workspace(
     }
 }
 
+#[tauri::command]
+pub async fn reorder_opened_workspaces(
+    state: State<'_, AppState>,
+    request: ReorderOpenedWorkspacesRequest,
+) -> Result<(), String> {
+    match state
+        .workspace_service
+        .reorder_opened_workspaces(request.workspace_ids.clone())
+        .await
+    {
+        Ok(_) => {
+            info!(
+                "Opened workspaces reordered: count={}",
+                request.workspace_ids.len()
+            );
+            Ok(())
+        }
+        Err(e) => {
+            error!("Failed to reorder opened workspaces: {}", e);
+            Err(format!("Failed to reorder opened workspaces: {}", e))
+        }
+    }
+}
+
 #[tauri::command]
 pub async fn get_current_workspace(
     state: State<'_, AppState>,
diff --git a/src/apps/desktop/src/lib.rs b/src/apps/desktop/src/lib.rs
index a4d45fa8..6c6a9b5c 100644
--- a/src/apps/desktop/src/lib.rs
+++ b/src/apps/desktop/src/lib.rs
@@ -556,6 +556,7 @@ pub async fn run() {
             reset_assistant_workspace,
             close_workspace,
             set_active_workspace,
+            reorder_opened_workspaces,
             get_current_workspace,
             scan_workspace_info,
             api::prompt_template_api::get_prompt_template_config,
diff --git a/src/crates/core/src/service/workspace/service.rs b/src/crates/core/src/service/workspace/service.rs
index 5544fe04..e73f0a61 100644
--- a/src/crates/core/src/service/workspace/service.rs
+++ b/src/crates/core/src/service/workspace/service.rs
@@ -14,6 +14,7 @@ use crate::util::errors::*;
 use log::{info, warn};
 
 use serde::{Deserialize, Serialize};
+use std::collections::HashSet;
 use std::path::{Path, PathBuf};
 use std::sync::Arc;
 use tokio::fs;
@@ -297,6 +298,50 @@ impl WorkspaceService {
         result
     }
 
+    /// Reorders the opened workspaces without changing active or recent state.
+    pub async fn reorder_opened_workspaces(&self, workspace_ids: Vec<String>) -> BitFunResult<()> {
+        let current_ids = {
+            let manager = self.manager.read().await;
+            manager.get_opened_workspace_ids().clone()
+        };
+
+        if workspace_ids.len() != current_ids.len() {
+            return Err(BitFunError::service(format!(
+                "Opened workspace count mismatch: expected {}, got {}",
+                current_ids.len(),
+                workspace_ids.len()
+            )));
+        }
+
+        let requested_ids = workspace_ids.iter().cloned().collect::<HashSet<_>>();
+        if requested_ids.len() != workspace_ids.len() {
+            return Err(BitFunError::service(
+                "Opened workspace order contains duplicate ids".to_string(),
+            ));
+        }
+
+        let current_id_set = current_ids.iter().cloned().collect::<HashSet<_>>();
+        if requested_ids != current_id_set {
+            return Err(BitFunError::service(
+                "Opened workspace order must contain exactly the currently opened workspace ids"
+                    .to_string(),
+            ));
+        }
+
+        {
+            let mut manager = self.manager.write().await;
+            manager.set_opened_workspace_ids(workspace_ids.clone());
+        }
+
+        if let Err(error) = self.save_workspace_data().await {
+            let mut manager = self.manager.write().await;
+            manager.set_opened_workspace_ids(current_ids);
+            return Err(error);
+        }
+
+        Ok(())
+    }
+
     /// Switches to the specified workspace.
     pub async fn switch_to_workspace(&self, workspace_id: &str) -> BitFunResult<()> {
         self.set_active_workspace(workspace_id).await
diff --git a/src/web-ui/package.json b/src/web-ui/package.json
index a3a755ee..e96cccec 100644
--- a/src/web-ui/package.json
+++ b/src/web-ui/package.json
@@ -10,11 +10,12 @@
     "build:desktop": "vite build --mode desktop",
     "build:web": "vite build --mode web",
     "preview": "vite preview",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
-    "monaco-editor": "^0.52.2",
     "@tauri-apps/api": "^2.10.1",
     "@tauri-apps/plugin-dialog": "^2.6.0",
     "@tauri-apps/plugin-fs": "^2.0.0",
@@ -32,6 +33,7 @@
     "katex": "^0.16.25",
     "lucide-react": "^0.541.0",
     "mermaid": "^11.10.1",
+    "monaco-editor": "^0.52.2",
     "partial-json": "^0.1.7",
     "path-browserify": "^1.0.1",
     "prismjs": "^1.30.0",
@@ -64,6 +66,7 @@
     "@vitejs/plugin-react": "^4.6.0",
     "sass": "^1.93.2",
     "typescript": "~5.8.3",
-    "vite": "^7.0.4"
+    "vite": "^7.0.4",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index 2e4a967f..f3b38905 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -14,6 +14,7 @@
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { Plus, FolderOpen, FolderPlus, History, Check, Bot, Code2, Users } from 'lucide-react';
+import { Tooltip } from '@/component-library';
 import { useApp } from '../../hooks/useApp';
 import { useSceneManager } from '../../hooks/useSceneManager';
 import { useNavSceneStore } from '../../stores/navSceneStore';
@@ -25,10 +26,11 @@ import type { NavItem as NavItemConfig } from './types';
 import type { SceneTabId } from '../SceneBar/types';
 import NavItem from './components/NavItem';
 import SectionHeader from './components/SectionHeader';
-import ToolboxEntry from './components/ToolboxEntry';
+import MiniAppEntry from './components/MiniAppEntry';
 import WorkspaceListSection from './sections/workspaces/WorkspaceListSection';
 import { useSceneStore } from '../../stores/sceneStore';
 import { useMyAgentStore } from '../../scenes/my-agent/myAgentStore';
+import { useMiniAppCatalogSync } from '../../scenes/miniapps/hooks/useMiniAppCatalogSync';
 import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
 import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
 import { configManager } from '@/infrastructure/config/services/ConfigManager';
@@ -74,6 +76,7 @@ const MainNav: React.FC<MainNavProps> = ({
   isDeparting = false,
   anchorNavSceneId = null,
 }) => {
+  useMiniAppCatalogSync();
   const { state, switchLeftPanelTab } = useApp();
   const { openScene } = useSceneManager();
   const openNavScene = useNavSceneStore(s => s.openNavScene);
@@ -148,7 +151,7 @@ const MainNav: React.FC<MainNavProps> = ({
         assistants: 'nav.workspaces.groups.assistants',
         workspace: 'nav.sections.workspace',
         'my-agent': 'nav.sections.myAgent',
-        toolbox: 'scenes.toolbox',
+        miniapps: 'scenes.miniApps',
       };
       const key = keyMap[sectionId];
       return key ? t(key) || fallbackLabel : fallbackLabel;
@@ -300,7 +303,11 @@ const MainNav: React.FC<MainNavProps> = ({
   const handleOpenProject = useCallback(async () => {
     try {
       const { open } = await import('@tauri-apps/plugin-dialog');
-      const selected = await open({ directory: true, multiple: false, title: t('header.selectProjectDirectory') });
+      const selected = await open({
+        directory: true,
+        multiple: false,
+        title: t('header.selectProjectDirectory'),
+      });
       if (selected && typeof selected === 'string') {
         await workspaceManager.openWorkspace(selected);
       }
@@ -317,11 +324,7 @@ const MainNav: React.FC<MainNavProps> = ({
     const targetWorkspace = recentWorkspaces.find(item => item.id === workspaceId);
     if (!targetWorkspace) return;
     closeWorkspaceMenu();
-    try {
-      await switchWorkspace(targetWorkspace);
-    } catch (err) {
-      log.error('Failed to switch workspace', err);
-    }
+    await switchWorkspace(targetWorkspace);
   }, [closeWorkspaceMenu, recentWorkspaces, switchWorkspace]);
 
   useEffect(() => {
@@ -470,6 +473,19 @@ const MainNav: React.FC<MainNavProps> = ({
     : defaultSessionMode === 'cowork'
       ? Users
       : Code2;
+  const personaTooltip = t('nav.items.persona');
+  const createSessionTooltip = isAssistantWorkspaceActive
+    ? t('nav.sessions.newClawSession')
+    : defaultSessionMode === 'cowork'
+      ? t('nav.sessions.newCoworkSession')
+      : t('nav.sessions.newCodeSession');
+  const createModeTooltip = isAssistantWorkspaceActive
+    ? t('nav.workspaces.actions.newAssistant')
+    : defaultSessionMode === 'cowork'
+      ? t('nav.sessions.newCoworkSessionDefault')
+      : t('nav.sessions.newCodeSessionDefault');
+  const createAssistantTooltip = t('nav.workspaces.actions.newAssistant');
+  const openProjectTooltip = t('header.openProject');
 
   const modeDropdownPortal = modeDropdownOpen ? createPortal(
     <div
@@ -519,53 +535,46 @@ const MainNav: React.FC<MainNavProps> = ({
   return (
     <>
       <div className="bitfun-nav-panel__workspace-toolbar">
-        <button
-          type="button"
-          className="bitfun-nav-panel__workspace-bot"
-          onClick={handleOpenProfile}
-          aria-label={t('nav.items.persona')}
-          title={t('nav.items.persona')}
-        >
-          <img className="bitfun-nav-panel__workspace-bot-logo" src="/Logo-ICON.png" alt="" />
-        </button>
-        <div className="bitfun-nav-panel__workspace-create-group">
-          <button
-            type="button"
-            className="bitfun-nav-panel__workspace-create-main"
-            onClick={handleCreateSession}
-            title={
-              isAssistantWorkspaceActive
-                ? t('nav.sessions.newClawSession')
-                : defaultSessionMode === 'cowork'
-                  ? t('nav.sessions.newCoworkSession')
-                  : t('nav.sessions.newCodeSession')
-            }
-          >
-            <Plus size={14} />
-            <span>{t('nav.sessions.newSession')}</span>
-          </button>
+        <Tooltip content={personaTooltip} placement="right" followCursor>
           <button
-            ref={modeDropdownButtonRef}
             type="button"
-            className={`bitfun-nav-panel__workspace-create-mode${modeDropdownOpen ? ' is-active' : ''}`}
-            onClick={toggleModeDropdown}
-            title={
-              isAssistantWorkspaceActive
-                ? t('nav.workspaces.actions.newAssistant')
-                : defaultSessionMode === 'cowork'
-                  ? t('nav.sessions.newCoworkSessionDefault')
-                  : t('nav.sessions.newCodeSessionDefault')
-            }
-            aria-expanded={modeDropdownOpen}
-            aria-haspopup="listbox"
+            className="bitfun-nav-panel__workspace-bot"
+            onClick={handleOpenProfile}
+            aria-label={personaTooltip}
           >
-            <ModeIcon size={13} />
+            <img className="bitfun-nav-panel__workspace-bot-logo" src="/Logo-ICON.png" alt="" />
           </button>
+        </Tooltip>
+        <div className="bitfun-nav-panel__workspace-create-group">
+          <Tooltip content={createSessionTooltip} placement="right" followCursor>
+            <button
+              type="button"
+              className="bitfun-nav-panel__workspace-create-main"
+              onClick={handleCreateSession}
+              aria-label={createSessionTooltip}
+            >
+              <Plus size={14} />
+              <span>{t('nav.sessions.newSession')}</span>
+            </button>
+          </Tooltip>
+          <Tooltip content={createModeTooltip} placement="right" followCursor disabled={modeDropdownOpen}>
+            <button
+              ref={modeDropdownButtonRef}
+              type="button"
+              className={`bitfun-nav-panel__workspace-create-mode${modeDropdownOpen ? ' is-active' : ''}`}
+              onClick={toggleModeDropdown}
+              aria-label={createModeTooltip}
+              aria-expanded={modeDropdownOpen}
+              aria-haspopup="listbox"
+            >
+              <ModeIcon size={13} />
+            </button>
+          </Tooltip>
         </div>
       </div>
 
       <div className="bitfun-nav-panel__sections">
-        {NAV_SECTIONS.filter(section => section.id !== 'toolbox').map(section => {
+        {NAV_SECTIONS.map(section => {
           const isSectionOpen = expandedSections.has(section.id);
           const isCollapsible = !!section.collapsible;
           const showItems     = !isCollapsible || isSectionOpen;
@@ -585,29 +594,31 @@ const MainNav: React.FC<MainNavProps> = ({
                   onSceneOpen={sectionSceneId ? () => openScene(sectionSceneId) : undefined}
                   actions={section.id === 'assistants' ? (
                     <div className="bitfun-nav-panel__workspace-action-wrap">
-                      <button
-                        type="button"
-                        className="bitfun-nav-panel__section-action"
-                        aria-label={t('nav.workspaces.actions.newAssistant')}
-                        title={t('nav.workspaces.actions.newAssistant')}
-                        onClick={() => { void handleCreateAssistantWorkspace(); }}
-                      >
-                        <Plus size={13} />
-                      </button>
+                      <Tooltip content={createAssistantTooltip} placement="right" followCursor>
+                        <button
+                          type="button"
+                          className="bitfun-nav-panel__section-action"
+                          aria-label={createAssistantTooltip}
+                          onClick={() => { void handleCreateAssistantWorkspace(); }}
+                        >
+                          <Plus size={13} />
+                        </button>
+                      </Tooltip>
                     </div>
                   ) : section.id === 'workspace' ? (
                     <div className="bitfun-nav-panel__workspace-action-wrap">
-                      <button
-                        ref={workspaceMenuButtonRef}
-                        type="button"
-                        className={`bitfun-nav-panel__section-action${workspaceMenuOpen ? ' is-active' : ''}`}
-                        aria-label={t('header.openProject')}
-                        title={t('header.openProject')}
-                        aria-expanded={workspaceMenuOpen}
-                        onClick={toggleWorkspaceMenu}
-                      >
-                        <Plus size={13} />
-                      </button>
+                      <Tooltip content={openProjectTooltip} placement="right" followCursor disabled={workspaceMenuOpen}>
+                        <button
+                          ref={workspaceMenuButtonRef}
+                          type="button"
+                          className={`bitfun-nav-panel__section-action${workspaceMenuOpen ? ' is-active' : ''}`}
+                          aria-label={openProjectTooltip}
+                          aria-expanded={workspaceMenuOpen}
+                          onClick={toggleWorkspaceMenu}
+                        >
+                          <Plus size={13} />
+                        </button>
+                      </Tooltip>
                     </div>
                   ) : undefined}
                 />
@@ -622,9 +633,7 @@ const MainNav: React.FC<MainNavProps> = ({
                       const currentFlatIdx = flatCounter++;
                       const { tab } = item;
                       const dir = getDepartDir(currentFlatIdx);
-                      const isActive = tab === 'toolbox'
-                        ? activeTabId === 'toolbox'
-                        : item.navSceneId
+                      const isActive = item.navSceneId
                         ? false
                         : item.sceneId
                           ? item.sceneId === activeTabId
@@ -664,11 +673,11 @@ const MainNav: React.FC<MainNavProps> = ({
         })}
       </div>
 
-      <div className="bitfun-nav-panel__toolbox-footer">
-        <ToolboxEntry
-          isActive={activeTabId === 'toolbox' || !!activeMiniAppId}
+      <div className="bitfun-nav-panel__miniapp-footer">
+        <MiniAppEntry
+          isActive={activeTabId === 'miniapps' || !!activeMiniAppId}
           activeMiniAppId={activeMiniAppId}
-          onOpenToolbox={() => openScene('toolbox')}
+          onOpenMiniApps={() => openScene('miniapps')}
           onOpenMiniApp={(appId) => openScene(`miniapp:${appId}`)}
         />
       </div>
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 8fd1c452..d1ef46bb 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -401,16 +401,16 @@ $_section-header-height: 24px;
     color: var(--color-text-primary);
   }
 
-  &__toolbox-footer {
+  &__miniapp-footer {
     flex-shrink: 0;
     padding: $size-gap-1 $size-gap-2 $size-gap-2;
   }
 
-  &__toolbox-entry-wrap {
+  &__miniapp-entry-wrap {
     margin: 0;
   }
 
-  &__toolbox-entry {
+  &__miniapp-entry {
     width: 100%;
     min-height: 42px;
     display: flex;
@@ -457,7 +457,7 @@ $_section-header-height: 24px;
     }
   }
 
-  &__toolbox-entry-main {
+  &__miniapp-entry-main {
     min-width: 0;
     display: flex;
     align-items: center;
@@ -465,7 +465,7 @@ $_section-header-height: 24px;
     flex: 1;
   }
 
-  &__toolbox-entry-icon {
+  &__miniapp-entry-icon {
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
@@ -474,20 +474,20 @@ $_section-header-height: 24px;
     opacity: 0.72;
     transition: opacity $motion-fast $easing-standard;
 
-    .bitfun-nav-panel__toolbox-entry:hover &,
-    .bitfun-nav-panel__toolbox-entry.is-active & {
+    .bitfun-nav-panel__miniapp-entry:hover &,
+    .bitfun-nav-panel__miniapp-entry.is-active & {
       opacity: 1;
     }
   }
 
-  &__toolbox-entry-copy {
+  &__miniapp-entry-copy {
     min-width: 0;
     display: flex;
     align-items: baseline;
     gap: 8px;
   }
 
-  &__toolbox-entry-title {
+  &__miniapp-entry-title {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -498,13 +498,13 @@ $_section-header-height: 24px;
     opacity: 0.72;
     transition: opacity $motion-fast $easing-standard;
 
-    .bitfun-nav-panel__toolbox-entry:hover &,
-    .bitfun-nav-panel__toolbox-entry.is-active & {
+    .bitfun-nav-panel__miniapp-entry:hover &,
+    .bitfun-nav-panel__miniapp-entry.is-active & {
       opacity: 1;
     }
   }
 
-  &__toolbox-entry-apps {
+  &__miniapp-entry-apps {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -512,7 +512,7 @@ $_section-header-height: 24px;
     min-width: 0;
   }
 
-  &__toolbox-app-bubble {
+  &__miniapp-bubble {
     width: 26px;
     height: 26px;
     border-radius: 999px;
diff --git a/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.tsx b/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.tsx
new file mode 100644
index 00000000..38b044fb
--- /dev/null
+++ b/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.tsx
@@ -0,0 +1,123 @@
+import React, { useMemo } from 'react';
+import { Boxes } from 'lucide-react';
+import { Tooltip } from '@/component-library';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
+import { useMiniAppStore } from '@/app/scenes/miniapps/miniAppStore';
+import { renderMiniAppIcon, getMiniAppIconGradient } from '@/app/scenes/miniapps/utils/miniAppIcons';
+
+const MAX_VISIBLE_RUNNING_APPS = 3;
+
+interface MiniAppEntryProps {
+  isActive: boolean;
+  activeMiniAppId?: string | null;
+  onOpenMiniApps: () => void;
+  onOpenMiniApp: (appId: string) => void;
+}
+
+const MiniAppEntry: React.FC<MiniAppEntryProps> = ({
+  isActive,
+  activeMiniAppId = null,
+  onOpenMiniApps,
+  onOpenMiniApp,
+}) => {
+  const { t } = useI18n('common');
+  const apps = useMiniAppStore((state) => state.apps);
+  const runningWorkerIds = useMiniAppStore((state) => state.runningWorkerIds);
+
+  const runningApps = useMemo(() => {
+    const appMap = new Map(apps.map((app) => [app.id, app]));
+    const list = runningWorkerIds
+      .map((id) => appMap.get(id))
+      .filter((app): app is NonNullable<typeof app> => !!app);
+
+    if (!activeMiniAppId) {
+      return list;
+    }
+
+    return [...list].sort((a, b) => {
+      if (a.id === activeMiniAppId) return -1;
+      if (b.id === activeMiniAppId) return 1;
+      return 0;
+    });
+  }, [activeMiniAppId, apps, runningWorkerIds]);
+
+  const visibleApps = runningApps.slice(0, MAX_VISIBLE_RUNNING_APPS);
+  const overflowCount = Math.max(0, runningApps.length - visibleApps.length);
+
+  return (
+    <div className="bitfun-nav-panel__miniapp-entry-wrap">
+      <div
+        className={[
+          'bitfun-nav-panel__miniapp-entry',
+          isActive && 'is-active',
+          runningApps.length > 0 && 'has-running-apps',
+        ].filter(Boolean).join(' ')}
+        onClick={onOpenMiniApps}
+        onKeyDown={(event) => {
+          if (event.currentTarget !== event.target) return;
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onOpenMiniApps();
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        aria-label={t('scenes.miniApps')}
+      >
+        <span className="bitfun-nav-panel__miniapp-entry-main">
+          <span className="bitfun-nav-panel__miniapp-entry-icon" aria-hidden="true">
+            <Boxes size={18} />
+          </span>
+          <span className="bitfun-nav-panel__miniapp-entry-copy">
+            <span className="bitfun-nav-panel__miniapp-entry-title">{t('scenes.miniApps')}</span>
+          </span>
+        </span>
+
+        <span className="bitfun-nav-panel__miniapp-entry-apps">
+          {visibleApps.length > 0 ? (
+            <>
+              {visibleApps.map((app) => {
+                const isAppActive = app.id === activeMiniAppId;
+                return (
+                  <Tooltip key={app.id} content={app.name} placement="right">
+                    <span
+                      className={[
+                        'bitfun-nav-panel__miniapp-bubble',
+                        isAppActive && 'is-active',
+                      ].filter(Boolean).join(' ')}
+                      style={{ background: getMiniAppIconGradient(app.icon || 'box') }}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onOpenMiniApp(app.id);
+                      }}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      role="button"
+                      tabIndex={0}
+                      aria-label={app.name}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          onOpenMiniApp(app.id);
+                        }
+                      }}
+                    >
+                      {renderMiniAppIcon(app.icon || 'box', 14)}
+                    </span>
+                  </Tooltip>
+                );
+              })}
+              {overflowCount > 0 ? (
+                <span className="bitfun-nav-panel__miniapp-bubble bitfun-nav-panel__miniapp-bubble--more">
+                  +{overflowCount}
+                </span>
+              ) : null}
+            </>
+          ) : null}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default MiniAppEntry;
diff --git a/src/web-ui/src/app/components/NavPanel/components/ToolboxEntry.tsx b/src/web-ui/src/app/components/NavPanel/components/ToolboxEntry.tsx
deleted file mode 100644
index dfc87e21..00000000
--- a/src/web-ui/src/app/components/NavPanel/components/ToolboxEntry.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { useEffect, useMemo, useCallback } from 'react';
-import { Boxes } from 'lucide-react';
-import { Tooltip } from '@/component-library';
-import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
-import { api } from '@/infrastructure/api/service-api/ApiClient';
-import { miniAppAPI } from '@/infrastructure/api/service-api/MiniAppAPI';
-import { useToolboxStore } from '@/app/scenes/toolbox/toolboxStore';
-import { renderMiniAppIcon, getMiniAppIconGradient } from '@/app/scenes/toolbox/utils/miniAppIcons';
-import { createLogger } from '@/shared/utils/logger';
-
-const log = createLogger('ToolboxEntry');
-const MAX_VISIBLE_RUNNING_APPS = 3;
-
-interface ToolboxEntryProps {
-  isActive: boolean;
-  activeMiniAppId?: string | null;
-  onOpenToolbox: () => void;
-  onOpenMiniApp: (appId: string) => void;
-}
-
-const ToolboxEntry: React.FC<ToolboxEntryProps> = ({
-  isActive,
-  activeMiniAppId = null,
-  onOpenToolbox,
-  onOpenMiniApp,
-}) => {
-  const { t } = useI18n('common');
-  const apps = useToolboxStore((s) => s.apps);
-  const setApps = useToolboxStore((s) => s.setApps);
-  const runningWorkerIds = useToolboxStore((s) => s.runningWorkerIds);
-  const setRunningWorkerIds = useToolboxStore((s) => s.setRunningWorkerIds);
-  const markWorkerRunning = useToolboxStore((s) => s.markWorkerRunning);
-  const markWorkerStopped = useToolboxStore((s) => s.markWorkerStopped);
-
-  const refreshApps = useCallback(async () => {
-    try {
-      const nextApps = await miniAppAPI.listMiniApps();
-      setApps(nextApps);
-    } catch (error) {
-      log.error('Failed to refresh miniapps for toolbox entry', error);
-    }
-  }, [setApps]);
-
-  useEffect(() => {
-    void refreshApps();
-    miniAppAPI.workerListRunning().then(setRunningWorkerIds).catch(() => {});
-
-    const unlistenCreated = api.listen('miniapp-created', () => {
-      void refreshApps();
-    });
-    const unlistenUpdated = api.listen('miniapp-updated', () => {
-      void refreshApps();
-    });
-    const unlistenDeleted = api.listen<{ id?: string }>('miniapp-deleted', (payload) => {
-      if (payload?.id) {
-        markWorkerStopped(payload.id);
-      }
-      void refreshApps();
-    });
-    const unlistenRestarted = api.listen<{ id?: string }>('miniapp-worker-restarted', (payload) => {
-      if (payload?.id) {
-        markWorkerRunning(payload.id);
-      }
-    });
-    const unlistenStopped = api.listen<{ id?: string }>('miniapp-worker-stopped', (payload) => {
-      if (payload?.id) {
-        markWorkerStopped(payload.id);
-      }
-    });
-
-    return () => {
-      unlistenCreated();
-      unlistenUpdated();
-      unlistenDeleted();
-      unlistenRestarted();
-      unlistenStopped();
-    };
-  }, [markWorkerRunning, markWorkerStopped, refreshApps, setRunningWorkerIds]);
-
-  const runningApps = useMemo(() => {
-    const appMap = new Map(apps.map((app) => [app.id, app]));
-    const list = runningWorkerIds
-      .map((id) => appMap.get(id))
-      .filter((app): app is NonNullable<typeof app> => !!app);
-
-    if (!activeMiniAppId) {
-      return list;
-    }
-
-    return [...list].sort((a, b) => {
-      if (a.id === activeMiniAppId) return -1;
-      if (b.id === activeMiniAppId) return 1;
-      return 0;
-    });
-  }, [activeMiniAppId, apps, runningWorkerIds]);
-
-  const visibleApps = runningApps.slice(0, MAX_VISIBLE_RUNNING_APPS);
-  const overflowCount = Math.max(0, runningApps.length - visibleApps.length);
-
-  return (
-    <div className="bitfun-nav-panel__toolbox-entry-wrap">
-      <div
-        className={[
-          'bitfun-nav-panel__toolbox-entry',
-          isActive && 'is-active',
-          runningApps.length > 0 && 'has-running-apps',
-        ].filter(Boolean).join(' ')}
-        onClick={onOpenToolbox}
-        onKeyDown={(e) => {
-          if (e.currentTarget !== e.target) return;
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            onOpenToolbox();
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        aria-label={t('scenes.toolbox')}
-      >
-        <span className="bitfun-nav-panel__toolbox-entry-main">
-          <span className="bitfun-nav-panel__toolbox-entry-icon" aria-hidden="true">
-            <Boxes size={18} />
-          </span>
-          <span className="bitfun-nav-panel__toolbox-entry-copy">
-            <span className="bitfun-nav-panel__toolbox-entry-title">{t('scenes.toolbox')}</span>
-          </span>
-        </span>
-
-        <span className="bitfun-nav-panel__toolbox-entry-apps">
-          {visibleApps.length > 0 ? (
-            <>
-              {visibleApps.map((app) => {
-                const isAppActive = app.id === activeMiniAppId;
-                return (
-                  <Tooltip key={app.id} content={app.name} placement="right">
-                    <span
-                      className={[
-                        'bitfun-nav-panel__toolbox-app-bubble',
-                        isAppActive && 'is-active',
-                      ].filter(Boolean).join(' ')}
-                      style={{ background: getMiniAppIconGradient(app.icon || 'box') }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onOpenMiniApp(app.id);
-                      }}
-                      onMouseDown={(e) => e.stopPropagation()}
-                      role="button"
-                      tabIndex={0}
-                      aria-label={app.name}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          onOpenMiniApp(app.id);
-                        }
-                      }}
-                    >
-                      {renderMiniAppIcon(app.icon || 'box', 14)}
-                    </span>
-                  </Tooltip>
-                );
-              })}
-              {overflowCount > 0 ? (
-                <span className="bitfun-nav-panel__toolbox-app-bubble bitfun-nav-panel__toolbox-app-bubble--more">
-                  +{overflowCount}
-                </span>
-              ) : null}
-            </>
-          ) : null}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export default ToolboxEntry;
diff --git a/src/web-ui/src/app/components/NavPanel/config.ts b/src/web-ui/src/app/components/NavPanel/config.ts
index 9d8221de..cdec00eb 100644
--- a/src/web-ui/src/app/components/NavPanel/config.ts
+++ b/src/web-ui/src/app/components/NavPanel/config.ts
@@ -12,13 +12,6 @@
 import type { NavSection } from './types';
 
 export const NAV_SECTIONS: NavSection[] = [
-  {
-    id: 'toolbox',
-    label: 'Toolbox',
-    collapsible: false,
-    sceneId: 'toolbox',
-    items: [],
-  },
   {
     id: 'assistants',
     label: 'Assistants',
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
index 668eea48..fdcef05f 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
@@ -126,11 +126,9 @@
     }
 
     &.is-btw-child {
-      background: color-mix(in srgb, var(--element-bg-soft) 38%, transparent);
-
       &:hover,
       &.is-active {
-        background: color-mix(in srgb, var(--element-bg-soft) 74%, transparent);
+        background: var(--element-bg-soft);
       }
     }
   }
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
index cdddb272..d974244d 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
@@ -23,6 +23,8 @@ import {
   openMainSession,
   selectActiveBtwSessionTab,
 } from '@/flow_chat/services/openBtwSession';
+import { resolveSessionRelationship } from '@/flow_chat/utils/sessionMetadata';
+import { compareSessionsForDisplay } from '@/flow_chat/utils/sessionOrdering';
 import './SessionsSection.scss';
 
 const MAX_VISIBLE_SESSIONS = 8;
@@ -110,9 +112,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
           }
           return !s.workspacePath;
         })
-        .sort(
-          (a: Session, b: Session) => b.lastActiveAt - a.lastActiveAt
-        ),
+        .sort(compareSessionsForDisplay),
     [flowChatState.sessions, workspacePath]
   );
 
@@ -123,7 +123,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
     const knownIds = new Set(sessions.map(s => s.sessionId));
 
     for (const s of sessions) {
-      const pid = s.parentSessionId;
+      const pid = resolveSessionRelationship(s).parentSessionId;
       if (pid && typeof pid === 'string' && pid.trim() && knownIds.has(pid)) {
         const list = childMap.get(pid) || [];
         list.push(s);
@@ -133,13 +133,12 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
       }
     }
 
-    // Stable ordering: children follow parent, sorted by activity.
     for (const [pid, list] of childMap) {
-      childMap.set(pid, [...list].sort((a, b) => b.lastActiveAt - a.lastActiveAt));
+      childMap.set(pid, [...list].sort(compareSessionsForDisplay));
     }
 
     return {
-      topLevelSessions: [...parents].sort((a, b) => b.lastActiveAt - a.lastActiveAt),
+      topLevelSessions: [...parents].sort(compareSessionsForDisplay),
       childrenByParent: childMap,
     };
   }, [sessions]);
@@ -179,14 +178,15 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
       if (editingSessionId) return;
       try {
         const session = flowChatStore.getState().sessions.get(sessionId);
-        const parentSessionId = session?.btwOrigin?.parentSessionId || session?.parentSessionId;
+        const relationship = resolveSessionRelationship(session);
+        const parentSessionId = relationship.parentSessionId;
         const activateWorkspace = workspaceId && !isActiveWorkspace
           ? async (targetWorkspaceId: string) => {
             await setActiveWorkspace(targetWorkspaceId);
           }
           : undefined;
 
-        if (session?.sessionKind === 'btw' && parentSessionId) {
+        if (relationship.canOpenInAuxPane && parentSessionId && session) {
           await openMainSession(parentSessionId, {
             workspaceId,
             activateWorkspace,
@@ -321,13 +321,14 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
       ) : (
         visibleItems.map(({ session, level }) => {
           const isEditing = editingSessionId === session.sessionId;
-          const isBtwChild = level === 1 && session.sessionKind === 'btw';
+          const relationship = resolveSessionRelationship(session);
+          const isBtwChild = level === 1 && relationship.isBtw;
           const sessionModeKey = resolveSessionModeType(session);
           const sessionTitle = resolveSessionTitle(session);
-          const parentSessionId = session.btwOrigin?.parentSessionId || session.parentSessionId;
+          const parentSessionId = relationship.parentSessionId;
           const parentSession = parentSessionId ? flowChatState.sessions.get(parentSessionId) : undefined;
           const parentTitle = parentSession ? resolveSessionTitle(parentSession) : '';
-          const parentTurnIndex = session.btwOrigin?.parentTurnIndex;
+          const parentTurnIndex = relationship.origin?.parentTurnIndex;
           const tooltipContent = isBtwChild ? (
             <div className="bitfun-nav-panel__inline-item-tooltip">
               <div className="bitfun-nav-panel__inline-item-tooltip-title">{sessionTitle}</div>
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
index 6cfcc576..74734e7a 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
@@ -18,9 +18,21 @@ interface WorkspaceItemProps {
   workspace: WorkspaceInfo;
   isActive: boolean;
   isSingle?: boolean;
+  draggable?: boolean;
+  isDragging?: boolean;
+  onDragStart?: React.DragEventHandler<HTMLDivElement>;
+  onDragEnd?: React.DragEventHandler<HTMLDivElement>;
 }
 
-const WorkspaceItem: React.FC<WorkspaceItemProps> = ({ workspace, isActive, isSingle = false }) => {
+const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
+  workspace,
+  isActive,
+  isSingle = false,
+  draggable = false,
+  isDragging = false,
+  onDragStart,
+  onDragEnd,
+}) => {
   const { t } = useI18n('common');
   const { setActiveWorkspace, closeWorkspaceById, deleteAssistantWorkspace, resetAssistantWorkspace } = useWorkspaceContext();
   const { switchLeftPanelTab } = useApp();
@@ -233,11 +245,18 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({ workspace, isActive, isSi
     <div className={[
       'bitfun-nav-panel__workspace-item',
       isActive && 'is-active',
+      isDragging && 'is-dragging',
       menuOpen && 'is-menu-open',
       sessionsCollapsed && 'is-sessions-collapsed',
       isSingle && 'is-single',
-    ].filter(Boolean).join(' ')}>
-      <div className="bitfun-nav-panel__workspace-item-card">
+    ].filter(Boolean).join(' ')}
+    aria-grabbed={draggable ? isDragging : undefined}>
+      <div
+        className="bitfun-nav-panel__workspace-item-card"
+        draggable={draggable}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+      >
         <button
           type="button"
           className="bitfun-nav-panel__workspace-item-collapse-btn"
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
index a7d75f18..485bf7f0 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
@@ -6,6 +6,12 @@
     flex-direction: column;
     gap: $size-gap-2;
     padding: 4px 0 0;
+
+    &.is-dragging {
+      .bitfun-nav-panel__workspace-item {
+        cursor: grabbing;
+      }
+    }
   }
 
   &__workspace-group {
@@ -76,6 +82,14 @@
     transition: background $motion-fast $easing-standard,
                 border-color $motion-fast $easing-standard;
 
+    &.is-dragging {
+      opacity: 0.42;
+
+      .bitfun-nav-panel__workspace-item-card {
+        cursor: grabbing;
+      }
+    }
+
     &.is-active {
       background: color-mix(in srgb, var(--element-bg-soft) 75%, transparent);
       border-color: transparent;
@@ -142,6 +156,10 @@
     transition: color $motion-fast $easing-standard,
                 background $motion-fast $easing-standard;
 
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
     &:hover {
       color: var(--color-text-primary);
       background: color-mix(in srgb, var(--element-bg-soft) 72%, transparent);
@@ -211,7 +229,7 @@
     width: 14px;
     height: 14px;
     flex-shrink: 0;
-    color: var(--color-primary);
+    color: var(--color-accent-500);
     opacity: 0.85;
   }
 
@@ -428,4 +446,31 @@
       padding-left: $size-gap-1;
     }
   }
+
+  &__workspace-drop-target {
+    border-radius: $size-radius-base;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    &.is-drag-active {
+      .bitfun-nav-panel__workspace-item {
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 80%, transparent);
+      }
+    }
+
+    &.is-drop-target {
+      .bitfun-nav-panel__workspace-item {
+        border-color: color-mix(in srgb, var(--color-accent-500) 18%, transparent);
+      }
+    }
+  }
+
+  &__workspace-drop-line {
+    height: 2px;
+    margin: 3px 12px;
+    background: var(--color-accent-500);
+    border-radius: 999px;
+    pointer-events: none;
+  }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx
index c6cf2181..d7eb8cd2 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
+import { notificationService } from '@/shared/notification-system';
 import WorkspaceItem from './WorkspaceItem';
 import './WorkspaceListSection.scss';
 
@@ -8,6 +9,16 @@ interface WorkspaceListSectionProps {
   variant: 'assistants' | 'projects';
 }
 
+type WorkspaceDragPosition = 'before' | 'after';
+
+interface WorkspaceDragPayload {
+  workspaceId: string;
+  variant: 'assistants' | 'projects';
+}
+
+const WORKSPACE_DRAG_MIME_TYPE = 'application/x-bitfun-workspace';
+
+
 const WorkspaceListSection: React.FC<WorkspaceListSectionProps> = ({ variant }) => {
   const { t } = useI18n('common');
   const {
@@ -15,7 +26,17 @@ const WorkspaceListSection: React.FC<WorkspaceListSectionProps> = ({ variant })
     normalWorkspacesList,
     assistantWorkspacesList,
     activeWorkspaceId,
+    reorderOpenedWorkspacesInSection,
   } = useWorkspaceContext();
+  const [draggedWorkspaceId, setDraggedWorkspaceId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<{
+    workspaceId: string;
+    position: WorkspaceDragPosition;
+  } | null>(null);
+
+  // Refs for values that must be read inside event handlers without stale closures
+  const draggedWorkspaceIdRef = useRef<string | null>(null);
+  const dropTargetRef = useRef<{ workspaceId: string; position: WorkspaceDragPosition } | null>(null);
 
   const workspaces = variant === 'assistants'
     ? assistantWorkspacesList
@@ -24,20 +45,150 @@ const WorkspaceListSection: React.FC<WorkspaceListSectionProps> = ({ variant })
     ? t('nav.workspaces.emptyAssistants')
     : t('nav.workspaces.emptyProjects');
 
+  const handleDragStart = useCallback((workspaceId: string) => (event: React.DragEvent<HTMLDivElement>) => {
+    const payload: WorkspaceDragPayload = { workspaceId, variant };
+    const serializedPayload = JSON.stringify(payload);
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData(WORKSPACE_DRAG_MIME_TYPE, serializedPayload);
+    event.dataTransfer.setData('text/plain', serializedPayload);
+    draggedWorkspaceIdRef.current = workspaceId;
+    setDraggedWorkspaceId(workspaceId);
+  }, [variant]);
+
+  const handleDragEnd = useCallback(() => {
+    draggedWorkspaceIdRef.current = null;
+    dropTargetRef.current = null;
+    setDraggedWorkspaceId(null);
+    setDropTarget(null);
+  }, []);
+
+  const handleDragOver = useCallback((workspaceId: string) => (event: React.DragEvent<HTMLDivElement>) => {
+    // Browsers block reading dataTransfer data during dragover for security.
+    // Check event.dataTransfer.types instead — it IS readable during dragover.
+    const isWorkspaceDrag = event.dataTransfer.types.includes(WORKSPACE_DRAG_MIME_TYPE);
+    const currentDraggedId = draggedWorkspaceIdRef.current;
+
+    if (!isWorkspaceDrag || !currentDraggedId || currentDraggedId === workspaceId) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'move';
+
+    // Measure only the workspace card, not the wrapper that includes the drop-line.
+    const itemEl = event.currentTarget.querySelector<HTMLElement>(
+      '.bitfun-nav-panel__workspace-item'
+    );
+    const rect = itemEl
+      ? itemEl.getBoundingClientRect()
+      : event.currentTarget.getBoundingClientRect();
+
+    const position: WorkspaceDragPosition = event.clientY >= rect.top + rect.height / 2
+      ? 'after'
+      : 'before';
+
+    setDropTarget(current => {
+      if (current?.workspaceId === workspaceId && current.position === position) {
+        return current;
+      }
+      const next = { workspaceId, position };
+      dropTargetRef.current = next;
+      return next;
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Intentionally empty: reads from refs, not closed-over state
+
+  const handleDragLeave = useCallback((workspaceId: string) => (event: React.DragEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+      setDropTarget(current => {
+        if (current?.workspaceId !== workspaceId) return current;
+        dropTargetRef.current = null;
+        return null;
+      });
+    }
+  }, []);
+
+  const handleDrop = useCallback((workspaceId: string) => async (event: React.DragEvent<HTMLDivElement>) => {
+    // On drop, reading dataTransfer data IS allowed.
+    const payloadText =
+      event.dataTransfer.getData(WORKSPACE_DRAG_MIME_TYPE) ||
+      event.dataTransfer.getData('text/plain');
+
+    if (!payloadText) return;
+
+    let payload: WorkspaceDragPayload;
+    try {
+      payload = JSON.parse(payloadText) as WorkspaceDragPayload;
+    } catch {
+      return;
+    }
+
+    if (!payload.workspaceId || payload.variant !== variant) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Reuse the position already determined by dragover — avoid recalculating
+    // on the wrapper whose height may have changed due to the drop-line element.
+    const position =
+      dropTargetRef.current?.workspaceId === workspaceId
+        ? dropTargetRef.current.position
+        : 'after';
+
+    draggedWorkspaceIdRef.current = null;
+    dropTargetRef.current = null;
+    setDropTarget(null);
+
+    try {
+      await reorderOpenedWorkspacesInSection(variant, payload.workspaceId, workspaceId, position);
+    } catch (error) {
+      notificationService.error(
+        error instanceof Error ? error.message : t('nav.workspaces.reorderFailed'),
+        { duration: 4000 }
+      );
+    } finally {
+      setDraggedWorkspaceId(null);
+    }
+  }, [reorderOpenedWorkspacesInSection, t, variant]);
+
   return (
-    <div className="bitfun-nav-panel__workspace-list">
+    <div className={`bitfun-nav-panel__workspace-list${draggedWorkspaceId ? ' is-dragging' : ''}`}>
       {workspaces.length === 0 ? (
         <div className="bitfun-nav-panel__workspace-list-empty">
           {emptyLabel}
         </div>
       ) : (
         workspaces.map(workspace => (
-          <WorkspaceItem
+          <div
             key={workspace.id}
-            workspace={workspace}
-            isActive={workspace.id === activeWorkspaceId}
-            isSingle={openedWorkspacesList.length === 1}
-          />
+            className={[
+              'bitfun-nav-panel__workspace-drop-target',
+              draggedWorkspaceId && draggedWorkspaceId !== workspace.id && 'is-drag-active',
+              dropTarget?.workspaceId === workspace.id && 'is-drop-target',
+              dropTarget?.workspaceId === workspace.id && dropTarget.position === 'before' && 'is-before',
+              dropTarget?.workspaceId === workspace.id && dropTarget.position === 'after' && 'is-after',
+            ].filter(Boolean).join(' ')}
+            onDragOver={handleDragOver(workspace.id)}
+            onDragLeave={handleDragLeave(workspace.id)}
+            onDrop={(event) => { void handleDrop(workspace.id)(event); }}
+          >
+            {dropTarget?.workspaceId === workspace.id && dropTarget.position === 'before' ? (
+              <div className="bitfun-nav-panel__workspace-drop-line" aria-hidden="true" />
+            ) : null}
+            <WorkspaceItem
+              workspace={workspace}
+              isActive={workspace.id === activeWorkspaceId}
+              isSingle={openedWorkspacesList.length === 1}
+              draggable={workspaces.length > 1}
+              isDragging={draggedWorkspaceId === workspace.id}
+              onDragStart={handleDragStart(workspace.id)}
+              onDragEnd={handleDragEnd}
+            />
+            {dropTarget?.workspaceId === workspace.id && dropTarget.position === 'after' ? (
+              <div className="bitfun-nav-panel__workspace-drop-line" aria-hidden="true" />
+            ) : null}
+          </div>
         ))
       )}
     </div>
diff --git a/src/web-ui/src/app/components/SceneBar/types.ts b/src/web-ui/src/app/components/SceneBar/types.ts
index 16bd65c8..71d7615f 100644
--- a/src/web-ui/src/app/components/SceneBar/types.ts
+++ b/src/web-ui/src/app/components/SceneBar/types.ts
@@ -15,7 +15,7 @@ export type SceneTabId =
   | 'profile'
   | 'agents'
   | 'skills'
-  | 'toolbox'
+  | 'miniapps'
   | 'my-agent'
   | 'shell'
   | `miniapp:${string}`;
diff --git a/src/web-ui/src/app/hooks/useSceneManager.ts b/src/web-ui/src/app/hooks/useSceneManager.ts
index a1f20502..e20fca8f 100644
--- a/src/web-ui/src/app/hooks/useSceneManager.ts
+++ b/src/web-ui/src/app/hooks/useSceneManager.ts
@@ -8,7 +8,7 @@
 import { SCENE_TAB_REGISTRY, getMiniAppSceneDef } from '../scenes/registry';
 import type { SceneTabDef, SceneTabId } from '../components/SceneBar/types';
 import { useSceneStore } from '../stores/sceneStore';
-import { useToolboxStore } from '../scenes/toolbox/toolboxStore';
+import { useMiniAppStore } from '../scenes/miniapps/miniAppStore';
 
 export interface UseSceneManagerReturn {
   openTabs: ReturnType<typeof useSceneStore.getState>['openTabs'];
@@ -21,7 +21,7 @@ export interface UseSceneManagerReturn {
 
 export function useSceneManager(): UseSceneManagerReturn {
   const { openTabs, activeTabId, activateScene, openScene, closeScene } = useSceneStore();
-  const apps = useToolboxStore((s) => s.apps);
+  const apps = useMiniAppStore((s) => s.apps);
 
   const miniAppDefs: SceneTabDef[] = openTabs
     .filter((t) => typeof t.id === 'string' && t.id.startsWith('miniapp:'))
diff --git a/src/web-ui/src/app/layout/AppLayout.tsx b/src/web-ui/src/app/layout/AppLayout.tsx
index 88d5e34a..bfc1e2de 100644
--- a/src/web-ui/src/app/layout/AppLayout.tsx
+++ b/src/web-ui/src/app/layout/AppLayout.tsx
@@ -9,6 +9,7 @@
  */
 
 import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { open } from '@tauri-apps/plugin-dialog';
 import { useWorkspaceContext } from '../../infrastructure/contexts/WorkspaceContext';
 import { useWindowControls } from '../hooks/useWindowControls';
 import { useApp } from '../hooks/useApp';
@@ -84,6 +85,21 @@ const AppLayout: React.FC<AppLayoutProps> = ({ className = '' }) => {
   const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
   const [showAboutDialog, setShowAboutDialog] = useState(false);
   const [showWorkspaceStatus, setShowWorkspaceStatus] = useState(false);
+  const handleOpenProject = useCallback(async () => {
+    try {
+      const selected = await open({
+        directory: true,
+        multiple: false,
+        title: t('header.selectProjectDirectory'),
+      });
+
+      if (selected && typeof selected === 'string') {
+        await openWorkspace(selected);
+      }
+    } catch (error) {
+      log.error('Failed to open project', error);
+    }
+  }, [openWorkspace, t]);
   const handleNewProject = useCallback(() => setShowNewProjectDialog(true), []);
   const handleShowAbout  = useCallback(() => setShowAboutDialog(true), []);
 
@@ -101,12 +117,15 @@ const AppLayout: React.FC<AppLayoutProps> = ({ className = '' }) => {
 
   // Listen for nav-panel events dispatched by the workspace area
   useEffect(() => {
+    const onOpenProject = () => { void handleOpenProject(); };
     const onNewProject = () => handleNewProject();
+    window.addEventListener('nav:open-project', onOpenProject);
     window.addEventListener('nav:new-project', onNewProject);
     return () => {
+      window.removeEventListener('nav:open-project', onOpenProject);
       window.removeEventListener('nav:new-project', onNewProject);
     };
-  }, [handleNewProject]);
+  }, [handleNewProject, handleOpenProject]);
 
   // macOS native menubar events (previously in TitleBar)
   const isMacOS = useMemo(() => {
diff --git a/src/web-ui/src/app/layout/FloatingMiniChat.tsx b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
index efabba8b..3741f07e 100644
--- a/src/web-ui/src/app/layout/FloatingMiniChat.tsx
+++ b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
@@ -22,13 +22,11 @@ import { flowChatStore } from '../../flow_chat/store/FlowChatStore';
 import { syncSessionToModernStore } from '../../flow_chat/services/storeSync';
 import { useToolbarModeContext } from '../../flow_chat/components/toolbar-mode/ToolbarModeContext';
 import type { FlowChatState } from '../../flow_chat/types/flow-chat';
+import { compareSessionsForDisplay } from '../../flow_chat/utils/sessionOrdering';
 import { ModernFlowChatContainer } from '../../flow_chat/components/modern/ModernFlowChatContainer';
 import { Tooltip, Input } from '@/component-library';
 import './FloatingMiniChat.scss';
 
-const getSessionTimestamp = (updatedAt?: number, lastActiveAt?: number) =>
-  updatedAt ?? lastActiveAt ?? 0;
-
 export const FloatingMiniChat: React.FC = () => {
   const { t } = useTranslation('flow-chat');
   const { toolbarState } = useToolbarModeContext();
@@ -58,7 +56,7 @@ export const FloatingMiniChat: React.FC = () => {
 
   const sessions = useMemo(() => {
     return Array.from(flowChatState.sessions.values())
-      .sort((a, b) => getSessionTimestamp(b.updatedAt, b.lastActiveAt) - getSessionTimestamp(a.updatedAt, a.lastActiveAt))
+      .sort(compareSessionsForDisplay)
       .slice(0, 10);
   }, [flowChatState]);
 
diff --git a/src/web-ui/src/app/scenes/SceneViewport.scss b/src/web-ui/src/app/scenes/SceneViewport.scss
index 5c14ce6b..11449911 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.scss
+++ b/src/web-ui/src/app/scenes/SceneViewport.scss
@@ -29,48 +29,12 @@
     justify-content: center;
   }
 
-  &__empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-  }
-
   &__empty-hint {
     color: var(--color-text-muted);
     font-size: $font-size-sm;
     margin: 0;
   }
 
-  &__empty-actions {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  &__empty-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 14px;
-    border: 1px solid var(--border-base);
-    border-radius: $size-radius-base;
-    background: var(--element-bg-soft);
-    color: var(--color-text-secondary);
-    font-size: $font-size-sm;
-    cursor: pointer;
-    transition: background $motion-fast $easing-standard,
-                color $motion-fast $easing-standard,
-                border-color $motion-fast $easing-standard;
-
-    &:hover {
-      background: var(--element-bg-medium);
-      color: var(--color-text-primary);
-      border-color: var(--border-medium);
-    }
-  }
-
   // ── Scene slot ────────────────────────────────────────
 
   &__scene {
diff --git a/src/web-ui/src/app/scenes/SceneViewport.tsx b/src/web-ui/src/app/scenes/SceneViewport.tsx
index ae5dc737..bc9705ce 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.tsx
+++ b/src/web-ui/src/app/scenes/SceneViewport.tsx
@@ -9,7 +9,6 @@
  */
 
 import React, { Suspense, lazy } from 'react';
-import { MessageSquare, Terminal, GitBranch, Settings, FileCode2, UserCircle2, Boxes } from 'lucide-react';
 import type { SceneTabId } from '../components/SceneBar/types';
 import { useSceneManager } from '../hooks/useSceneManager';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
@@ -23,11 +22,11 @@ const FileViewerScene = lazy(() => import('./file-viewer/FileViewerScene'));
 const ProfileScene    = lazy(() => import('./profile/ProfileScene'));
 const AgentsScene       = lazy(() => import('./agents/AgentsScene'));
 const SkillsScene     = lazy(() => import('./skills/SkillsScene'));
-const ToolboxScene    = lazy(() => import('./toolbox/ToolboxScene'));
+const MiniAppGalleryScene = lazy(() => import('./miniapps/MiniAppGalleryScene'));
 const MyAgentScene    = lazy(() => import('./my-agent/MyAgentScene'));
 const ShellScene      = lazy(() => import('./shell/ShellScene'));
 const WelcomeScene    = lazy(() => import('./welcome/WelcomeScene'));
-const MiniAppScene    = lazy(() => import('./toolbox/MiniAppScene'));
+const MiniAppScene    = lazy(() => import('./miniapps/MiniAppScene'));
 
 interface SceneViewportProps {
   workspacePath?: string;
@@ -35,39 +34,14 @@ interface SceneViewportProps {
 }
 
 const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering = false }) => {
-  const { openTabs, activeTabId, openScene } = useSceneManager();
+  const { openTabs, activeTabId } = useSceneManager();
   const { t } = useI18n('common');
 
-  // All tabs closed — show quick-launch empty state
+  // All tabs closed — show empty state
   if (openTabs.length === 0) {
     return (
       <div className="bitfun-scene-viewport bitfun-scene-viewport--empty">
-        <div className="bitfun-scene-viewport__empty-state">
-          <p className="bitfun-scene-viewport__empty-hint">{t('welcomeScene.emptyHint')}</p>
-          <div className="bitfun-scene-viewport__empty-actions">
-            {[
-              { id: 'session'      as SceneTabId, Icon: MessageSquare, labelKey: 'scenes.aiAgent'       },
-              { id: 'shell'        as SceneTabId, Icon: Terminal,      labelKey: 'scenes.shell'         },
-              { id: 'git'          as SceneTabId, Icon: GitBranch,     labelKey: 'scenes.git'           },
-              { id: 'settings'     as SceneTabId, Icon: Settings,      labelKey: 'scenes.settings'      },
-              { id: 'file-viewer'  as SceneTabId, Icon: FileCode2,     labelKey: 'scenes.fileViewer'    },
-              { id: 'my-agent'     as SceneTabId, Icon: UserCircle2,   labelKey: 'scenes.myAgent'       },
-              { id: 'toolbox'      as SceneTabId, Icon: Boxes,         labelKey: 'scenes.toolbox'       },
-            ].map(({ id, Icon, labelKey }) => {
-              const label = t(labelKey);
-              return (
-                <button
-                  key={id}
-                  className="bitfun-scene-viewport__empty-btn"
-                  onClick={() => openScene(id)}
-                >
-                  <Icon size={16} />
-                  <span>{label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
+        <p className="bitfun-scene-viewport__empty-hint">{t('welcomeScene.emptyHint')}</p>
       </div>
     );
   }
@@ -112,8 +86,8 @@ function renderScene(id: SceneTabId, workspacePath?: string, isEntering?: boolea
       return <AgentsScene />;
     case 'skills':
       return <SkillsScene />;
-    case 'toolbox':
-      return <ToolboxScene />;
+    case 'miniapps':
+      return <MiniAppGalleryScene />;
     case 'my-agent':
       return <MyAgentScene workspacePath={workspacePath} />;
     case 'shell':
diff --git a/src/web-ui/src/app/scenes/toolbox/ToolboxScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
similarity index 78%
rename from src/web-ui/src/app/scenes/toolbox/ToolboxScene.scss
rename to src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
index b4882806..5e1c3e1b 100644
--- a/src/web-ui/src/app/scenes/toolbox/ToolboxScene.scss
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
@@ -1,4 +1,4 @@
-.toolbox-scene {
+.miniapp-gallery-scene {
   display: flex;
   flex-direction: column;
   flex: 1;
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
new file mode 100644
index 00000000..d172e132
--- /dev/null
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
@@ -0,0 +1,20 @@
+/**
+ * MiniAppGalleryScene — Mini App gallery scene.
+ * Opening an app opens a separate scene tab (miniapp:id).
+ */
+import React, { Suspense, lazy } from 'react';
+import './MiniAppGalleryScene.scss';
+
+const MiniAppGalleryView = lazy(() => import('./views/MiniAppGalleryView'));
+
+const MiniAppGalleryScene: React.FC = () => {
+  return (
+    <div className="miniapp-gallery-scene">
+      <Suspense fallback={null}>
+        <MiniAppGalleryView />
+      </Suspense>
+    </div>
+  );
+};
+
+export default MiniAppGalleryScene;
diff --git a/src/web-ui/src/app/scenes/toolbox/MiniAppScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
similarity index 100%
rename from src/web-ui/src/app/scenes/toolbox/MiniAppScene.scss
rename to src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
diff --git a/src/web-ui/src/app/scenes/toolbox/MiniAppScene.tsx b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.tsx
similarity index 91%
rename from src/web-ui/src/app/scenes/toolbox/MiniAppScene.tsx
rename to src/web-ui/src/app/scenes/miniapps/MiniAppScene.tsx
index fc6b8843..57650def 100644
--- a/src/web-ui/src/app/scenes/toolbox/MiniAppScene.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.tsx
@@ -4,7 +4,6 @@
  */
 import React, { useEffect, useState } from 'react';
 import { RefreshCw, Loader2, AlertTriangle } from 'lucide-react';
-import { useToolboxStore } from './toolboxStore';
 import { miniAppAPI } from '@/infrastructure/api/service-api/MiniAppAPI';
 import { api } from '@/infrastructure/api/service-api/ApiClient';
 import type { MiniApp } from '@/infrastructure/api/service-api/MiniAppAPI';
@@ -14,6 +13,7 @@ import { createLogger } from '@/shared/utils/logger';
 import { IconButton, Button } from '@/component-library';
 import { useSceneManager } from '@/app/hooks/useSceneManager';
 import type { SceneTabId } from '@/app/components/SceneBar/types';
+import { useMiniAppStore } from './miniAppStore';
 import './MiniAppScene.scss';
 
 const log = createLogger('MiniAppScene');
@@ -25,8 +25,8 @@ interface MiniAppSceneProps {
 }
 
 const MiniAppScene: React.FC<MiniAppSceneProps> = ({ appId }) => {
-  const openApp = useToolboxStore((s) => s.openApp);
-  const closeApp = useToolboxStore((s) => s.closeApp);
+  const openApp = useMiniAppStore((state) => state.openApp);
+  const closeApp = useMiniAppStore((state) => state.closeApp);
   const { themeType } = useTheme();
   const { workspacePath } = useCurrentWorkspace();
   const { closeScene } = useSceneManager();
@@ -60,7 +60,7 @@ const MiniAppScene: React.FC<MiniAppSceneProps> = ({ appId }) => {
 
   useEffect(() => {
     if (appId) {
-      load(appId);
+      void load(appId);
     }
   }, [appId, themeType, workspacePath]);
 
@@ -70,25 +70,25 @@ const MiniAppScene: React.FC<MiniAppSceneProps> = ({ appId }) => {
 
     const unlistenUpdated = api.listen<{ id?: string }>('miniapp-updated', (payload) => {
       if (shouldHandle(payload)) {
-        setKey((k) => k + 1);
+        setKey((value) => value + 1);
         void load(appId);
       }
     });
     const unlistenRecompiled = api.listen<{ id?: string }>('miniapp-recompiled', (payload) => {
       if (shouldHandle(payload)) {
-        setKey((k) => k + 1);
+        setKey((value) => value + 1);
         void load(appId);
       }
     });
     const unlistenRolledBack = api.listen<{ id?: string }>('miniapp-rolled-back', (payload) => {
       if (shouldHandle(payload)) {
-        setKey((k) => k + 1);
+        setKey((value) => value + 1);
         void load(appId);
       }
     });
     const unlistenRestarted = api.listen<{ id?: string }>('miniapp-worker-restarted', (payload) => {
       if (shouldHandle(payload)) {
-        setKey((k) => k + 1);
+        setKey((value) => value + 1);
         void load(appId);
       }
     });
@@ -109,8 +109,8 @@ const MiniAppScene: React.FC<MiniAppSceneProps> = ({ appId }) => {
 
   const handleReload = () => {
     if (appId) {
-      setKey((k) => k + 1);
-      load(appId);
+      setKey((value) => value + 1);
+      void load(appId);
     }
   };
 
@@ -121,7 +121,7 @@ const MiniAppScene: React.FC<MiniAppSceneProps> = ({ appId }) => {
           {app ? (
             <span className="miniapp-scene__title">{app.name}</span>
           ) : (
-            <span className="miniapp-scene__title miniapp-scene__title--loading">MiniApp</span>
+            <span className="miniapp-scene__title miniapp-scene__title--loading">Mini App</span>
           )}
         </div>
         <div className="miniapp-scene__header-actions">
@@ -151,7 +151,7 @@ const MiniAppScene: React.FC<MiniAppSceneProps> = ({ appId }) => {
           <div className="miniapp-scene__error">
             <AlertTriangle size={32} strokeWidth={1.5} />
             <p>加载失败：{error}</p>
-            <Button variant="secondary" size="small" onClick={() => load(appId)}>
+            <Button variant="secondary" size="small" onClick={() => void load(appId)}>
               重试
             </Button>
           </div>
diff --git a/src/web-ui/src/app/scenes/toolbox/components/MiniAppCard.scss b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss
similarity index 96%
rename from src/web-ui/src/app/scenes/toolbox/components/MiniAppCard.scss
rename to src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss
index 415e3626..d241dc32 100644
--- a/src/web-ui/src/app/scenes/toolbox/components/MiniAppCard.scss
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss
@@ -33,7 +33,6 @@
     outline-offset: 2px;
   }
 
-  // Running: green border, no background
   &--running {
     box-shadow: 0 0 0 1.5px rgba(52, 211, 153, 0.5);
 
@@ -44,8 +43,6 @@
     }
   }
 
-  // ── Left: icon block ──────────────────────────────────────
-
   &__icon-area {
     width: 64px;
     flex-shrink: 0;
diff --git a/src/web-ui/src/app/scenes/toolbox/components/MiniAppCard.tsx b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.tsx
similarity index 100%
rename from src/web-ui/src/app/scenes/toolbox/components/MiniAppCard.tsx
rename to src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.tsx
diff --git a/src/web-ui/src/app/scenes/toolbox/components/MiniAppRunner.tsx b/src/web-ui/src/app/scenes/miniapps/components/MiniAppRunner.tsx
similarity index 100%
rename from src/web-ui/src/app/scenes/toolbox/components/MiniAppRunner.tsx
rename to src/web-ui/src/app/scenes/miniapps/components/MiniAppRunner.tsx
diff --git a/src/web-ui/src/app/scenes/toolbox/hooks/useMiniAppBridge.ts b/src/web-ui/src/app/scenes/miniapps/hooks/useMiniAppBridge.ts
similarity index 100%
rename from src/web-ui/src/app/scenes/toolbox/hooks/useMiniAppBridge.ts
rename to src/web-ui/src/app/scenes/miniapps/hooks/useMiniAppBridge.ts
diff --git a/src/web-ui/src/app/scenes/miniapps/hooks/useMiniAppCatalogSync.ts b/src/web-ui/src/app/scenes/miniapps/hooks/useMiniAppCatalogSync.ts
new file mode 100644
index 00000000..bb9ff8d5
--- /dev/null
+++ b/src/web-ui/src/app/scenes/miniapps/hooks/useMiniAppCatalogSync.ts
@@ -0,0 +1,80 @@
+/**
+ * useMiniAppCatalogSync — keeps Mini App catalog and runtime state in sync.
+ */
+import { useCallback, useEffect } from 'react';
+import { api } from '@/infrastructure/api/service-api/ApiClient';
+import { miniAppAPI } from '@/infrastructure/api/service-api/MiniAppAPI';
+import { createLogger } from '@/shared/utils/logger';
+import { useMiniAppStore } from '../miniAppStore';
+
+const log = createLogger('useMiniAppCatalogSync');
+
+export function useMiniAppCatalogSync() {
+  const setApps = useMiniAppStore((state) => state.setApps);
+  const setLoading = useMiniAppStore((state) => state.setLoading);
+  const setRunningWorkerIds = useMiniAppStore((state) => state.setRunningWorkerIds);
+  const markWorkerRunning = useMiniAppStore((state) => state.markWorkerRunning);
+  const markWorkerStopped = useMiniAppStore((state) => state.markWorkerStopped);
+
+  const refreshApps = useCallback(async () => {
+    setLoading(true);
+    try {
+      const apps = await miniAppAPI.listMiniApps();
+      setApps(apps);
+    } catch (error) {
+      log.error('Failed to load miniapps', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [setApps, setLoading]);
+
+  const refreshRunningWorkers = useCallback(async () => {
+    try {
+      const running = await miniAppAPI.workerListRunning();
+      setRunningWorkerIds(running);
+    } catch (error) {
+      log.error('Failed to load running miniapp workers', error);
+    }
+  }, [setRunningWorkerIds]);
+
+  useEffect(() => {
+    void refreshApps();
+    void refreshRunningWorkers();
+
+    const unlistenCreated = api.listen('miniapp-created', () => {
+      void refreshApps();
+    });
+    const unlistenUpdated = api.listen('miniapp-updated', () => {
+      void refreshApps();
+    });
+    const unlistenDeleted = api.listen<{ id?: string }>('miniapp-deleted', (payload) => {
+      if (payload?.id) {
+        markWorkerStopped(payload.id);
+      }
+      void refreshApps();
+    });
+    const unlistenRestarted = api.listen<{ id?: string }>('miniapp-worker-restarted', (payload) => {
+      if (payload?.id) {
+        markWorkerRunning(payload.id);
+      }
+    });
+    const unlistenStopped = api.listen<{ id?: string }>('miniapp-worker-stopped', (payload) => {
+      if (payload?.id) {
+        markWorkerStopped(payload.id);
+      }
+    });
+
+    return () => {
+      unlistenCreated();
+      unlistenUpdated();
+      unlistenDeleted();
+      unlistenRestarted();
+      unlistenStopped();
+    };
+  }, [markWorkerRunning, markWorkerStopped, refreshApps, refreshRunningWorkers]);
+
+  return {
+    refreshApps,
+    refreshRunningWorkers,
+  };
+}
diff --git a/src/web-ui/src/app/scenes/toolbox/toolboxStore.ts b/src/web-ui/src/app/scenes/miniapps/miniAppStore.ts
similarity index 68%
rename from src/web-ui/src/app/scenes/toolbox/toolboxStore.ts
rename to src/web-ui/src/app/scenes/miniapps/miniAppStore.ts
index 69aaf993..f8fa685a 100644
--- a/src/web-ui/src/app/scenes/toolbox/toolboxStore.ts
+++ b/src/web-ui/src/app/scenes/miniapps/miniAppStore.ts
@@ -1,10 +1,10 @@
 /**
- * Toolbox scene store — apps list + lifecycle (launched app IDs).
+ * Mini App scene store — app catalog + lifecycle state.
  */
 import { create } from 'zustand';
 import type { MiniAppMeta } from '@/infrastructure/api/service-api/MiniAppAPI';
 
-interface ToolboxState {
+interface MiniAppState {
   apps: MiniAppMeta[];
   loading: boolean;
   /** App IDs whose scenes are currently open in the viewport. */
@@ -21,7 +21,7 @@ interface ToolboxState {
   markWorkerStopped: (id: string) => void;
 }
 
-export const useToolboxStore = create<ToolboxState>((set) => ({
+export const useMiniAppStore = create<MiniAppState>((set) => ({
   apps: [],
   loading: false,
   openedAppIds: [],
@@ -39,20 +39,20 @@ export const useToolboxStore = create<ToolboxState>((set) => ({
   setLoading: (loading) => set({ loading }),
 
   openApp: (id) =>
-    set((s) =>
-      s.openedAppIds.includes(id) ? s : { openedAppIds: [...s.openedAppIds, id] }
+    set((state) =>
+      state.openedAppIds.includes(id) ? state : { openedAppIds: [...state.openedAppIds, id] }
     ),
   closeApp: (id) =>
-    set((s) => ({
-      openedAppIds: s.openedAppIds.filter((x) => x !== id),
+    set((state) => ({
+      openedAppIds: state.openedAppIds.filter((value) => value !== id),
     })),
   setRunningWorkerIds: (ids) => set({ runningWorkerIds: Array.from(new Set(ids)) }),
   markWorkerRunning: (id) =>
-    set((s) =>
-      s.runningWorkerIds.includes(id) ? s : { runningWorkerIds: [...s.runningWorkerIds, id] }
+    set((state) =>
+      state.runningWorkerIds.includes(id) ? state : { runningWorkerIds: [...state.runningWorkerIds, id] }
     ),
   markWorkerStopped: (id) =>
-    set((s) => ({
-      runningWorkerIds: s.runningWorkerIds.filter((x) => x !== id),
+    set((state) => ({
+      runningWorkerIds: state.runningWorkerIds.filter((value) => value !== id),
     })),
 }));
diff --git a/src/web-ui/src/app/scenes/toolbox/utils/buildMiniAppThemeVars.ts b/src/web-ui/src/app/scenes/miniapps/utils/buildMiniAppThemeVars.ts
similarity index 100%
rename from src/web-ui/src/app/scenes/toolbox/utils/buildMiniAppThemeVars.ts
rename to src/web-ui/src/app/scenes/miniapps/utils/buildMiniAppThemeVars.ts
diff --git a/src/web-ui/src/app/scenes/toolbox/utils/miniAppIcons.tsx b/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
similarity index 100%
rename from src/web-ui/src/app/scenes/toolbox/utils/miniAppIcons.tsx
rename to src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
diff --git a/src/web-ui/src/app/scenes/toolbox/views/GalleryView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.scss
similarity index 94%
rename from src/web-ui/src/app/scenes/toolbox/views/GalleryView.scss
rename to src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.scss
index 77f49b9f..a2dbf7d7 100644
--- a/src/web-ui/src/app/scenes/toolbox/views/GalleryView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.scss
@@ -1,6 +1,6 @@
 @use '../../../../component-library/styles/tokens' as *;
 
-.toolbox-gallery {
+.miniapp-gallery {
   .gallery-page-header__actions {
     > :first-child {
       width: 180px;
@@ -27,7 +27,7 @@
 }
 
 @media (max-width: 720px) {
-  .toolbox-gallery {
+  .miniapp-gallery {
     .gallery-page-header__actions {
       > :first-child {
         width: 100%;
diff --git a/src/web-ui/src/app/scenes/toolbox/views/GalleryView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
similarity index 83%
rename from src/web-ui/src/app/scenes/toolbox/views/GalleryView.tsx
rename to src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
index c5bc01b9..1fcefaab 100644
--- a/src/web-ui/src/app/scenes/toolbox/views/GalleryView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
@@ -11,7 +11,6 @@ import {
   Trash2,
 } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-dialog';
-import { useToolboxStore } from '../toolboxStore';
 import { useSceneManager } from '@/app/hooks/useSceneManager';
 import MiniAppCard from '../components/MiniAppCard';
 import type { MiniAppMeta } from '@/infrastructure/api/service-api/MiniAppAPI';
@@ -30,17 +29,18 @@ import {
 import type { SceneTabId } from '@/app/components/SceneBar/types';
 import { getMiniAppIconGradient, renderMiniAppIcon } from '../utils/miniAppIcons';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
-import './GalleryView.scss';
+import { useMiniAppStore } from '../miniAppStore';
+import './MiniAppGalleryView.scss';
 
-const log = createLogger('GalleryView');
+const log = createLogger('MiniAppGalleryView');
 
-const GalleryView: React.FC = () => {
-  const apps = useToolboxStore((s) => s.apps);
-  const loading = useToolboxStore((s) => s.loading);
-  const runningWorkerIds = useToolboxStore((s) => s.runningWorkerIds);
-  const setApps = useToolboxStore((s) => s.setApps);
-  const setLoading = useToolboxStore((s) => s.setLoading);
-  const markWorkerStopped = useToolboxStore((s) => s.markWorkerStopped);
+const MiniAppGalleryView: React.FC = () => {
+  const apps = useMiniAppStore((state) => state.apps);
+  const loading = useMiniAppStore((state) => state.loading);
+  const runningWorkerIds = useMiniAppStore((state) => state.runningWorkerIds);
+  const setApps = useMiniAppStore((state) => state.setApps);
+  const setLoading = useMiniAppStore((state) => state.setLoading);
+  const markWorkerStopped = useMiniAppStore((state) => state.markWorkerStopped);
   const { workspacePath } = useCurrentWorkspace();
   const { openScene, activateScene, closeScene, openTabs } = useSceneManager();
 
@@ -61,25 +61,26 @@ const GalleryView: React.FC = () => {
   );
 
   const categories = useMemo(() => {
-    const cats = Array.from(new Set(apps.map((a) => a.category).filter(Boolean)));
-    return ['all', ...cats];
+    const values = Array.from(new Set(apps.map((app) => app.category).filter(Boolean)));
+    return ['all', ...values];
   }, [apps]);
 
   const filtered = useMemo(() => {
-    return apps.filter((a) => {
+    return apps.filter((app) => {
       const keyword = search.toLowerCase();
       const matchSearch =
         !search ||
-        a.name.toLowerCase().includes(keyword) ||
-        a.description.toLowerCase().includes(keyword) ||
-        a.tags.some((t) => t.toLowerCase().includes(keyword));
-      const matchCategory = categoryFilter === 'all' || a.category === categoryFilter;
+        app.name.toLowerCase().includes(keyword) ||
+        app.description.toLowerCase().includes(keyword) ||
+        app.tags.some((tag) => tag.toLowerCase().includes(keyword));
+      const matchCategory = categoryFilter === 'all' || app.category === categoryFilter;
       return matchSearch && matchCategory;
     });
   }, [apps, search, categoryFilter]);
 
   const handleOpenApp = useCallback(
     (appId: string) => {
+      setSelectedApp(null);
       const tabId: SceneTabId = `miniapp:${appId}`;
       if (openTabIds.has(tabId)) {
         activateScene(tabId);
@@ -117,7 +118,10 @@ const GalleryView: React.FC = () => {
     setPendingDeleteId(null);
     try {
       await miniAppAPI.deleteMiniApp(appId);
-      setApps(apps.filter((a) => a.id !== appId));
+      if (selectedApp?.id === appId) {
+        setSelectedApp(null);
+      }
+      setApps(apps.filter((app) => app.id !== appId));
       markWorkerStopped(appId);
       const tabId: SceneTabId = `miniapp:${appId}`;
       if (openTabIds.has(tabId)) {
@@ -143,7 +147,7 @@ const GalleryView: React.FC = () => {
       const selected = await open({
         directory: true,
         multiple: false,
-                title: '选择小应用目录（需包含 meta.json 与 source/）',
+        title: '选择小应用目录（需包含 meta.json 与 source/）',
       });
       const path = Array.isArray(selected) ? selected[0] : selected;
       if (!path) return;
@@ -197,7 +201,7 @@ const GalleryView: React.FC = () => {
   };
 
   return (
-    <GalleryLayout className="toolbox-gallery">
+    <GalleryLayout className="miniapp-gallery">
       <GalleryPageHeader
         title="小应用"
         subtitle="即时生成的小应用，打开就能用，也能继续迭代。"
@@ -262,19 +266,19 @@ const GalleryView: React.FC = () => {
             <>
               {categories.length > 1 ? (
                 <div className="gallery-chip-row">
-                  {categories.map((cat) => (
+                  {categories.map((category) => (
                     <button
-                      key={cat}
+                      key={category}
                       type="button"
                       className={[
                         'gallery-cat-chip',
-                        categoryFilter === cat && 'gallery-cat-chip--active',
+                        categoryFilter === category && 'gallery-cat-chip--active',
                       ]
                         .filter(Boolean)
                         .join(' ')}
-                      onClick={() => setCategoryFilter(cat)}
+                      onClick={() => setCategoryFilter(category)}
                     >
-                      {cat === 'all' ? '全部' : cat}
+                      {category === 'all' ? '全部' : category}
                     </button>
                   ))}
                 </div>
@@ -316,9 +320,9 @@ const GalleryView: React.FC = () => {
         ) : null}
       >
         {selectedApp?.tags.length ? (
-          <div className="toolbox-gallery__detail-tags">
+          <div className="miniapp-gallery__detail-tags">
             {selectedApp.tags.map((tag) => (
-              <span key={tag} className="toolbox-gallery__detail-tag">
+              <span key={tag} className="miniapp-gallery__detail-tag">
                 <Tag size={11} />
                 {tag}
               </span>
@@ -331,7 +335,7 @@ const GalleryView: React.FC = () => {
         isOpen={pendingDeleteId !== null}
         onClose={() => setPendingDeleteId(null)}
         onConfirm={handleDeleteConfirm}
-        title={`删除 "${apps.find((a) => a.id === pendingDeleteId)?.name ?? ''}"？`}
+        title={`删除 "${apps.find((app) => app.id === pendingDeleteId)?.name ?? ''}"？`}
         message="此操作不可撤销，应用及其所有数据将被永久删除。"
         type="warning"
         confirmDanger
@@ -342,4 +346,4 @@ const GalleryView: React.FC = () => {
   );
 };
 
-export default GalleryView;
+export default MiniAppGalleryView;
diff --git a/src/web-ui/src/app/scenes/registry.ts b/src/web-ui/src/app/scenes/registry.ts
index 5c9d7db7..af5d7337 100644
--- a/src/web-ui/src/app/scenes/registry.ts
+++ b/src/web-ui/src/app/scenes/registry.ts
@@ -39,6 +39,8 @@ export const SCENE_TAB_REGISTRY: SceneTabDef[] = [
     labelKey: 'scenes.aiAgent',
     Icon: MessageSquare,
     pinned: true,
+    fixed: true,
+    closable: false,
     singleton: true,
     defaultOpen: false,
   },
@@ -109,9 +111,9 @@ export const SCENE_TAB_REGISTRY: SceneTabDef[] = [
     defaultOpen: false,
   },
   {
-    id: 'toolbox' as SceneTabId,
+    id: 'miniapps' as SceneTabId,
     label: 'Mini App',
-    labelKey: 'scenes.toolbox',
+    labelKey: 'scenes.miniApps',
     Icon: Boxes,
     pinned: false,
     singleton: true,
diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.scss b/src/web-ui/src/app/scenes/shell/ShellNav.scss
index a3348753..b45594c2 100644
--- a/src/web-ui/src/app/scenes/shell/ShellNav.scss
+++ b/src/web-ui/src/app/scenes/shell/ShellNav.scss
@@ -22,7 +22,7 @@
     flex: 1;
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: center;
     min-width: 0;
     gap: 6px;
   }
@@ -35,22 +35,110 @@
     flex-shrink: 0;
   }
 
-  &__workspace-badge {
+  &__workspace-switcher {
+    position: relative;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &__workspace-trigger {
     display: inline-flex;
     align-items: center;
-    max-width: 100px;
-    padding: 1px 6px;
-    border-radius: 20px;
-    border: 1px solid var(--border-subtle);
-    background: var(--element-bg-soft);
-    font-size: $font-size-xs;
-    font-weight: 400;
+    gap: 4px;
+    min-width: 0;
+    max-width: 100%;
+    height: 24px;
+    padding: 0 4px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
     color: var(--color-text-tertiary);
-    white-space: nowrap;
+    cursor: default;
+    transition:
+      color $motion-fast $easing-standard,
+      background $motion-fast $easing-standard;
+
+    &.is-switchable {
+      cursor: pointer;
+    }
+
+    &.is-switchable:hover,
+    &.is-active {
+      color: var(--color-text-primary);
+      background: var(--element-bg-soft);
+    }
+  }
+
+  &__workspace-separator {
+    flex-shrink: 0;
+    color: var(--color-text-muted);
+  }
+
+  &__workspace-name {
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: $font-size-xs;
+  }
+
+  &__workspace-trigger-icon {
+    flex-shrink: 0;
+    opacity: 0.7;
+  }
+
+  &__workspace-menu {
+    position: fixed;
+    min-width: 220px;
+    max-width: min(320px, calc(100vw - 32px));
+    padding: 6px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 10px;
+    background: var(--panel-bg, var(--color-bg-elevated, #111));
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
+    z-index: 8;
+  }
+
+  &__workspace-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 30px;
+    padding: 0 8px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    text-align: left;
+    font-size: $font-size-xs;
+    transition:
+      color $motion-fast $easing-standard,
+      background $motion-fast $easing-standard;
+
+    &:hover,
+    &.is-active {
+      color: var(--color-text-primary);
+      background: var(--element-bg-soft);
+    }
+  }
+
+  &__workspace-menu-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    color: var(--color-primary);
+  }
+
+  &__workspace-menu-text {
     min-width: 0;
-    line-height: 1.5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__header-actions {
@@ -61,9 +149,10 @@
   &__menu-trigger {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
     height: 26px;
-    padding: 0 8px;
+    width: 26px;
+    justify-content: center;
+    padding: 0;
     border: 1px solid transparent;
     border-radius: $size-radius-base;
     background: transparent;
@@ -78,7 +167,7 @@
     &.is-active {
       color: var(--color-text-primary);
       background: var(--element-bg-soft);
-      border-color: color-mix(in srgb, var(--color-primary) 28%, var(--border-subtle));
+      border-color: transparent;
     }
   }
 
@@ -389,6 +478,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .bitfun-shell-nav {
+    &__workspace-trigger,
+    &__workspace-menu-item,
     &__menu-trigger,
     &__dropdown-item,
     &__view-toggle-btn,
diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.tsx b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
index 6ddb08b7..88ad66b9 100644
--- a/src/web-ui/src/app/scenes/shell/ShellNav.tsx
+++ b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
+  Check,
   ChevronDown,
   ChevronRight,
   GitBranch,
@@ -22,7 +24,8 @@ import type { MenuItem } from '@/shared/context-menu-system/types/menu.types';
 import { useSceneStore } from '@/app/stores/sceneStore';
 import { useTerminalSceneStore } from '@/app/stores/terminalSceneStore';
 import type { GitWorktreeInfo } from '@/infrastructure/api/service-api/GitAPI';
-import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
+import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
+import { WorkspaceKind } from '@/shared/types';
 import { useShellStore } from './shellStore';
 import { useShellEntries, useWorktrees, type ShellEntry } from './hooks';
 import './ShellNav.scss';
@@ -33,7 +36,7 @@ const ShellNav: React.FC = () => {
   // #endregion
   const { t } = useI18n('common');
   const { t: tTerminal } = useI18n('panels/terminal');
-  const { workspaceName } = useCurrentWorkspace();
+  const { activeWorkspace, openedWorkspacesList, workspaceName, setActiveWorkspace } = useWorkspaceContext();
   const navView = useShellStore((s) => s.navView);
   const setNavView = useShellStore((s) => s.setNavView);
   const expandedWorktrees = useShellStore((s) => s.expandedWorktrees);
@@ -73,8 +76,12 @@ const ShellNav: React.FC = () => {
   } = useWorktrees();
 
   const [menuOpen, setMenuOpen] = useState(false);
+  const [workspaceMenuOpen, setWorkspaceMenuOpen] = useState(false);
   const [branchModalOpen, setBranchModalOpen] = useState(false);
+  const [workspaceMenuPosition, setWorkspaceMenuPosition] = useState<{ top: number; left: number } | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
+  const workspaceMenuRef = useRef<HTMLDivElement | null>(null);
+  const workspaceTriggerRef = useRef<HTMLButtonElement | null>(null);
 
   const visibleMainEntries = navView === 'hub' ? hubMainEntries : mainEntries;
   const visibleWorktrees = useMemo(
@@ -88,21 +95,28 @@ const ShellNav: React.FC = () => {
   const hasVisibleContent = visibleMainEntries.length > 0 || visibleWorktrees.length > 0;
 
   useEffect(() => {
-    if (!menuOpen) {
+    if (!menuOpen && !workspaceMenuOpen) {
       return;
     }
 
     const handleMouseDown = (event: MouseEvent) => {
       const target = event.target as Node | null;
-      if (target && menuRef.current?.contains(target)) {
+      if (
+        target &&
+        (menuRef.current?.contains(target) ||
+          workspaceMenuRef.current?.contains(target) ||
+          workspaceTriggerRef.current?.contains(target))
+      ) {
         return;
       }
       setMenuOpen(false);
+      setWorkspaceMenuOpen(false);
     };
 
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setMenuOpen(false);
+        setWorkspaceMenuOpen(false);
       }
     };
 
@@ -112,7 +126,56 @@ const ShellNav: React.FC = () => {
       document.removeEventListener('mousedown', handleMouseDown);
       document.removeEventListener('keydown', handleEscape);
     };
-  }, [menuOpen]);
+  }, [menuOpen, workspaceMenuOpen]);
+
+  const hasMultipleWorkspaces = openedWorkspacesList.length > 1;
+
+  useEffect(() => {
+    if (!hasMultipleWorkspaces && workspaceMenuOpen) {
+      setWorkspaceMenuOpen(false);
+    }
+  }, [hasMultipleWorkspaces, workspaceMenuOpen]);
+
+  const updateWorkspaceMenuPosition = useCallback(() => {
+    const trigger = workspaceTriggerRef.current;
+    if (!trigger) {
+      return;
+    }
+
+    const rect = trigger.getBoundingClientRect();
+    const viewportPadding = 8;
+    const estimatedWidth = 220;
+    const maxLeft = window.innerWidth - estimatedWidth - viewportPadding;
+
+    setWorkspaceMenuPosition({
+      top: Math.max(viewportPadding, rect.bottom + 6),
+      left: Math.max(viewportPadding, Math.min(rect.left, maxLeft)),
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!workspaceMenuOpen) {
+      return;
+    }
+
+    updateWorkspaceMenuPosition();
+
+    const handleViewportChange = () => updateWorkspaceMenuPosition();
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+    return () => {
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+    };
+  }, [updateWorkspaceMenuPosition, workspaceMenuOpen]);
+
+  const getWorkspaceDisplayName = useCallback(
+    (workspace: (typeof openedWorkspacesList)[number]) =>
+      workspace.workspaceKind === WorkspaceKind.Assistant
+        ? workspace.identity?.name?.trim() || workspace.name
+        : workspace.name,
+    [],
+  );
 
   const handleRefresh = useCallback(async () => {
     await Promise.all([refreshEntries(), refreshWorktrees()]);
@@ -128,6 +191,28 @@ const ShellNav: React.FC = () => {
     await createHubTerminal();
   }, [createHubTerminal]);
 
+  const handleToggleCreateMenu = useCallback(() => {
+    setWorkspaceMenuOpen(false);
+    setMenuOpen((prev) => !prev);
+  }, []);
+
+  const handleToggleWorkspaceMenu = useCallback(() => {
+    if (!hasMultipleWorkspaces) {
+      return;
+    }
+
+    setMenuOpen(false);
+    setWorkspaceMenuOpen((prev) => !prev);
+  }, [hasMultipleWorkspaces]);
+
+  const handleSelectWorkspace = useCallback(async (workspaceId: string) => {
+    setWorkspaceMenuOpen(false);
+    if (workspaceId === activeWorkspace?.id) {
+      return;
+    }
+    await setActiveWorkspace(workspaceId);
+  }, [activeWorkspace?.id, setActiveWorkspace]);
+
   const handleOpenBranchModal = useCallback(() => {
     setMenuOpen(false);
     setBranchModalOpen(true);
@@ -304,22 +389,73 @@ const ShellNav: React.FC = () => {
         <div className="bitfun-shell-nav__title-group">
           <span className="bitfun-shell-nav__title">{t('nav.shell.title')}</span>
           {workspaceName ? (
-            <span className="bitfun-shell-nav__workspace-badge" title={workspaceName}>
-              {workspaceName}
-            </span>
+            <div className="bitfun-shell-nav__workspace-switcher">
+              <button
+                ref={workspaceTriggerRef}
+                type="button"
+                className={`bitfun-shell-nav__workspace-trigger${workspaceMenuOpen ? ' is-active' : ''}${hasMultipleWorkspaces ? ' is-switchable' : ''}`}
+                onClick={handleToggleWorkspaceMenu}
+                aria-haspopup={hasMultipleWorkspaces ? 'menu' : undefined}
+                aria-expanded={hasMultipleWorkspaces ? workspaceMenuOpen : undefined}
+                title={hasMultipleWorkspaces ? t('header.switchWorkspace') : workspaceName}
+              >
+                <span className="bitfun-shell-nav__workspace-separator">/</span>
+                <span className="bitfun-shell-nav__workspace-name">{workspaceName}</span>
+                {hasMultipleWorkspaces ? (
+                  <ChevronDown size={12} className="bitfun-shell-nav__workspace-trigger-icon" />
+                ) : null}
+              </button>
+
+              {workspaceMenuOpen && hasMultipleWorkspaces ? (
+                workspaceMenuPosition ? createPortal(
+                  <div
+                    ref={workspaceMenuRef}
+                    className="bitfun-shell-nav__workspace-menu"
+                    role="menu"
+                    aria-label={t('header.switchWorkspace')}
+                    style={{
+                      top: `${workspaceMenuPosition.top}px`,
+                      left: `${workspaceMenuPosition.left}px`,
+                    }}
+                  >
+                    {openedWorkspacesList.map((workspace) => {
+                      const isActive = workspace.id === activeWorkspace?.id;
+                      const label = getWorkspaceDisplayName(workspace);
+
+                      return (
+                        <button
+                          key={workspace.id}
+                          type="button"
+                          role="menuitemradio"
+                          aria-checked={isActive}
+                          className={`bitfun-shell-nav__workspace-menu-item${isActive ? ' is-active' : ''}`}
+                          onClick={() => { void handleSelectWorkspace(workspace.id); }}
+                          title={workspace.rootPath}
+                        >
+                          <span className="bitfun-shell-nav__workspace-menu-check" aria-hidden="true">
+                            {isActive ? <Check size={12} /> : null}
+                          </span>
+                          <span className="bitfun-shell-nav__workspace-menu-text">{label}</span>
+                        </button>
+                      );
+                    })}
+                  </div>,
+                  document.body,
+                ) : null
+              ) : null}
+            </div>
           ) : null}
         </div>
         <div className="bitfun-shell-nav__header-actions" ref={menuRef}>
           <button
             type="button"
             className={`bitfun-shell-nav__menu-trigger${menuOpen ? ' is-active' : ''}`}
-            onClick={() => setMenuOpen((prev) => !prev)}
+            onClick={handleToggleCreateMenu}
             aria-haspopup="menu"
             aria-expanded={menuOpen}
             title={t('actions.new')}
           >
             <Plus size={14} />
-            <ChevronDown size={12} />
           </button>
 
           {menuOpen ? (
diff --git a/src/web-ui/src/app/scenes/shell/hooks/useShellEntries.ts b/src/web-ui/src/app/scenes/shell/hooks/useShellEntries.ts
index 2c67a6fd..bbd2fd16 100644
--- a/src/web-ui/src/app/scenes/shell/hooks/useShellEntries.ts
+++ b/src/web-ui/src/app/scenes/shell/hooks/useShellEntries.ts
@@ -2,13 +2,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getTerminalService } from '@/tools/terminal';
 import type { TerminalService } from '@/tools/terminal';
 import type { SessionResponse, TerminalEvent } from '@/tools/terminal/types/session';
-import { useTerminalSceneStore } from '@/app/stores/terminalSceneStore';
-import { useSceneStore } from '@/app/stores/sceneStore';
-import type { SceneTabId } from '@/app/components/SceneBar/types';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import type { TerminalConfig } from '@/infrastructure/config/types';
 import { createLogger } from '@/shared/utils/logger';
+import { openShellSessionTarget } from '@/shared/services/openShellSessionTarget';
 
 const log = createLogger('useShellEntries');
 
@@ -32,6 +30,7 @@ export interface ShellEntry {
   isRunning: boolean;
   isHub: boolean;
   worktreePath?: string;
+  cwd?: string;
   startupCommand?: string;
 }
 
@@ -113,8 +112,12 @@ function dispatchTerminalRenamed(sessionId: string, newName: string) {
   window.dispatchEvent(new CustomEvent('terminal-session-renamed', { detail: { sessionId, newName } }));
 }
 
+function isSessionRunning(session: SessionResponse): boolean {
+  const normalizedStatus = String(session.status).toLowerCase();
+  return !['exited', 'stopped', 'error', 'terminating'].includes(normalizedStatus);
+}
+
 export function useShellEntries(): UseShellEntriesReturn {
-  const setActiveSession = useTerminalSceneStore((s) => s.setActiveSession);
   const { workspacePath } = useCurrentWorkspace();
 
   const [sessions, setSessions] = useState<SessionResponse[]>([]);
@@ -124,7 +127,14 @@ export function useShellEntries(): UseShellEntriesReturn {
 
   const serviceRef = useRef<TerminalService | null>(null);
 
-  const runningIds = useMemo(() => new Set(sessions.map((session) => session.id)), [sessions]);
+  const sessionMap = useMemo(
+    () => new Map(sessions.map((session) => [session.id, session])),
+    [sessions],
+  );
+  const runningIds = useMemo(
+    () => new Set(sessions.filter(isSessionRunning).map((session) => session.id)),
+    [sessions],
+  );
 
   const configuredIds = useMemo(() => {
     const ids = new Set<string>();
@@ -189,6 +199,7 @@ export function useShellEntries(): UseShellEntriesReturn {
       name: terminal.name,
       isRunning: runningIds.has(terminal.sessionId),
       isHub: true,
+      cwd: sessionMap.get(terminal.sessionId)?.cwd,
       startupCommand: terminal.startupCommand,
     }));
 
@@ -197,12 +208,13 @@ export function useShellEntries(): UseShellEntriesReturn {
       .map((session) => ({
         sessionId: session.id,
         name: session.name,
-        isRunning: true,
+        isRunning: isSessionRunning(session),
         isHub: false,
+        cwd: session.cwd,
       }));
 
     return [...hubEntries, ...adHocEntries];
-  }, [configuredIds, hubConfig.terminals, runningIds, sessions]);
+  }, [configuredIds, hubConfig.terminals, runningIds, sessionMap, sessions]);
 
   const hubMainEntries = useMemo(
     () => mainEntries.filter((entry) => entry.isHub),
@@ -224,12 +236,13 @@ export function useShellEntries(): UseShellEntriesReturn {
         isRunning: runningIds.has(terminal.sessionId),
         isHub: true,
         worktreePath,
+        cwd: sessionMap.get(terminal.sessionId)?.cwd,
         startupCommand: terminal.startupCommand,
       }));
     });
 
     return result;
-  }, [hubConfig.worktrees, runningIds]);
+  }, [hubConfig.worktrees, runningIds, sessionMap]);
 
   const updateHubConfig = useCallback((updater: (prev: HubConfig) => HubConfig) => {
     if (!workspacePath) {
@@ -256,35 +269,31 @@ export function useShellEntries(): UseShellEntriesReturn {
     }
   }, [refreshSessions, workspacePath]);
 
-  const openInShellScene = useCallback((sessionId: string) => {
-    const { openScene, openTabs, activeTabId } = useSceneStore.getState();
-    // #region agent log
-    console.error('[DBG-366fda][H-C] openInShellScene called', {sessionId, activeTabId, openTabIds: openTabs.map(t=>t.id)});
-    // #endregion
-    openScene('shell' as SceneTabId);
-    const afterState = useSceneStore.getState();
-    // #region agent log
-    console.error('[DBG-366fda][H-C] after openScene(shell)', {newActiveTabId: afterState.activeTabId, openTabIds: afterState.openTabs.map(t=>t.id)});
-    // #endregion
-    setActiveSession(sessionId);
-  }, [setActiveSession]);
+  const openShellSession = useCallback((sessionId: string, sessionName: string) => {
+    openShellSessionTarget({ sessionId, sessionName });
+  }, []);
 
 
   const startTerminal = useCallback(async (entry: ShellEntry): Promise<boolean> => {
     const service = serviceRef.current;
+    const existingSession = sessionMap.get(entry.sessionId);
     // #region agent log
-    console.error('[DBG-366fda][H-B] startTerminal called', {entrySessionId:entry.sessionId,entryName:entry.name,isHub:entry.isHub,isRunning:entry.isRunning,startupCommand:entry.startupCommand,workspacePath,hasService:!!service});
+    console.error('[DBG-366fda][H-B] startTerminal called', {entrySessionId:entry.sessionId,entryName:entry.name,isHub:entry.isHub,isRunning:entry.isRunning,startupCommand:entry.startupCommand,workspacePath,hasService:!!service,existingStatus:existingSession?.status});
     // #endregion
     if (!service) {
       return false;
     }
 
     try {
+      if (existingSession && !isSessionRunning(existingSession)) {
+        await service.closeSession(entry.sessionId);
+      }
+
       const shellType = await getDefaultShellType();
 
       const createdSession = await service.createSession({
         sessionId: entry.sessionId,
-        workingDirectory: entry.worktreePath ?? workspacePath,
+        workingDirectory: entry.worktreePath ?? entry.cwd ?? workspacePath,
         name: entry.name,
         shellType,
       });
@@ -310,13 +319,13 @@ export function useShellEntries(): UseShellEntriesReturn {
       log.error('Failed to start terminal', error);
       return false;
     }
-  }, [refreshSessions, workspacePath]);
+  }, [refreshSessions, sessionMap, workspacePath]);
 
   const openTerminal = useCallback(async (entry: ShellEntry) => {
     // #region agent log
     console.error('[DBG-366fda][H-A] openTerminal called', {entrySessionId:entry.sessionId,isHub:entry.isHub,isRunning:entry.isRunning,startupCommand:entry.startupCommand});
     // #endregion
-    if (!entry.isRunning && entry.isHub) {
+    if (!entry.isRunning) {
       const started = await startTerminal(entry);
       // #region agent log
       console.error('[DBG-366fda][H-A] startTerminal result', {started,entrySessionId:entry.sessionId});
@@ -326,8 +335,8 @@ export function useShellEntries(): UseShellEntriesReturn {
       }
     }
 
-    openInShellScene(entry.sessionId);
-  }, [openInShellScene, startTerminal]);
+    openShellSession(entry.sessionId, entry.name);
+  }, [openShellSession, startTerminal]);
 
   const createAdHocTerminal = useCallback(async () => {
     const service = serviceRef.current;
@@ -344,12 +353,12 @@ export function useShellEntries(): UseShellEntriesReturn {
         shellType,
       });
 
-      setSessions((prev) => [...prev, session]);
-      openInShellScene(session.id);
+      await refreshSessions();
+      openShellSession(session.id, session.name);
     } catch (error) {
       log.error('Failed to create ad-hoc terminal', error);
     }
-  }, [adHocEntries.length, openInShellScene, workspacePath]);
+  }, [adHocEntries.length, openShellSession, refreshSessions, workspacePath]);
 
   const createHubTerminal = useCallback(async (worktreePath?: string) => {
     const service = serviceRef.current;
@@ -362,24 +371,6 @@ export function useShellEntries(): UseShellEntriesReturn {
       name: `Terminal ${Date.now() % 1000}`,
     };
 
-    updateHubConfig((prev) => {
-      if (worktreePath) {
-        const terminals = prev.worktrees[worktreePath] || [];
-        return {
-          ...prev,
-          worktrees: {
-            ...prev.worktrees,
-            [worktreePath]: [...terminals, newEntry],
-          },
-        };
-      }
-
-      return {
-        ...prev,
-        terminals: [...prev.terminals, newEntry],
-      };
-    });
-
     try {
       const shellType = await getDefaultShellType();
       await service.createSession({
@@ -389,12 +380,30 @@ export function useShellEntries(): UseShellEntriesReturn {
         shellType,
       });
 
+      updateHubConfig((prev) => {
+        if (worktreePath) {
+          const terminals = prev.worktrees[worktreePath] || [];
+          return {
+            ...prev,
+            worktrees: {
+              ...prev.worktrees,
+              [worktreePath]: [...terminals, newEntry],
+            },
+          };
+        }
+
+        return {
+          ...prev,
+          terminals: [...prev.terminals, newEntry],
+        };
+      });
+
       await refreshSessions();
-      openInShellScene(newEntry.sessionId);
+      openShellSession(newEntry.sessionId, newEntry.name);
     } catch (error) {
       log.error('Failed to create hub terminal', error);
     }
-  }, [openInShellScene, refreshSessions, updateHubConfig, workspacePath]);
+  }, [openShellSession, refreshSessions, updateHubConfig, workspacePath]);
 
   const promoteToHub = useCallback((entry: ShellEntry) => {
     if (!workspacePath || entry.isHub) {
diff --git a/src/web-ui/src/app/scenes/toolbox/ToolboxScene.tsx b/src/web-ui/src/app/scenes/toolbox/ToolboxScene.tsx
deleted file mode 100644
index d8ea4e6f..00000000
--- a/src/web-ui/src/app/scenes/toolbox/ToolboxScene.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * ToolboxScene — Toolbox tab showing the MiniApp gallery.
- * Opening an app opens a separate scene tab (miniapp:id).
- */
-import React, { Suspense, lazy, useEffect } from 'react';
-import { useMiniAppList } from './hooks/useMiniAppList';
-import { useToolboxStore } from './toolboxStore';
-import { miniAppAPI } from '@/infrastructure/api/service-api/MiniAppAPI';
-import { api } from '@/infrastructure/api/service-api/ApiClient';
-import './ToolboxScene.scss';
-
-const GalleryView = lazy(() => import('./views/GalleryView'));
-
-const ToolboxScene: React.FC = () => {
-  useMiniAppList();
-  const setRunningWorkerIds = useToolboxStore((s) => s.setRunningWorkerIds);
-  const markWorkerRunning = useToolboxStore((s) => s.markWorkerRunning);
-  const markWorkerStopped = useToolboxStore((s) => s.markWorkerStopped);
-
-  useEffect(() => {
-    miniAppAPI.workerListRunning().then(setRunningWorkerIds).catch(() => {});
-
-    const unlistenRestarted = api.listen<{ id?: string }>('miniapp-worker-restarted', (payload) => {
-      if (payload?.id) markWorkerRunning(payload.id);
-    });
-    const unlistenStopped = api.listen<{ id?: string }>('miniapp-worker-stopped', (payload) => {
-      if (payload?.id) markWorkerStopped(payload.id);
-    });
-    const unlistenDeleted = api.listen<{ id?: string }>('miniapp-deleted', (payload) => {
-      if (payload?.id) markWorkerStopped(payload.id);
-    });
-
-    return () => {
-      unlistenRestarted();
-      unlistenStopped();
-      unlistenDeleted();
-    };
-  }, [setRunningWorkerIds, markWorkerRunning, markWorkerStopped]);
-
-  return (
-    <div className="toolbox-scene">
-      <Suspense fallback={null}>
-        <GalleryView />
-      </Suspense>
-    </div>
-  );
-};
-
-export default ToolboxScene;
diff --git a/src/web-ui/src/app/scenes/toolbox/hooks/useMiniAppList.ts b/src/web-ui/src/app/scenes/toolbox/hooks/useMiniAppList.ts
deleted file mode 100644
index e703daa6..00000000
--- a/src/web-ui/src/app/scenes/toolbox/hooks/useMiniAppList.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * useMiniAppList — loads miniapps from backend and listens for create/update/delete events.
- */
-import { useEffect, useCallback } from 'react';
-import { miniAppAPI } from '@/infrastructure/api/service-api/MiniAppAPI';
-import { api } from '@/infrastructure/api/service-api/ApiClient';
-import { useToolboxStore } from '../toolboxStore';
-import { createLogger } from '@/shared/utils/logger';
-
-const log = createLogger('useMiniAppList');
-
-export function useMiniAppList() {
-  const setApps = useToolboxStore((s) => s.setApps);
-  const setLoading = useToolboxStore((s) => s.setLoading);
-
-  const refresh = useCallback(async () => {
-    setLoading(true);
-    try {
-      const apps = await miniAppAPI.listMiniApps();
-      setApps(apps);
-    } catch (error) {
-      log.error('Failed to load miniapps', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [setApps, setLoading]);
-
-  useEffect(() => {
-    refresh();
-
-    // Listen for backend events triggered by AI GenerateMiniApp / EditMiniApp
-    const unlistenCreated = api.listen('miniapp-created', () => {
-      log.info('miniapp-created event received, refreshing');
-      refresh();
-    });
-    const unlistenUpdated = api.listen('miniapp-updated', () => {
-      log.info('miniapp-updated event received, refreshing');
-      refresh();
-    });
-    const unlistenDeleted = api.listen('miniapp-deleted', () => {
-      log.info('miniapp-deleted event received, refreshing');
-      refresh();
-    });
-
-    return () => {
-      unlistenCreated();
-      unlistenUpdated();
-      unlistenDeleted();
-    };
-  }, [refresh]);
-
-  return { refresh };
-}
diff --git a/src/web-ui/src/app/types/index.ts b/src/web-ui/src/app/types/index.ts
index b5f9dbde..c32fa782 100644
--- a/src/web-ui/src/app/types/index.ts
+++ b/src/web-ui/src/app/types/index.ts
@@ -31,7 +31,7 @@ export interface AgentConfig {
 
 // Panel types - removed 'chat'; chat lives in the center panel.
 // 'profile' replaces legacy context naming.
-export type PanelType = 'sessions' | 'files' | 'git' | 'profile' | 'terminal' | 'capabilities' | 'agents' | 'skills' | 'tools' | 'toolbox';
+export type PanelType = 'sessions' | 'files' | 'git' | 'profile' | 'terminal' | 'capabilities' | 'agents' | 'skills' | 'tools';
 
 // Layout state - three-column layout support.
 // Strategy: fixed left/right widths with elastic center (floating layout).
diff --git a/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx b/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx
index c3fa0c88..3c979d5b 100644
--- a/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx
+++ b/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx
@@ -18,6 +18,17 @@ export interface TooltipProps {
   className?: string;
 }
 
+const assignRef = <T,>(ref: React.Ref<T> | undefined, value: T | null): void => {
+  if (!ref) return;
+
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+
+  (ref as React.MutableRefObject<T | null>).current = value;
+};
+
 const getOppositePlacement = (placement: TooltipPlacement): TooltipPlacement => {
   const opposites: Record<TooltipPlacement, TooltipPlacement> = {
     top: 'bottom',
@@ -145,7 +156,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const [positionReady, setPositionReady] = useState(false);
   const [actualPlacement, setActualPlacement] = useState<TooltipPlacement>(placement);
   const [mousePosition, setMousePosition] = useState<{ x: number; y: number } | null>(null);
-  const triggerRef = useRef<HTMLElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const latestMousePositionRef = useRef<{ x: number; y: number } | null>(null);
@@ -264,6 +275,12 @@ export const Tooltip: React.FC<TooltipProps> = ({
   }, []);
 
   const childProps = children.props as Record<string, unknown>;
+  const childRef = (children as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref;
+
+  const handleTriggerRef = useCallback((node: HTMLElement | null) => {
+    triggerRef.current = node;
+    assignRef(childRef, node);
+  }, [childRef]);
 
   const handleMouseEnter = (e: React.MouseEvent) => {
     if (trigger === 'hover') showTooltip(e);
@@ -304,7 +321,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const triggerElement = React.cloneElement(children as React.ReactElement<any>, {
-    ref: triggerRef,
+    ref: handleTriggerRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onMouseMove: followCursor ? handleMouseMove : (children.props as Record<string, unknown>).onMouseMove,
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
index 83b6d4a5..ae741c3c 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -68,7 +68,7 @@
     .bitfun-chat-input__box {
       min-height: 42px;
       max-height: 42px;
-      padding: 0 16px 0 22px;
+      padding: 0 18px;
       border-radius: 999px;
       background: var(--color-bg-tertiary);
       border: none;
@@ -98,30 +98,44 @@
     .bitfun-chat-input__target-switcher,
     .bitfun-chat-input__actions-left,
     .bitfun-chat-input__mode-selector,
-    .bitfun-chat-input__queued-indicator {
+    .bitfun-chat-input__queued-indicator,
+    .bitfun-chat-input__actions-right {
       display: none !important;
     }
     
     .bitfun-chat-input__input-area {
-      flex: 1;
-      min-height: auto;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: calc(100% - 36px);
+      min-height: 24px;
       max-height: 24px;
       display: flex;
       align-items: center;
+      justify-content: center;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
       
       .rich-text-input {
         min-height: 24px !important;
         max-height: 24px !important;
+        max-width: min(100%, calc(100% - 132px));
         font-size: 14px;
         line-height: 24px;
         overflow: hidden;
         padding: 0 !important;
+        margin: 0 auto;
+        text-align: center;
+        width: 100%;
         
         &:empty::before {
+          display: block;
           color: var(--color-text-primary);
           opacity: 0.6;
           font-size: 14px;
           line-height: 24px;
+          text-align: center;
+          width: 100%;
         }
       }
     }
@@ -132,33 +146,56 @@
       padding: 0;
       margin: 0;
     }
-    
-    .bitfun-chat-input__actions-right {
+
+    .bitfun-chat-input__space-hint {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      right: 16px;
+      align-items: center;
       gap: 6px;
-      
-      .bitfun-chat-input__action-button {
-        opacity: 0.4;
-        width: 24px;
-        height: 24px;
-        
-        &:hover {
-          opacity: 1;
-        }
-      }
-      
-      .bitfun-chat-input__send-button {
-        width: 24px;
-        height: 24px;
-        
-        &:not(:disabled) {
-          opacity: 1;
-        }
-        
-        &:disabled {
-          opacity: 0.3;
-        }
-      }
+      flex-shrink: 0;
+      font-size: 11px;
+      color: var(--color-text-muted);
+      opacity: 0.5;
+      white-space: nowrap;
+      pointer-events: none;
+      letter-spacing: 0.01em;
+      transform: translateY(-50%);
+      transform-origin: center center;
+      animation: bitfun-space-hint-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.32s both;
     }
+
+    &:hover .bitfun-chat-input__space-hint {
+      opacity: 0.75;
+    }
+  }
+
+  &__space-hint {
+    display: none;
+  }
+
+  &__space-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 18px;
+    padding: 0 7px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--color-text-secondary);
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
+  &__space-hint-text {
+    display: inline-flex;
+    align-items: center;
   }
   
   &--active {
@@ -1298,3 +1335,14 @@
   }
 }
 
+@keyframes bitfun-space-hint-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+}
+
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index 9533ba6f..33a99cd0 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -41,6 +41,7 @@ import { createLogger } from '@/shared/utils/logger';
 import { Tooltip, IconButton } from '@/component-library';
 import { useAgentCanvasStore } from '@/app/components/panels/content-canvas/stores';
 import { openBtwSessionInAuxPane, selectActiveBtwSessionTab } from '../services/openBtwSession';
+import { resolveSessionRelationship } from '../utils/sessionMetadata';
 import './ChatInput.scss';
 
 const log = createLogger('ChatInput');
@@ -106,13 +107,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const activeBtwSessionData = activeBtwSessionTab?.content.data as
     | { childSessionId: string; parentSessionId: string; workspacePath?: string }
     | undefined;
-  const activeBtwSessionId = activeBtwSessionData?.childSessionId;
+  const activeBtwSessionId = activeBtwSessionData?.parentSessionId === currentSessionId
+    ? activeBtwSessionData.childSessionId
+    : undefined;
   const effectiveTargetSessionId =
     inputTarget === 'btw' && activeBtwSessionId ? activeBtwSessionId : currentSessionId;
   const effectiveTargetSession = effectiveTargetSessionId
     ? flowChatState.sessions.get(effectiveTargetSessionId)
     : undefined;
-  const isBtwSession = effectiveTargetSession?.sessionKind === 'btw';
+  const isBtwSession = resolveSessionRelationship(effectiveTargetSession).isBtw;
   const showTargetSwitcher = !!activeBtwSessionId;
   const currentSessionTitle = currentSession?.title?.trim() || t('session.untitled');
   const activeBtwSessionTitle = activeBtwSessionId
@@ -1256,6 +1259,35 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       }, 50);
     }
   }, [inputState.isActive]);
+
+  // Global space-to-activate: when collapsed and no editable element is focused
+  useEffect(() => {
+    if (inputState.isActive) return;
+
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== ' ') return;
+
+      const target = e.target as HTMLElement;
+      const isEditable =
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable ||
+        target.closest('[contenteditable="true"]') !== null;
+
+      if (isEditable) return;
+
+      e.preventDefault();
+      dispatchInput({ type: 'ACTIVATE' });
+      setTimeout(() => {
+        if (richTextInputRef.current) {
+          richTextInputRef.current.focus();
+        }
+      }, 50);
+    };
+
+    document.addEventListener('keydown', handleGlobalKeyDown);
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+  }, [inputState.isActive]);
   
   const containerRef = useRef<HTMLDivElement>(null);
   
@@ -1559,6 +1591,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             )}
             </div>
             
+            {!inputState.isActive && (
+              <span className="bitfun-chat-input__space-hint">
+                <span className="bitfun-chat-input__space-key" aria-hidden="true">Space</span>
+                <span className="bitfun-chat-input__space-hint-text">
+                  {t('input.spaceToActivate')}
+                </span>
+              </span>
+            )}
+
             <IconButton
               className="bitfun-chat-input__expand-button"
               variant="ghost"
diff --git a/src/web-ui/src/flow_chat/components/WelcomePanel.tsx b/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
index 258f32e1..9b20e8d1 100644
--- a/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
@@ -13,6 +13,7 @@ import { createLogger } from '@/shared/utils/logger';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
 import type { WorkspaceInfo } from '@/shared/types';
 import CoworkExampleCards from './CoworkExampleCards';
+import { useAgentIdentityDocument } from '@/app/scenes/my-agent/useAgentIdentityDocument';
 import './WelcomePanel.css';
 
 const log = createLogger('WelcomePanel');
@@ -21,12 +22,14 @@ interface WelcomePanelProps {
   onQuickAction?: (command: string) => void;
   className?: string;
   sessionMode?: string;
+  workspacePath?: string;
 }
 
 export const WelcomePanel: React.FC<WelcomePanelProps> = ({
   onQuickAction,
   className = '',
   sessionMode,
+  workspacePath = '',
 }) => {
   const { t } = useTranslation('flow-chat');
   const [gitState, setGitState] = useState<GitWorkState | null>(null);
@@ -42,19 +45,26 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
     openWorkspace,
     switchWorkspace,
   } = useWorkspaceContext();
-  const isCoworkSession = (sessionMode || '').toLowerCase() === 'cowork';
+  const sessionModeLower = (sessionMode || '').toLowerCase();
+  const isCoworkSession = sessionModeLower === 'cowork';
+  const isClawSession = sessionModeLower === 'claw';
+  // code sessions use mode='agentic'; cowork sessions use mode='cowork'
+  const showPanda = sessionModeLower !== 'code' && sessionModeLower !== 'agentic' && sessionModeLower !== 'cowork';
+
+  const { document: identityDoc } = useAgentIdentityDocument(isClawSession ? workspacePath : '');
+  const assistantName = isClawSession ? (identityDoc.name || '') : '';
 
   const greeting = useMemo(() => {
     const hour = new Date().getHours();
-    const s = isCoworkSession ? 'Cowork' : '';
+    const s = isCoworkSession ? 'Cowork' : isClawSession ? 'Claw' : '';
     if (hour >= 5 && hour < 12) return { title: t('welcome.greetingMorning'), subtitle: t(`welcome.subtitleMorning${s}`) };
     if (hour >= 12 && hour < 18) return { title: t('welcome.greetingAfternoon'), subtitle: t(`welcome.subtitleAfternoon${s}`) };
     if (hour >= 18 && hour < 23) return { title: t('welcome.greetingEvening'), subtitle: t(`welcome.subtitleEvening${s}`) };
     return { title: t('welcome.greetingNight'), subtitle: t(`welcome.subtitleNight${s}`) };
-  }, [t, isCoworkSession]);
+  }, [t, isCoworkSession, isClawSession]);
 
   const tagline = greeting.subtitle;
-  const aiPartnerKey = isCoworkSession ? 'welcome.aiPartnerCowork' : 'welcome.aiPartner';
+  const aiPartnerKey = isCoworkSession ? 'welcome.aiPartnerCowork' : isClawSession ? 'welcome.aiPartnerClaw' : 'welcome.aiPartner';
 
   const otherWorkspaces = useMemo(
     () => openedWorkspacesList.filter(ws => ws.id !== currentWorkspace?.id),
@@ -117,9 +127,9 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
   }, []);
 
   useEffect(() => {
-    if (isCoworkSession || !currentWorkspace?.rootPath) { setGitState(null); return; }
+    if (isCoworkSession || isClawSession || !currentWorkspace?.rootPath) { setGitState(null); return; }
     void loadGitState(currentWorkspace.rootPath);
-  }, [currentWorkspace?.rootPath, isCoworkSession, loadGitState]);
+  }, [currentWorkspace?.rootPath, isCoworkSession, isClawSession, loadGitState]);
 
   useEffect(() => {
     if (!workspaceDropdownOpen) return;
@@ -161,12 +171,16 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
         {/* Greeting */}
         <div className="welcome-panel__greeting">
           <div className="welcome-panel__greeting-inner">
-            <div className="welcome-panel__panda" aria-hidden="true">
-              <img src="/panda_full_1.png" className="welcome-panel__panda-frame welcome-panel__panda-frame--1" alt="" />
-              <img src="/panda_full_2.png" className="welcome-panel__panda-frame welcome-panel__panda-frame--2" alt="" />
-            </div>
+            {showPanda && (
+              <div className="welcome-panel__panda" aria-hidden="true">
+                <img src="/panda_full_1.png" className="welcome-panel__panda-frame welcome-panel__panda-frame--1" alt="" />
+                <img src="/panda_full_2.png" className="welcome-panel__panda-frame welcome-panel__panda-frame--2" alt="" />
+              </div>
+            )}
             <div className="welcome-panel__greeting-text">
-              <h1 className="welcome-panel__heading">{greeting.title}，{t(aiPartnerKey)}</h1>
+              <h1 className="welcome-panel__heading">
+                {greeting.title}，{t(aiPartnerKey)}{isClawSession && assistantName ? `，${assistantName}` : ''}
+              </h1>
               <p className="welcome-panel__tagline">{tagline}</p>
             </div>
           </div>
@@ -177,7 +191,9 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
         {/* Narrative: workspace + git in natural language */}
         <div className="welcome-panel__narrative">
           <p className="welcome-panel__narrative-text">
-            {!hasWorkspace ? (
+            {isClawSession ? (
+              t('welcome.narrativeClaw')
+            ) : !hasWorkspace ? (
               <>
                 {t('welcome.noWorkspaceHint')}
                 <button
diff --git a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss
index 2ebbce19..be863bb8 100644
--- a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss
+++ b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss
@@ -11,14 +11,17 @@
   color: var(--color-text-primary);
 
   &--empty {
+    align-items: center;
+    justify-content: center;
+
     .btw-session-panel__empty-state {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      padding: 0 16px;
       color: var(--color-text-muted);
       font-size: 13px;
+      text-align: center;
     }
   }
 
diff --git a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx
index 80a00daf..91b27cbf 100644
--- a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx
+++ b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import path from 'path-browserify';
-import { MessageSquareQuote, Link2, CornerUpLeft } from 'lucide-react';
+import { Link2, CornerUpLeft } from 'lucide-react';
 import { FlowChatContext } from '../modern/FlowChatContext';
 import { VirtualItemRenderer } from '../modern/VirtualItemRenderer';
 import { ProcessingIndicator } from '../modern/ProcessingIndicator';
@@ -225,8 +225,9 @@ export const BtwSessionPanel: React.FC<BtwSessionPanelProps> = ({
   if (!childSessionId || !childSession) {
     return (
       <div className="btw-session-panel btw-session-panel--empty">
-        <MessageSquareQuote size={18} />
-        <span>{t('btw.threadLabel')}</span>
+        <div className="btw-session-panel__empty-state">
+          {t('btw.emptyThreadLabel', { label: t('btw.threadLabel') })}
+        </div>
       </div>
     );
   }
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
index dd037289..5a5725ad 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
@@ -24,6 +24,7 @@ import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext'
 import path from 'path-browserify';
 import { createLogger } from '@/shared/utils/logger';
 import { flowChatManager } from '../../services/FlowChatManager';
+import { resolveSessionRelationship } from '../../utils/sessionMetadata';
 import './ModernFlowChatContainer.scss';
 
 const log = createLogger('ModernFlowChatContainer');
@@ -54,7 +55,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
   const visibleTurnInfo = useVisibleTurnInfo();
   const virtualListRef = useRef<VirtualMessageListRef>(null);
   const { workspacePath } = useWorkspaceContext();
-  const isBtwSession = activeSession?.sessionKind === 'btw';
+  const isBtwSession = resolveSessionRelationship(activeSession).isBtw;
   const [btwOrigin, setBtwOrigin] = useState<Session['btwOrigin'] | null>(null);
   const [btwParentTitle, setBtwParentTitle] = useState('');
   
@@ -115,9 +116,9 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
         return;
       }
 
-      const nextOrigin = (session.btwOrigin ||
-        (session.sessionKind === 'btw' && session.parentSessionId ? { parentSessionId: session.parentSessionId } : null)) as Session['btwOrigin'] | null;
-      const parentId = nextOrigin?.parentSessionId || session.parentSessionId;
+      const relationship = resolveSessionRelationship(session);
+      const nextOrigin = relationship.origin || null;
+      const parentId = relationship.parentSessionId;
       const parent = parentId ? state.sessions.get(parentId) : undefined;
 
       setBtwOrigin(nextOrigin);
@@ -508,6 +509,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
             <WelcomePanel
               key={activeSession?.sessionId ?? 'welcome'}
               sessionMode={activeSession?.mode}
+              workspacePath={activeSession?.workspacePath}
               onQuickAction={(command) => {
                 window.dispatchEvent(new CustomEvent('fill-chat-input', {
                   detail: { message: command }
diff --git a/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.tsx b/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.tsx
index 5fe03a56..ba8714a4 100644
--- a/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.tsx
+++ b/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.tsx
@@ -27,6 +27,7 @@ import { useToolbarModeContext } from './ToolbarModeContext';
 import { flowChatStore } from '../../store/FlowChatStore';
 import { syncSessionToModernStore } from '../../services/storeSync';
 import { FlowChatState } from '../../types/flow-chat';
+import { compareSessionsForDisplay } from '../../utils/sessionOrdering';
 import { createLogger } from '@/shared/utils/logger';
 
 const log = createLogger('ToolbarMode');
@@ -36,8 +37,6 @@ import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import './ToolbarMode.scss';
 
 const DEFAULT_MODE_CONFIG_KEY = 'app.session_config.default_mode';
-const getSessionTimestamp = (updatedAt?: number, lastActiveAt?: number) =>
-  updatedAt ?? lastActiveAt ?? 0;
 
 // Window size config (physical pixels, accounts for Windows DPI scaling).
 const TOOLBAR_WIDTH = 600;
@@ -91,7 +90,7 @@ export const ToolbarMode: React.FC = () => {
   
   const sessions = useMemo(() => {
     return Array.from(flowChatState.sessions.values())
-      .sort((a, b) => getSessionTimestamp(b.updatedAt, b.lastActiveAt) - getSessionTimestamp(a.updatedAt, a.lastActiveAt))
+      .sort(compareSessionsForDisplay)
       .slice(0, 10); // Limit to 10.
   }, [flowChatState]);
   
diff --git a/src/web-ui/src/flow_chat/services/BtwThreadService.ts b/src/web-ui/src/flow_chat/services/BtwThreadService.ts
index 211a26dc..904b20a0 100644
--- a/src/web-ui/src/flow_chat/services/BtwThreadService.ts
+++ b/src/web-ui/src/flow_chat/services/BtwThreadService.ts
@@ -6,6 +6,7 @@ import { flowChatStore } from '../store/FlowChatStore';
 import { stateMachineManager } from '../state-machine';
 import { flowChatManager } from './FlowChatManager';
 import type { DialogTurn, ModelRound, FlowTextItem } from '../types/flow-chat';
+import { buildSessionMetadata } from '../utils/sessionMetadata';
 
 const log = createLogger('BtwThreadService');
 
@@ -196,26 +197,14 @@ export async function startBtwThread(params: {
   // Persist child session metadata (parent linkage) to disk.
   const meta = await loadSessionMetadataWithRetry(childSessionId, workspacePath);
   if (meta) {
-    const customMetadata = { ...(meta.customMetadata || {}) };
-    customMetadata.kind = 'btw';
-    customMetadata.parentSessionId = parentSessionId;
-    customMetadata.parentRequestId = requestId;
-    customMetadata.parentDialogTurnId = parentDialogTurnId ?? null;
-    customMetadata.parentTurnIndex = parentTurnIndex ?? null;
-
-    const tags = Array.isArray(meta.tags) ? meta.tags : [];
-    const nextTags = tags.includes('btw') ? tags : [...tags, 'btw'];
-
-    await sessionAPI.saveSessionMetadata(
-      {
-        ...meta,
-        sessionName: childSessionName,
-        tags: nextTags,
-        customMetadata,
-        lastActiveAt: Date.now(),
-      },
-      workspacePath
-    );
+    const childSession = flowChatStore.getState().sessions.get(childSessionId);
+
+    if (childSession) {
+      await sessionAPI.saveSessionMetadata(
+        buildSessionMetadata(childSession, meta),
+        workspacePath
+      );
+    }
   }
 
   let answerAcc = '';
@@ -252,9 +241,10 @@ export async function startBtwThread(params: {
       const fullText = (evt.fullText && evt.fullText.length >= answerAcc.length) ? evt.fullText : answerAcc;
       answerAcc = fullText;
 
+      const completedAt = Date.now();
+
       // Finalize child session live.
       flowChatStore.updateDialogTurn(childSessionId, childTurnId, (turn) => {
-        const completedAt = Date.now();
         const updatedRounds = turn.modelRounds.map(r => {
           if (r.id !== childRoundId) return r;
           const updatedItems = r.items.map(it => {
@@ -277,6 +267,7 @@ export async function startBtwThread(params: {
           endTime: completedAt,
         };
       });
+      flowChatStore.markSessionFinished(childSessionId, completedAt);
 
       flowChatStore.updateBtwThreadMarker(parentSessionId, requestId, { status: 'done' });
 
@@ -330,6 +321,18 @@ export async function startBtwThread(params: {
 
       try {
         await sessionAPI.saveSessionTurn(turnData, workspacePath);
+
+        const childSession = flowChatStore.getState().sessions.get(childSessionId);
+        if (childSession) {
+          const meta = await loadSessionMetadataWithRetry(childSessionId, workspacePath, {
+            retries: 3,
+            delayMs: 80,
+          });
+          await sessionAPI.saveSessionMetadata(
+            buildSessionMetadata(childSession, meta ?? undefined),
+            workspacePath
+          );
+        }
       } catch (e) {
         log.error('Failed to persist btw child turn', { childSessionId, e });
       }
diff --git a/src/web-ui/src/flow_chat/services/FlowChatManager.ts b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
index 65393c50..df29a0fd 100644
--- a/src/web-ui/src/flow_chat/services/FlowChatManager.ts
+++ b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
@@ -13,6 +13,7 @@ import { AgentService } from '../../shared/services/agent-service';
 import { stateMachineManager } from '../state-machine';
 import { EventBatcher } from './EventBatcher';
 import { createLogger } from '@/shared/utils/logger';
+import { compareSessionsForDisplay } from '../utils/sessionOrdering';
 
 import type { FlowChatContext, SessionConfig, DialogTurn } from './flow-chat-manager/types';
 import type { FlowToolItem, FlowTextItem, ModelRound } from '../types/flow-chat';
@@ -86,7 +87,7 @@ export class FlowChatManager {
         (activeSession.workspacePath || workspacePath) === workspacePath;
 
       if (hasHistoricalSessions && !activeSessionBelongsToWorkspace) {
-        const sortedWorkspaceSessions = [...workspaceSessions].sort((a, b) => b.lastActiveAt - a.lastActiveAt);
+        const sortedWorkspaceSessions = [...workspaceSessions].sort(compareSessionsForDisplay);
         const latestSession = (preferredMode
           ? sortedWorkspaceSessions.find(session => session.mode === preferredMode)
           : undefined) || sortedWorkspaceSessions[0];
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts
index 2aaa3e64..5ac81330 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts
@@ -25,6 +25,7 @@ import {
   immediateSaveDialogTurn, 
   saveDialogTurnToDisk,
   cleanupSaveState,
+  updateSessionMetadata,
 } from './PersistenceModule';
 import { 
   processNormalTextChunkInternal, 
@@ -248,15 +249,17 @@ function handleSessionDeleted(context: FlowChatContext, event: any): void {
   const { sessionId } = event;
   
   const store = FlowChatStore.getInstance();
-  const existing = store.getState().sessions.get(sessionId);
-  if (!existing) return;
+  const removedSessionIds = store.getCascadeSessionIds(sessionId);
+  if (removedSessionIds.length === 0) return;
 
   log.info('Remote session deleted', { sessionId });
-  pendingImageAnalysisTurns.delete(sessionId);
-  stateMachineManager.delete(sessionId);
-  context.processingManager.clearSessionStatus(sessionId);
-  cleanupSaveState(context, sessionId);
-  cleanupSessionBuffers(context, sessionId);
+  removedSessionIds.forEach(id => {
+    pendingImageAnalysisTurns.delete(id);
+    stateMachineManager.delete(id);
+    context.processingManager.clearSessionStatus(id);
+    cleanupSaveState(context, id);
+    cleanupSessionBuffers(context, id);
+  });
   store.removeSession(sessionId);
 }
 
@@ -958,6 +961,8 @@ function handleDialogTurnComplete(
     sessionContentBuffer.clear();
   }
 
+  context.flowChatStore.markSessionFinished(sessionId);
+
   context.flowChatStore.updateDialogTurn(sessionId, turnId, turn => {
     const updatedModelRounds = turn.modelRounds.map((round) => {
       if (round.isStreaming) {
@@ -1026,6 +1031,8 @@ function handleDialogTurnFailed(context: FlowChatContext, event: any): void {
   if (sessionContentBuffer) {
     sessionContentBuffer.clear();
   }
+
+  context.flowChatStore.markSessionFinished(sessionId);
   
   const dialogTurn = session.dialogTurns.find(turn => turn.id === turnId);
   const hasSuccessfulModelRounds = dialogTurn && dialogTurn.modelRounds.length > 0;
@@ -1066,6 +1073,9 @@ function handleDialogTurnFailed(context: FlowChatContext, event: any): void {
     }
     
     context.flowChatStore.deleteDialogTurn(sessionId, turnId);
+    updateSessionMetadata(context, sessionId).catch(err => {
+      log.warn('Failed to update failed session metadata', { sessionId, error: err });
+    });
   }
   
   const currentState = stateMachineManager.getCurrentState(sessionId);
@@ -1115,6 +1125,8 @@ function handleDialogTurnCancelled(
   if (sessionContentBuffer) {
     sessionContentBuffer.clear();
   }
+
+  context.flowChatStore.markSessionFinished(sessionId);
   
   context.flowChatStore.updateDialogTurn(sessionId, turnId, turn => {
     const updatedModelRounds = turn.modelRounds.map((round) => {
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts
index 000f758a..10db236e 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts
@@ -4,8 +4,8 @@
  */
 
 import { createLogger } from '@/shared/utils/logger';
-import { i18nService } from '@/infrastructure/i18n';
 import type { FlowChatContext, DialogTurn } from './types';
+import { buildSessionMetadata } from '../../utils/sessionMetadata';
 
 const log = createLogger('PersistenceModule');
 
@@ -261,7 +261,11 @@ export async function saveAllInProgressTurns(context: FlowChatContext): Promise<
         context.saveDebouncers.delete(key);
       }
       
-      if (lastTurn.status === 'processing' || lastTurn.status === 'pending') {
+      if (
+        lastTurn.status === 'processing' ||
+        lastTurn.status === 'pending' ||
+        lastTurn.status === 'image_analyzing'
+      ) {
         context.flowChatStore.updateDialogTurn(sessionId, lastTurn.id, turn => ({
           ...turn,
           status: 'cancelled' as const,
@@ -405,32 +409,7 @@ export async function updateSessionMetadata(
       // ignore
     }
 
-    const inMemoryTurnCount = session.dialogTurns.length;
-    const inMemoryMessageCount = session.dialogTurns.reduce((sum, turn) => {
-      return sum + 1 + turn.modelRounds.reduce((roundSum, round) => {
-        return roundSum + round.items.filter(item => item.type === 'text').length;
-      }, 0);
-    }, 0);
-    const inMemoryToolCallCount = session.dialogTurns.reduce((sum, turn) => {
-      return sum + turn.modelRounds.reduce((roundSum, round) => {
-        return roundSum + round.items.filter(item => item.type === 'tool').length;
-      }, 0);
-    }, 0);
-
-    const metadata: any = {
-      sessionId: session.sessionId,
-      sessionName: session.title || existingMetadata?.sessionName || i18nService.t('flow-chat:session.new'),
-      agentType: session.mode || existingMetadata?.agentType || 'agentic',
-      modelName: session.config.modelName || existingMetadata?.modelName || 'auto',
-      createdAt: existingMetadata?.createdAt || session.createdAt,
-      lastActiveAt: Date.now(),
-      turnCount: Math.max(inMemoryTurnCount, existingMetadata?.turnCount ?? 0),
-      messageCount: Math.max(inMemoryMessageCount, existingMetadata?.messageCount ?? 0),
-      toolCallCount: Math.max(inMemoryToolCallCount, existingMetadata?.toolCallCount ?? 0),
-      status: 'active',
-      tags: existingMetadata?.tags || [],
-      todos: session.todos || existingMetadata?.todos || [],
-    };
+    const metadata = buildSessionMetadata(session, existingMetadata);
 
     await sessionAPI.saveSessionMetadata(metadata, workspacePath);
   } catch (error) {
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
index 8f6e62da..c468d415 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
@@ -249,9 +249,12 @@ export async function deleteChatSession(
   sessionId: string
 ): Promise<void> {
   try {
+    const removedSessionIds = context.flowChatStore.getCascadeSessionIds(sessionId);
     await context.flowChatStore.deleteSession(sessionId);
-    context.processingManager.clearSessionStatus(sessionId);
-    cleanupSaveState(context, sessionId);
+    removedSessionIds.forEach(id => {
+      context.processingManager.clearSessionStatus(id);
+      cleanupSaveState(context, id);
+    });
   } catch (error) {
     log.error('Failed to delete chat session', { sessionId, error });
     notificationService.error('Failed to delete session', {
diff --git a/src/web-ui/src/flow_chat/store/FlowChatStore.ts b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
index 4b838829..99bca426 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
@@ -16,6 +16,13 @@ import {
 } from '../types/flow-chat';
 import { createLogger } from '@/shared/utils/logger';
 import { i18nService } from '@/infrastructure/i18n/core/I18nService';
+import type { SessionKind } from '@/shared/types/session-history';
+import {
+  buildSessionMetadata,
+  deriveLastFinishedAtFromMetadata,
+  deriveSessionRelationshipFromMetadata,
+  normalizeSessionRelationship,
+} from '../utils/sessionMetadata';
 
 const log = createLogger('FlowChatStore');
 
@@ -109,6 +116,50 @@ export class FlowChatStore {
     this.notifyListeners();
   }
 
+  private collectCascadeSessionIds(
+    rootSessionId: string,
+    sessions: Map<string, Session>
+  ): string[] {
+    if (!sessions.has(rootSessionId)) {
+      return [];
+    }
+
+    const childSessionIdsByParent = new Map<string, string[]>();
+    sessions.forEach(session => {
+      const parentSessionId = session.parentSessionId;
+      if (!parentSessionId) {
+        return;
+      }
+
+      const existing = childSessionIdsByParent.get(parentSessionId) || [];
+      existing.push(session.sessionId);
+      childSessionIdsByParent.set(parentSessionId, existing);
+    });
+
+    const visited = new Set<string>();
+    const orderedSessionIds: string[] = [];
+
+    const visit = (sessionId: string): void => {
+      if (visited.has(sessionId)) {
+        return;
+      }
+
+      visited.add(sessionId);
+      const childSessionIds = childSessionIdsByParent.get(sessionId) || [];
+      childSessionIds.forEach(childSessionId => {
+        visit(childSessionId);
+      });
+      orderedSessionIds.push(sessionId);
+    };
+
+    visit(rootSessionId);
+    return orderedSessionIds;
+  }
+
+  public getCascadeSessionIds(sessionId: string): string[] {
+    return this.collectCascadeSessionIds(sessionId, this.state.sessions);
+  }
+
   public subscribe(listener: (state: FlowChatState) => void): () => void {
     this.listeners.add(listener);
     return () => {
@@ -130,6 +181,7 @@ export class FlowChatStore {
     });
     
     this.setState(prev => {
+      const relationship = normalizeSessionRelationship({ sessionKind: 'normal' });
       const session: Session = {
         sessionId,
         title: title || i18nService.t('flow-chat:session.new'),
@@ -139,11 +191,15 @@ export class FlowChatStore {
         config,
         createdAt: Date.now(),
         lastActiveAt: Date.now(),
+        lastFinishedAt: undefined,
         error: null,
         maxContextTokens: maxContextTokens || 128128,
         mode: mode || 'agentic',
         workspacePath,
+        parentSessionId: relationship.parentSessionId,
+        sessionKind: relationship.sessionKind,
         btwThreads: [],
+        btwOrigin: relationship.btwOrigin,
       };
 
       const newSessions = new Map(prev.sessions);
@@ -166,7 +222,7 @@ export class FlowChatStore {
     title: string,
     mode: string,
     workspacePath?: string,
-    meta?: { parentSessionId?: string; sessionKind?: 'normal' | 'btw'; btwOrigin?: Session['btwOrigin'] }
+    meta?: { parentSessionId?: string; sessionKind?: SessionKind; btwOrigin?: Session['btwOrigin'] }
   ): void {
     import('../state-machine').then(({ stateMachineManager }) => {
       stateMachineManager.getOrCreate(sessionId);
@@ -177,6 +233,7 @@ export class FlowChatStore {
         return prev;
       }
 
+      const relationship = normalizeSessionRelationship(meta);
       const session: Session = {
         sessionId,
         title: title || i18nService.t('flow-chat:session.new'),
@@ -186,15 +243,16 @@ export class FlowChatStore {
         config: { maxContextTokens: 128128, autoCompact: true, enableTools: true } as any,
         createdAt: Date.now(),
         lastActiveAt: Date.now(),
+        lastFinishedAt: undefined,
         error: null,
         maxContextTokens: 128128,
         mode: mode || 'agentic',
         isHistorical: false,
         workspacePath,
-        parentSessionId: meta?.parentSessionId,
-        sessionKind: meta?.sessionKind,
+        parentSessionId: relationship.parentSessionId,
+        sessionKind: relationship.sessionKind,
         btwThreads: [],
-        btwOrigin: meta?.btwOrigin,
+        btwOrigin: relationship.btwOrigin,
       };
 
       const newSessions = new Map(prev.sessions);
@@ -270,16 +328,22 @@ export class FlowChatStore {
    */
   public updateSessionRelationship(
     sessionId: string,
-    updates: { parentSessionId?: string; sessionKind?: 'normal' | 'btw' }
+    updates: { parentSessionId?: string; sessionKind?: SessionKind }
   ): void {
     this.setState(prev => {
       const session = prev.sessions.get(sessionId);
       if (!session) return prev;
 
+      const relationship = normalizeSessionRelationship({
+        sessionKind: updates.sessionKind ?? session.sessionKind,
+        parentSessionId: updates.parentSessionId ?? session.parentSessionId,
+        btwOrigin: session.btwOrigin,
+      });
       const next: Session = {
         ...session,
-        parentSessionId: updates.parentSessionId ?? session.parentSessionId,
-        sessionKind: updates.sessionKind ?? session.sessionKind,
+        parentSessionId: relationship.parentSessionId,
+        sessionKind: relationship.sessionKind,
+        btwOrigin: relationship.btwOrigin,
       };
 
       const newSessions = new Map(prev.sessions);
@@ -294,9 +358,16 @@ export class FlowChatStore {
       const session = prev.sessions.get(sessionId);
       if (!session) return prev;
 
+      const relationship = normalizeSessionRelationship({
+        sessionKind: 'btw',
+        parentSessionId: origin?.parentSessionId ?? session.parentSessionId,
+        btwOrigin: { ...(session.btwOrigin || {}), ...(origin || {}) },
+      });
       const next: Session = {
         ...session,
-        btwOrigin: { ...(session.btwOrigin || {}), ...(origin || {}) },
+        parentSessionId: relationship.parentSessionId,
+        sessionKind: relationship.sessionKind,
+        btwOrigin: relationship.btwOrigin,
       };
 
       const newSessions = new Map(prev.sessions);
@@ -403,16 +474,37 @@ export class FlowChatStore {
   }
 
   public async deleteSession(sessionId: string): Promise<void> {
+    const sessionIdsToDelete = this.getCascadeSessionIds(sessionId);
+    if (sessionIdsToDelete.length === 0) {
+      return;
+    }
+
     const { stateMachineManager } = await import('../state-machine');
-    stateMachineManager.delete(sessionId);
-    
+    sessionIdsToDelete.forEach(id => {
+      stateMachineManager.delete(id);
+    });
+
     try {
       const { agentAPI } = await import('@/infrastructure/api');
-      const workspacePath = this.state.sessions.get(sessionId)?.workspacePath;
-      if (!workspacePath) {
-        throw new Error(`Workspace path not found for session ${sessionId}`);
-      }
-      await agentAPI.deleteSession(sessionId, workspacePath);
+      const deleteResults = await Promise.allSettled(
+        sessionIdsToDelete.map(async id => {
+          const workspacePath = this.state.sessions.get(id)?.workspacePath;
+          if (!workspacePath) {
+            throw new Error(`Workspace path not found for session ${id}`);
+          }
+
+          await agentAPI.deleteSession(id, workspacePath);
+        })
+      );
+
+      deleteResults.forEach((result, index) => {
+        if (result.status === 'rejected') {
+          log.error('Failed to delete session on backend', {
+            sessionId: sessionIdsToDelete[index],
+            error: result.reason,
+          });
+        }
+      });
     } catch (error) {
       log.error('Failed to delete session on backend', { sessionId, error });
     }
@@ -420,13 +512,57 @@ export class FlowChatStore {
     this.removeSession(sessionId);
   }
 
-  public removeSession(sessionId: string): void {
+  public removeSession(sessionId: string): string[] {
+    const removedSessionIds = this.getCascadeSessionIds(sessionId);
+    if (removedSessionIds.length === 0) {
+      return [];
+    }
+
     this.setState(prev => {
+      const removedSessionIdSet = new Set(removedSessionIds);
       const newSessions = new Map(prev.sessions);
-      newSessions.delete(sessionId);
+      const removedSessions = removedSessionIds
+        .map(id => prev.sessions.get(id))
+        .filter((session): session is Session => Boolean(session));
+
+      removedSessionIds.forEach(id => {
+        newSessions.delete(id);
+      });
+
+      removedSessions.forEach(session => {
+        const parentSessionId = session.btwOrigin?.parentSessionId ?? session.parentSessionId;
+        if (!parentSessionId || removedSessionIdSet.has(parentSessionId)) {
+          return;
+        }
+
+        const parentSession = newSessions.get(parentSessionId);
+        if (!parentSession?.btwThreads?.length) {
+          return;
+        }
+
+        const requestId = session.btwOrigin?.requestId;
+        const nextThreads = parentSession.btwThreads.filter(thread => {
+          if (thread.childSessionId === session.sessionId) {
+            return false;
+          }
+
+          if (requestId && thread.requestId === requestId) {
+            return false;
+          }
+
+          return true;
+        });
+
+        if (nextThreads.length !== parentSession.btwThreads.length) {
+          newSessions.set(parentSessionId, {
+            ...parentSession,
+            btwThreads: nextThreads,
+          });
+        }
+      });
 
       let newActiveSessionId = prev.activeSessionId;
-      if (prev.activeSessionId === sessionId) {
+      if (prev.activeSessionId && removedSessionIdSet.has(prev.activeSessionId)) {
         const remainingSessions = Array.from(newSessions.keys());
         newActiveSessionId = remainingSessions.length > 0 ? remainingSessions[0] : null;
       }
@@ -437,6 +573,8 @@ export class FlowChatStore {
         activeSessionId: newActiveSessionId
       };
     });
+
+    return removedSessionIds;
   }
 
   public clearSession(sessionId?: string): void {
@@ -1011,6 +1149,26 @@ export class FlowChatStore {
     });
   }
 
+  public markSessionFinished(sessionId: string, timestamp: number = Date.now()): void {
+    this.setState(prev => {
+      const session = prev.sessions.get(sessionId);
+      if (!session) return prev;
+
+      const updatedSession: Session = {
+        ...session,
+        lastFinishedAt: timestamp,
+      };
+
+      const newSessions = new Map(prev.sessions);
+      newSessions.set(sessionId, updatedSession);
+
+      return {
+        ...prev,
+        sessions: newSessions,
+      };
+    });
+  }
+
   public async updateSessionTitle(
     sessionId: string, 
     title: string, 
@@ -1052,38 +1210,7 @@ export class FlowChatStore {
         }
 
         const metadata = await sessionAPI.loadSessionMetadata(sessionId, workspacePath);
-        const turnCount = session.dialogTurns.length;
-        const messageCount = session.dialogTurns.reduce((sum, turn) => {
-          return sum + 1 + turn.modelRounds.reduce((roundSum, round) => {
-            return roundSum + round.items.filter(item => item.type === 'text').length;
-          }, 0);
-        }, 0);
-        const toolCallCount = session.dialogTurns.reduce((sum, turn) => {
-          return sum + turn.modelRounds.reduce((roundSum, round) => {
-            return roundSum + round.items.filter(item => item.type === 'tool').length;
-          }, 0);
-        }, 0);
-
-        const nextMetadata = metadata
-          ? {
-              ...metadata,
-              sessionName: title,
-            }
-          : {
-              sessionId,
-              sessionName: title,
-              agentType: session.mode || 'agentic',
-              modelName: session.config.modelName || 'default',
-              createdAt: session.createdAt,
-              lastActiveAt: session.lastActiveAt || Date.now(),
-              turnCount,
-              messageCount,
-              toolCallCount,
-              status: 'active' as const,
-              tags: [],
-              todos: session.todos || [],
-              workspacePath,
-            };
+        const nextMetadata = buildSessionMetadata(session, metadata);
 
         await sessionAPI.saveSessionMetadata(nextMetadata, workspacePath);
       } catch (error) {
@@ -1329,27 +1456,8 @@ export class FlowChatStore {
           log.warn('Failed to get model context window size, using default', { sessionId: metadata.sessionId, error });
         }
         
-        const parentSessionId = (metadata?.customMetadata?.parentSessionId ||
-          metadata?.custom_metadata?.parent_session_id ||
-          metadata?.custom_metadata?.parentSessionId) as string | undefined;
-        const sessionKind = (metadata?.customMetadata?.kind || metadata?.customMetadata?.sessionKind) as
-          | 'normal'
-          | 'btw'
-          | undefined;
-        const parentDialogTurnId = (metadata?.customMetadata?.parentDialogTurnId ||
-          metadata?.custom_metadata?.parent_dialog_turn_id ||
-          metadata?.custom_metadata?.parentDialogTurnId) as string | undefined;
-        const parentTurnIndexRaw = (metadata?.customMetadata?.parentTurnIndex ||
-          metadata?.custom_metadata?.parent_turn_index ||
-          metadata?.custom_metadata?.parentTurnIndex) as number | string | null | undefined;
-        const parentTurnIndex = typeof parentTurnIndexRaw === 'number'
-          ? parentTurnIndexRaw
-          : (typeof parentTurnIndexRaw === 'string' && parentTurnIndexRaw.trim()
-            ? Number(parentTurnIndexRaw)
-            : undefined);
-        const parentRequestId = (metadata?.customMetadata?.parentRequestId ||
-          metadata?.custom_metadata?.parent_request_id ||
-          metadata?.custom_metadata?.parentRequestId) as string | undefined;
+        const relationship = deriveSessionRelationshipFromMetadata(metadata);
+        const lastFinishedAt = deriveLastFinishedAtFromMetadata(metadata);
 
         this.setState(prev => {
           if (prev.sessions.has(metadata.sessionId)) {
@@ -1376,23 +1484,17 @@ export class FlowChatStore {
             },
             createdAt: metadata.createdAt,
             lastActiveAt: metadata.lastActiveAt,
+            lastFinishedAt,
             error: null,
             isHistorical: true,
             todos: (metadata as any).todos || [],
             maxContextTokens,
             mode: validatedAgentType,
             workspacePath: (metadata as any).workspacePath || workspacePath,
-            parentSessionId: typeof parentSessionId === 'string' && parentSessionId.trim() ? parentSessionId : undefined,
-            sessionKind: sessionKind,
+            parentSessionId: relationship.parentSessionId,
+            sessionKind: relationship.sessionKind,
             btwThreads: [],
-            btwOrigin: sessionKind === 'btw'
-              ? {
-                  requestId: typeof parentRequestId === 'string' && parentRequestId.trim() ? parentRequestId : undefined,
-                  parentSessionId: typeof parentSessionId === 'string' && parentSessionId.trim() ? parentSessionId : undefined,
-                  parentDialogTurnId: typeof parentDialogTurnId === 'string' && parentDialogTurnId.trim() ? parentDialogTurnId : undefined,
-                  parentTurnIndex: Number.isFinite(parentTurnIndex as number) ? (parentTurnIndex as number) : undefined,
-                }
-              : undefined,
+            btwOrigin: relationship.btwOrigin,
           };
           
           const newSessions = new Map(prev.sessions);
diff --git a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
index f90c20c9..354d139e 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
@@ -40,7 +40,7 @@ export const InitMiniAppDisplay: React.FC<ToolCardProps> = ({ toolItem }) => {
             {path && <span className="miniapp-tool-display__meta">path: {path}</span>}
             <button
               className="miniapp-tool-display__open-btn"
-              onClick={() => openScene('toolbox')}
+              onClick={() => openScene(`miniapp:${appId}`)}
               title="Open in Mini App"
             >
               <ExternalLink size={12} />
diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
index c1f954f4..95f6e735 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
@@ -67,8 +67,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
   onConfirm,
   onReject,
   onExpand,
-  terminalSessionId: propTerminalSessionId,
-  sessionId
+  terminalSessionId: propTerminalSessionId
 }) => {
   const { t } = useTranslation('flow-chat');
   const toolCall = toolItem.toolCall;
@@ -90,12 +89,8 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
       return propTerminalSessionId;
     }
     
-    if (sessionId && !sessionId.startsWith('FlowChat-')) {
-      return sessionId;
-    }
-    
     return undefined;
-  }, [toolResult, propTerminalSessionId, sessionId]);
+  }, [toolResult, propTerminalSessionId]);
 
   const showConfirmButtons = status === 'pending_confirmation';
   const showInterruptButton = status === 'running';
@@ -269,12 +264,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
     }
 
     const terminalName = `Chat-${terminalSessionId.slice(0, 8)}`;
-
-    window.dispatchEvent(new CustomEvent('expand-right-panel'));
-
-    setTimeout(() => {
-      createTerminalTab(terminalSessionId, terminalName);
-    }, 250);
+    createTerminalTab(terminalSessionId, terminalName);
   }, [terminalSessionId]);
 
   const output = toolResult?.result?.output || '';
diff --git a/src/web-ui/src/flow_chat/types/flow-chat.ts b/src/web-ui/src/flow_chat/types/flow-chat.ts
index 671319b3..1a6aa7b6 100644
--- a/src/web-ui/src/flow_chat/types/flow-chat.ts
+++ b/src/web-ui/src/flow_chat/types/flow-chat.ts
@@ -3,6 +3,8 @@
  * Supports mixed streaming output.
  */
 
+import type { SessionKind } from '@/shared/types/session-history';
+
 // Base type for streaming items.
 export interface FlowItem {
   id: string;
@@ -163,6 +165,7 @@ export interface Session {
   config: SessionConfig;
   createdAt: number;
   lastActiveAt: number;
+  lastFinishedAt?: number;
   updatedAt?: number;
   
   // Persist the last error; real-time errors come from context.errorMessage.
@@ -190,7 +193,7 @@ export interface Session {
   parentSessionId?: string;
 
   /** Session kind for UI grouping. */
-  sessionKind?: 'normal' | 'btw';
+  sessionKind: SessionKind;
 
   /**
    * Lightweight markers for /btw threads created from this session.
diff --git a/src/web-ui/src/flow_chat/utils/sessionMetadata.test.ts b/src/web-ui/src/flow_chat/utils/sessionMetadata.test.ts
new file mode 100644
index 00000000..5eb30a16
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/sessionMetadata.test.ts
@@ -0,0 +1,261 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { Session } from '../types/flow-chat';
+import type { SessionMetadata } from '@/shared/types/session-history';
+
+vi.mock('@/infrastructure/i18n', () => ({
+  i18nService: {
+    t: (key: string) => key,
+  },
+}));
+
+import {
+  buildSessionMetadata,
+  deriveLastFinishedAtFromMetadata,
+  deriveSessionRelationshipFromMetadata,
+  normalizeSessionRelationship,
+  resolveSessionRelationship,
+} from './sessionMetadata';
+
+function createSession(overrides: Partial<Session> = {}): Session {
+  return {
+    sessionId: 'session-1',
+    title: 'Session Title',
+    titleStatus: 'generated',
+    dialogTurns: [],
+    status: 'idle',
+    config: {
+      modelName: 'gpt-test',
+      agentType: 'agentic',
+    },
+    createdAt: 1000,
+    lastActiveAt: 1000,
+    error: null,
+    todos: [],
+    maxContextTokens: 128128,
+    mode: 'agentic',
+    workspacePath: '/workspace',
+    parentSessionId: undefined,
+    sessionKind: 'normal',
+    lastFinishedAt: undefined,
+    btwThreads: [],
+    btwOrigin: undefined,
+    ...overrides,
+  };
+}
+
+describe('sessionMetadata', () => {
+  it('normalizes runtime sessions to an explicit normal kind', () => {
+    expect(normalizeSessionRelationship({})).toEqual({
+      sessionKind: 'normal',
+      parentSessionId: undefined,
+      btwOrigin: undefined,
+    });
+  });
+
+  it('builds btw metadata without dropping existing fields', () => {
+    const session = createSession({
+      sessionId: 'child-1',
+      title: 'BTW Child',
+      sessionKind: 'btw',
+      parentSessionId: 'parent-1',
+      btwOrigin: {
+        requestId: 'req-1',
+        parentSessionId: 'parent-1',
+        parentDialogTurnId: 'turn-9',
+        parentTurnIndex: 9,
+      },
+      dialogTurns: [
+        {
+          id: 'turn-1',
+          sessionId: 'child-1',
+          userMessage: {
+            id: 'user-1',
+            content: 'question',
+            timestamp: 1,
+          },
+          modelRounds: [
+            {
+              id: 'round-1',
+              index: 0,
+              items: [
+                {
+                  id: 'text-1',
+                  type: 'text',
+                  content: 'answer',
+                  isStreaming: false,
+                  timestamp: 2,
+                  status: 'completed',
+                },
+              ],
+              isStreaming: false,
+              isComplete: true,
+              status: 'completed',
+              startTime: 1,
+              endTime: 2,
+            },
+          ],
+          status: 'completed',
+          startTime: 1,
+          endTime: 2,
+        },
+      ],
+    });
+
+    const existingMetadata: SessionMetadata = {
+      sessionId: 'child-1',
+      sessionName: 'Old Name',
+      agentType: 'agentic',
+      modelName: 'old-model',
+      createdAt: 10,
+      lastActiveAt: 10,
+      turnCount: 99,
+      messageCount: 99,
+      toolCallCount: 99,
+      status: 'active',
+      snapshotSessionId: 'snapshot-1',
+      tags: ['keep-me'],
+      customMetadata: {
+        unrelated: 'preserved',
+      },
+      todos: [],
+      workspacePath: '/workspace',
+    };
+
+    const metadata = buildSessionMetadata(session, existingMetadata);
+
+    expect(metadata.snapshotSessionId).toBe('snapshot-1');
+    expect(metadata.tags).toEqual(['keep-me', 'btw']);
+    expect(metadata.turnCount).toBe(99);
+    expect(metadata.messageCount).toBe(99);
+    expect(metadata.toolCallCount).toBe(99);
+    expect(metadata.customMetadata).toEqual({
+      unrelated: 'preserved',
+      kind: 'btw',
+      parentSessionId: 'parent-1',
+      parentRequestId: 'req-1',
+      parentDialogTurnId: 'turn-9',
+      parentTurnIndex: 9,
+      lastFinishedAt: null,
+    });
+  });
+
+  it('writes normal metadata explicitly and removes stale btw linkage', () => {
+    const session = createSession({
+      sessionKind: 'normal',
+      parentSessionId: undefined,
+      btwOrigin: undefined,
+    });
+
+    const metadata = buildSessionMetadata(session, {
+      sessionId: 'session-1',
+      sessionName: 'Session Title',
+      agentType: 'agentic',
+      modelName: 'gpt-test',
+      createdAt: 1000,
+      lastActiveAt: 1000,
+      turnCount: 0,
+      messageCount: 0,
+      toolCallCount: 0,
+      status: 'active',
+      tags: ['btw'],
+      customMetadata: {
+        unrelated: 'preserved',
+        kind: 'btw',
+        parentSessionId: 'stale-parent',
+        parentRequestId: 'stale-request',
+      },
+      todos: [],
+      workspacePath: '/workspace',
+    });
+
+    expect(metadata.customMetadata).toEqual({
+      unrelated: 'preserved',
+      kind: 'normal',
+      lastFinishedAt: null,
+    });
+  });
+
+  it('persists and restores lastFinishedAt without dropping unrelated metadata', () => {
+    const session = createSession({
+      lastFinishedAt: 4321,
+    });
+
+    const metadata = buildSessionMetadata(session, {
+      sessionId: 'session-1',
+      sessionName: 'Session Title',
+      agentType: 'agentic',
+      modelName: 'gpt-test',
+      createdAt: 1000,
+      lastActiveAt: 1000,
+      turnCount: 0,
+      messageCount: 0,
+      toolCallCount: 0,
+      status: 'active',
+      tags: [],
+      customMetadata: {
+        unrelated: 'preserved',
+      },
+      todos: [],
+      workspacePath: '/workspace',
+    });
+
+    expect(metadata.customMetadata).toEqual({
+      unrelated: 'preserved',
+      kind: 'normal',
+      lastFinishedAt: 4321,
+    });
+    expect(deriveLastFinishedAtFromMetadata(metadata)).toBe(4321);
+  });
+
+  it('round-trips btw identity through persistence and UI selectors', () => {
+    const metadata: SessionMetadata = {
+      sessionId: 'child-1',
+      sessionName: 'BTW Child',
+      agentType: 'agentic',
+      modelName: 'gpt-test',
+      createdAt: 1000,
+      lastActiveAt: 1001,
+      turnCount: 1,
+      messageCount: 2,
+      toolCallCount: 0,
+      status: 'active',
+      tags: ['btw'],
+      customMetadata: {
+        kind: 'btw',
+        parentSessionId: 'parent-1',
+        parentRequestId: 'req-1',
+        parentDialogTurnId: 'turn-2',
+        parentTurnIndex: 2,
+      },
+      todos: [],
+      workspacePath: '/workspace',
+    };
+
+    const relationship = deriveSessionRelationshipFromMetadata(metadata);
+    const resolved = resolveSessionRelationship(relationship);
+
+    expect(relationship).toEqual({
+      sessionKind: 'btw',
+      parentSessionId: 'parent-1',
+      btwOrigin: {
+        requestId: 'req-1',
+        parentSessionId: 'parent-1',
+        parentDialogTurnId: 'turn-2',
+        parentTurnIndex: 2,
+      },
+    });
+    expect(resolved).toEqual({
+      kind: 'btw',
+      isBtw: true,
+      parentSessionId: 'parent-1',
+      displayAsChild: true,
+      canOpenInAuxPane: true,
+      origin: {
+        requestId: 'req-1',
+        parentSessionId: 'parent-1',
+        parentDialogTurnId: 'turn-2',
+        parentTurnIndex: 2,
+      },
+    });
+  });
+});
diff --git a/src/web-ui/src/flow_chat/utils/sessionMetadata.ts b/src/web-ui/src/flow_chat/utils/sessionMetadata.ts
new file mode 100644
index 00000000..3d164d8d
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/sessionMetadata.ts
@@ -0,0 +1,249 @@
+import { i18nService } from '@/infrastructure/i18n';
+import type {
+  SessionCustomMetadata,
+  SessionKind,
+  SessionMetadata,
+} from '@/shared/types/session-history';
+import type { Session } from '../types/flow-chat';
+
+const BTW_TAG = 'btw';
+const RELATIONSHIP_METADATA_KEYS = new Set([
+  'kind',
+  'parentSessionId',
+  'parentRequestId',
+  'parentDialogTurnId',
+  'parentTurnIndex',
+]);
+
+type SessionRelationshipInput = Pick<Session, 'sessionKind' | 'parentSessionId' | 'btwOrigin'>;
+
+export interface ResolvedSessionRelationship {
+  kind: SessionKind;
+  isBtw: boolean;
+  parentSessionId?: string;
+  displayAsChild: boolean;
+  canOpenInAuxPane: boolean;
+  origin?: Session['btwOrigin'];
+}
+
+function normalizeString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function normalizeTurnIndex(value: unknown): number | undefined {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+
+  if (typeof value === 'string' && value.trim()) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+
+  return undefined;
+}
+
+export function normalizeSessionKind(value: unknown): SessionKind {
+  return value === 'btw' ? 'btw' : 'normal';
+}
+
+export function normalizeSessionRelationship(
+  input?: Partial<SessionRelationshipInput> | null
+): Pick<Session, 'sessionKind' | 'parentSessionId' | 'btwOrigin'> {
+  const sessionKind = normalizeSessionKind(input?.sessionKind);
+  const parentSessionId = normalizeString(
+    input?.btwOrigin?.parentSessionId ?? input?.parentSessionId
+  );
+
+  if (sessionKind !== 'btw') {
+    return {
+      sessionKind,
+      parentSessionId: undefined,
+      btwOrigin: undefined,
+    };
+  }
+
+  const origin: Session['btwOrigin'] = {
+    requestId: normalizeString(input?.btwOrigin?.requestId),
+    parentSessionId,
+    parentDialogTurnId: normalizeString(input?.btwOrigin?.parentDialogTurnId),
+    parentTurnIndex: normalizeTurnIndex(input?.btwOrigin?.parentTurnIndex),
+  };
+
+  return {
+    sessionKind,
+    parentSessionId,
+    btwOrigin: origin,
+  };
+}
+
+export function resolveSessionRelationship(
+  input?: Partial<SessionRelationshipInput> | null
+): ResolvedSessionRelationship {
+  const normalized = normalizeSessionRelationship(input);
+  const isBtw = normalized.sessionKind === 'btw';
+
+  return {
+    kind: normalized.sessionKind,
+    isBtw,
+    parentSessionId: normalized.parentSessionId,
+    displayAsChild: Boolean(normalized.parentSessionId),
+    canOpenInAuxPane: Boolean(isBtw && normalized.parentSessionId),
+    origin: normalized.btwOrigin,
+  };
+}
+
+export function deriveSessionRelationshipFromMetadata(
+  metadata?: Pick<SessionMetadata, 'customMetadata'> | null
+): Pick<Session, 'sessionKind' | 'parentSessionId' | 'btwOrigin'> {
+  const customMetadata = metadata?.customMetadata;
+  const sessionKind = normalizeSessionKind(customMetadata?.kind);
+
+  return normalizeSessionRelationship({
+    sessionKind,
+    parentSessionId: customMetadata?.parentSessionId ?? undefined,
+    btwOrigin:
+      sessionKind === 'btw'
+        ? {
+            requestId: normalizeString(customMetadata?.parentRequestId),
+            parentSessionId: normalizeString(customMetadata?.parentSessionId),
+            parentDialogTurnId: normalizeString(customMetadata?.parentDialogTurnId),
+            parentTurnIndex: normalizeTurnIndex(customMetadata?.parentTurnIndex),
+          }
+        : undefined,
+  });
+}
+
+export function deriveLastFinishedAtFromMetadata(
+  metadata?: Pick<SessionMetadata, 'customMetadata'> | null
+): number | undefined {
+  const value = metadata?.customMetadata?.lastFinishedAt;
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+export function calculateSessionStats(
+  session: Pick<Session, 'dialogTurns'>
+): Pick<SessionMetadata, 'turnCount' | 'messageCount' | 'toolCallCount'> {
+  const turnCount = session.dialogTurns.length;
+  const messageCount = session.dialogTurns.reduce((sum, turn) => {
+    return (
+      sum +
+      1 +
+      turn.modelRounds.reduce((roundSum, round) => {
+        return roundSum + round.items.filter(item => item.type === 'text').length;
+      }, 0)
+    );
+  }, 0);
+  const toolCallCount = session.dialogTurns.reduce((sum, turn) => {
+    return sum + turn.modelRounds.reduce((roundSum, round) => {
+      return roundSum + round.items.filter(item => item.type === 'tool').length;
+    }, 0);
+  }, 0);
+
+  return { turnCount, messageCount, toolCallCount };
+}
+
+function buildSessionCustomMetadata(
+  session: Pick<Session, 'sessionKind' | 'parentSessionId' | 'btwOrigin' | 'lastFinishedAt'>,
+  existingCustomMetadata?: SessionCustomMetadata
+): SessionCustomMetadata {
+  const normalized = normalizeSessionRelationship(session);
+  const nextCustomMetadata: SessionCustomMetadata = {};
+
+  for (const [key, value] of Object.entries(existingCustomMetadata || {})) {
+    if (!RELATIONSHIP_METADATA_KEYS.has(key)) {
+      nextCustomMetadata[key] = value;
+    }
+  }
+
+  nextCustomMetadata.kind = normalized.sessionKind;
+
+  if (normalized.sessionKind === 'btw') {
+    nextCustomMetadata.parentSessionId = normalized.parentSessionId ?? null;
+    nextCustomMetadata.parentRequestId = normalized.btwOrigin?.requestId ?? null;
+    nextCustomMetadata.parentDialogTurnId =
+      normalized.btwOrigin?.parentDialogTurnId ?? null;
+    nextCustomMetadata.parentTurnIndex =
+      normalized.btwOrigin?.parentTurnIndex ?? null;
+  }
+
+  nextCustomMetadata.lastFinishedAt = session.lastFinishedAt ?? null;
+
+  return nextCustomMetadata;
+}
+
+function buildSessionTags(
+  sessionKind: SessionKind,
+  existingTags?: string[]
+): string[] {
+  const baseTags = Array.isArray(existingTags) ? [...existingTags] : [];
+
+  if (sessionKind === 'btw' && !baseTags.includes(BTW_TAG)) {
+    baseTags.push(BTW_TAG);
+  }
+
+  return baseTags;
+}
+
+export function buildSessionMetadata(
+  session: Pick<
+    Session,
+    | 'sessionId'
+    | 'title'
+    | 'mode'
+    | 'config'
+    | 'createdAt'
+    | 'workspacePath'
+    | 'todos'
+    | 'dialogTurns'
+    | 'sessionKind'
+    | 'parentSessionId'
+    | 'btwOrigin'
+    | 'lastFinishedAt'
+  >,
+  existingMetadata?: SessionMetadata | null
+): SessionMetadata {
+  const stats = calculateSessionStats(session);
+  const sessionKind = normalizeSessionKind(session.sessionKind);
+
+  return {
+    ...existingMetadata,
+    sessionId: session.sessionId,
+    sessionName:
+      session.title ||
+      existingMetadata?.sessionName ||
+      i18nService.t('flow-chat:session.new'),
+    agentType:
+      session.mode ||
+      session.config.agentType ||
+      existingMetadata?.agentType ||
+      'agentic',
+    modelName:
+      session.config.modelName || existingMetadata?.modelName || 'auto',
+    createdAt: existingMetadata?.createdAt ?? session.createdAt,
+    lastActiveAt: Date.now(),
+    turnCount: Math.max(stats.turnCount, existingMetadata?.turnCount ?? 0),
+    messageCount: Math.max(
+      stats.messageCount,
+      existingMetadata?.messageCount ?? 0
+    ),
+    toolCallCount: Math.max(
+      stats.toolCallCount,
+      existingMetadata?.toolCallCount ?? 0
+    ),
+    status: 'active',
+    snapshotSessionId: existingMetadata?.snapshotSessionId,
+    tags: buildSessionTags(sessionKind, existingMetadata?.tags),
+    customMetadata: buildSessionCustomMetadata(
+      {
+        sessionKind,
+        parentSessionId: session.parentSessionId,
+        btwOrigin: session.btwOrigin,
+        lastFinishedAt: session.lastFinishedAt,
+      },
+      existingMetadata?.customMetadata
+    ),
+    todos: session.todos || existingMetadata?.todos || [],
+    workspacePath: session.workspacePath || existingMetadata?.workspacePath,
+  };
+}
diff --git a/src/web-ui/src/flow_chat/utils/sessionOrdering.test.ts b/src/web-ui/src/flow_chat/utils/sessionOrdering.test.ts
new file mode 100644
index 00000000..25ec85fc
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/sessionOrdering.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import type { Session } from '../types/flow-chat';
+import { compareSessionsForDisplay, getSessionSortTimestamp } from './sessionOrdering';
+
+function createSession(overrides: Partial<Session> = {}): Session {
+  return {
+    sessionId: 'session-1',
+    title: 'Session Title',
+    titleStatus: 'generated',
+    dialogTurns: [],
+    status: 'idle',
+    config: {
+      modelName: 'gpt-test',
+      agentType: 'agentic',
+    },
+    createdAt: 1000,
+    lastActiveAt: 1000,
+    lastFinishedAt: undefined,
+    error: null,
+    todos: [],
+    maxContextTokens: 128128,
+    mode: 'agentic',
+    workspacePath: '/workspace',
+    parentSessionId: undefined,
+    sessionKind: 'normal',
+    btwThreads: [],
+    btwOrigin: undefined,
+    ...overrides,
+  };
+}
+
+describe('sessionOrdering', () => {
+  it('uses createdAt for sessions without completed tasks', () => {
+    const session = createSession({ createdAt: 1234 });
+    expect(getSessionSortTimestamp(session)).toBe(1234);
+  });
+
+  it('sorts sessions by lastFinishedAt before createdAt', () => {
+    const sessions = [
+      createSession({ sessionId: 'older-new', createdAt: 1000 }),
+      createSession({ sessionId: 'completed', createdAt: 500, lastFinishedAt: 3000 }),
+      createSession({ sessionId: 'newest-new', createdAt: 2000 }),
+    ];
+
+    const orderedIds = [...sessions].sort(compareSessionsForDisplay).map(session => session.sessionId);
+    expect(orderedIds).toEqual(['completed', 'newest-new', 'older-new']);
+  });
+
+  it('falls back to stable ordering when timestamps are equal', () => {
+    const sessions = [
+      createSession({ sessionId: 'b', createdAt: 1000 }),
+      createSession({ sessionId: 'a', createdAt: 1000 }),
+    ];
+
+    const orderedIds = [...sessions].sort(compareSessionsForDisplay).map(session => session.sessionId);
+    expect(orderedIds).toEqual(['a', 'b']);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/utils/sessionOrdering.ts b/src/web-ui/src/flow_chat/utils/sessionOrdering.ts
new file mode 100644
index 00000000..bce27712
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/sessionOrdering.ts
@@ -0,0 +1,22 @@
+import type { Session } from '../types/flow-chat';
+
+export function getSessionSortTimestamp(session: Pick<Session, 'createdAt' | 'lastFinishedAt'>): number {
+  return session.lastFinishedAt ?? session.createdAt;
+}
+
+export function compareSessionsForDisplay(
+  a: Pick<Session, 'sessionId' | 'createdAt' | 'lastFinishedAt'>,
+  b: Pick<Session, 'sessionId' | 'createdAt' | 'lastFinishedAt'>
+): number {
+  const timestampDiff = getSessionSortTimestamp(b) - getSessionSortTimestamp(a);
+  if (timestampDiff !== 0) {
+    return timestampDiff;
+  }
+
+  const createdAtDiff = b.createdAt - a.createdAt;
+  if (createdAtDiff !== 0) {
+    return createdAtDiff;
+  }
+
+  return a.sessionId.localeCompare(b.sessionId);
+}
diff --git a/src/web-ui/src/infrastructure/api/service-api/GlobalAPI.ts b/src/web-ui/src/infrastructure/api/service-api/GlobalAPI.ts
index 41bb5317..1fda2d07 100644
--- a/src/web-ui/src/infrastructure/api/service-api/GlobalAPI.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/GlobalAPI.ts
@@ -66,6 +66,10 @@ export interface SetActiveWorkspaceRequest {
   workspaceId: string;
 }
 
+export interface ReorderOpenedWorkspacesRequest {
+  workspaceIds: string[];
+}
+
 export interface DeleteAssistantWorkspaceRequest {
   workspaceId: string;
 }
@@ -154,6 +158,16 @@ export class GlobalAPI {
     }
   }
 
+  async reorderOpenedWorkspaces(workspaceIds: string[]): Promise<void> {
+    try {
+      await api.invoke('reorder_opened_workspaces', {
+        request: { workspaceIds }
+      });
+    } catch (error) {
+      throw createTauriCommandError('reorder_opened_workspaces', error, { workspaceIds });
+    }
+  }
+
   async deleteAssistantWorkspace(workspaceId: string): Promise<void> {
     try {
       await api.invoke('delete_assistant_workspace', {
diff --git a/src/web-ui/src/infrastructure/contexts/WorkspaceContext.tsx b/src/web-ui/src/infrastructure/contexts/WorkspaceContext.tsx
index 8bdd7ab8..40f745ad 100644
--- a/src/web-ui/src/infrastructure/contexts/WorkspaceContext.tsx
+++ b/src/web-ui/src/infrastructure/contexts/WorkspaceContext.tsx
@@ -32,6 +32,12 @@ interface WorkspaceContextValue extends WorkspaceState {
   resetAssistantWorkspace: (workspaceId: string) => Promise<WorkspaceInfo>;
   switchWorkspace: (workspace: WorkspaceInfo) => Promise<WorkspaceInfo>;
   setActiveWorkspace: (workspaceId: string) => Promise<WorkspaceInfo>;
+  reorderOpenedWorkspacesInSection: (
+    section: 'assistants' | 'projects',
+    sourceWorkspaceId: string,
+    targetWorkspaceId: string,
+    position: 'before' | 'after'
+  ) => Promise<void>;
   scanWorkspaceInfo: () => Promise<WorkspaceInfo | null>;
   refreshRecentWorkspaces: () => Promise<void>;
   hasWorkspace: boolean;
@@ -130,6 +136,20 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({ children }
     return await workspaceManager.setActiveWorkspace(workspaceId);
   }, []);
 
+  const reorderOpenedWorkspacesInSection = useCallback(async (
+    section: 'assistants' | 'projects',
+    sourceWorkspaceId: string,
+    targetWorkspaceId: string,
+    position: 'before' | 'after'
+  ): Promise<void> => {
+    return await workspaceManager.reorderOpenedWorkspacesInSection(
+      section,
+      sourceWorkspaceId,
+      targetWorkspaceId,
+      position
+    );
+  }, []);
+
   const scanWorkspaceInfo = useCallback(async (): Promise<WorkspaceInfo | null> => {
     return await workspaceManager.scanWorkspaceInfo();
   }, []);
@@ -175,6 +195,7 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({ children }
     resetAssistantWorkspace,
     switchWorkspace,
     setActiveWorkspace,
+    reorderOpenedWorkspacesInSection,
     scanWorkspaceInfo,
     refreshRecentWorkspaces,
     hasWorkspace,
diff --git a/src/web-ui/src/infrastructure/services/business/workspaceManager.ts b/src/web-ui/src/infrastructure/services/business/workspaceManager.ts
index 2c5b2d06..bcaeeabf 100644
--- a/src/web-ui/src/infrastructure/services/business/workspaceManager.ts
+++ b/src/web-ui/src/infrastructure/services/business/workspaceManager.ts
@@ -36,6 +36,9 @@ export interface WorkspaceState {
   error: string | null;
 }
 
+export type WorkspaceSection = 'assistants' | 'projects';
+export type WorkspaceReorderPosition = 'before' | 'after';
+
 class WorkspaceManager {
   private static instance: WorkspaceManager | null = null;
   private state: WorkspaceState;
@@ -119,6 +122,95 @@ class WorkspaceManager {
     return new Map(workspaces.map(workspace => [workspace.id, workspace]));
   }
 
+  private getOpenedWorkspacesList(): WorkspaceInfo[] {
+    return Array.from(this.state.openedWorkspaces.values());
+  }
+
+  private isWorkspaceInSection(workspace: WorkspaceInfo, section: WorkspaceSection): boolean {
+    return section === 'assistants'
+      ? workspace.workspaceKind === 'assistant'
+      : workspace.workspaceKind !== 'assistant';
+  }
+
+  private preserveOpenedWorkspaceOrder(workspaces: WorkspaceInfo[]): WorkspaceInfo[] {
+    const currentOrder = Array.from(this.state.openedWorkspaces.keys());
+    const nextWorkspaceMap = this.buildOpenedWorkspaceMap(workspaces);
+    const orderedWorkspaces = currentOrder
+      .map(workspaceId => nextWorkspaceMap.get(workspaceId))
+      .filter((workspace): workspace is WorkspaceInfo => Boolean(workspace));
+
+    const existingIds = new Set(orderedWorkspaces.map(workspace => workspace.id));
+
+    for (const workspace of workspaces) {
+      if (!existingIds.has(workspace.id)) {
+        orderedWorkspaces.push(workspace);
+      }
+    }
+
+    return orderedWorkspaces;
+  }
+
+  private buildReorderedOpenedWorkspaceIds(
+    section: WorkspaceSection,
+    sourceWorkspaceId: string,
+    targetWorkspaceId: string,
+    position: WorkspaceReorderPosition
+  ): string[] | null {
+    if (sourceWorkspaceId === targetWorkspaceId) {
+      return null;
+    }
+
+    const openedWorkspaces = this.getOpenedWorkspacesList();
+    const workspaceMap = this.buildOpenedWorkspaceMap(openedWorkspaces);
+    const sourceWorkspace = workspaceMap.get(sourceWorkspaceId);
+    const targetWorkspace = workspaceMap.get(targetWorkspaceId);
+
+    if (!sourceWorkspace || !targetWorkspace) {
+      return null;
+    }
+
+    if (
+      !this.isWorkspaceInSection(sourceWorkspace, section) ||
+      !this.isWorkspaceInSection(targetWorkspace, section)
+    ) {
+      return null;
+    }
+
+    const sectionWorkspaceIds = openedWorkspaces
+      .filter(workspace => this.isWorkspaceInSection(workspace, section))
+      .map(workspace => workspace.id);
+    const sourceIndex = sectionWorkspaceIds.indexOf(sourceWorkspaceId);
+    const targetIndex = sectionWorkspaceIds.indexOf(targetWorkspaceId);
+
+    if (sourceIndex === -1 || targetIndex === -1) {
+      return null;
+    }
+
+    const reorderedSectionWorkspaceIds = [...sectionWorkspaceIds];
+    reorderedSectionWorkspaceIds.splice(sourceIndex, 1);
+
+    const insertionBaseIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex;
+    const insertionIndex = position === 'after'
+      ? insertionBaseIndex + 1
+      : insertionBaseIndex;
+
+    reorderedSectionWorkspaceIds.splice(insertionIndex, 0, sourceWorkspaceId);
+
+    const reorderedOpenedWorkspaceIds: string[] = [];
+    let sectionCursor = 0;
+
+    for (const workspace of openedWorkspaces) {
+      if (this.isWorkspaceInSection(workspace, section)) {
+        reorderedOpenedWorkspaceIds.push(reorderedSectionWorkspaceIds[sectionCursor]);
+        sectionCursor += 1;
+      } else {
+        reorderedOpenedWorkspaceIds.push(workspace.id);
+      }
+    }
+
+    return reorderedOpenedWorkspaceIds;
+  }
+
   private resolveLastUsedWorkspaceId(
     currentWorkspace: WorkspaceInfo | null,
     recentWorkspaces: WorkspaceInfo[],
@@ -466,11 +558,12 @@ class WorkspaceManager {
         globalStateAPI.getRecentWorkspaces(),
         globalStateAPI.getOpenedWorkspaces(),
       ]);
+      const orderedOpenedWorkspaces = this.preserveOpenedWorkspaceOrder(openedWorkspaces);
 
       this.updateWorkspaceState(
         workspace,
         recentWorkspaces,
-        openedWorkspaces,
+        orderedOpenedWorkspaces,
         false,
         null,
         { type: 'workspace:switched', workspace }
@@ -486,6 +579,78 @@ class WorkspaceManager {
     }
   }
 
+  public async reorderOpenedWorkspacesInSection(
+    section: WorkspaceSection,
+    sourceWorkspaceId: string,
+    targetWorkspaceId: string,
+    position: WorkspaceReorderPosition
+  ): Promise<void> {
+    const previousCurrentWorkspace = this.state.currentWorkspace;
+    const previousRecentWorkspaces = this.state.recentWorkspaces;
+    const previousOpenedWorkspaces = this.getOpenedWorkspacesList();
+    const reorderedOpenedWorkspaceIds = this.buildReorderedOpenedWorkspaceIds(
+      section,
+      sourceWorkspaceId,
+      targetWorkspaceId,
+      position
+    );
+
+    if (!reorderedOpenedWorkspaceIds) {
+      return;
+    }
+
+    const currentOpenedWorkspaceIds = previousOpenedWorkspaces.map(workspace => workspace.id);
+    const hasOrderChanged = reorderedOpenedWorkspaceIds.some(
+      (workspaceId, index) => workspaceId !== currentOpenedWorkspaceIds[index]
+    );
+
+    if (!hasOrderChanged) {
+      return;
+    }
+
+    const workspaceMap = this.buildOpenedWorkspaceMap(previousOpenedWorkspaces);
+    const reorderedOpenedWorkspaces = reorderedOpenedWorkspaceIds
+      .map(workspaceId => workspaceMap.get(workspaceId))
+      .filter((workspace): workspace is WorkspaceInfo => Boolean(workspace));
+    const reorderedEventWorkspace = previousCurrentWorkspace
+      ?? workspaceMap.get(sourceWorkspaceId)
+      ?? reorderedOpenedWorkspaces[0]
+      ?? previousOpenedWorkspaces[0];
+
+    if (!reorderedEventWorkspace) {
+      return;
+    }
+
+    this.updateWorkspaceState(
+      previousCurrentWorkspace,
+      previousRecentWorkspaces,
+      reorderedOpenedWorkspaces,
+      false,
+      null,
+      { type: 'workspace:updated', workspace: reorderedEventWorkspace }
+    );
+
+    try {
+      await globalStateAPI.reorderOpenedWorkspaces(reorderedOpenedWorkspaceIds);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      const rollbackEventWorkspace = previousCurrentWorkspace
+        ?? workspaceMap.get(sourceWorkspaceId)
+        ?? previousOpenedWorkspaces[0]
+        ?? reorderedEventWorkspace;
+      this.updateWorkspaceState(
+        previousCurrentWorkspace,
+        previousRecentWorkspaces,
+        previousOpenedWorkspaces,
+        false,
+        errorMessage,
+        { type: 'workspace:updated', workspace: rollbackEventWorkspace }
+      );
+      this.emit({ type: 'workspace:error', error: errorMessage });
+      throw error;
+    }
+  }
+
   public async switchWorkspace(workspace: WorkspaceInfo): Promise<WorkspaceInfo> {
     if (this.state.currentWorkspace?.id === workspace.id) {
       return workspace;
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index 4771c63e..47716b4f 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -89,16 +89,7 @@
       "persona": "Agent profile — identity, rules, memory, knowledge & capabilities",
       "agents": "Which Agents and Agent Teams it can call",
       "skills": "What it knows — specialized knowledge files",
-      "tools": "What it can use — built-in tools & MCP services",
-      "toolbox": "Generated in chat, ready to use"
-    },
-    "toolbox": {
-      "openGallery": "Open Mini App",
-      "newMiniApp": "New Mini App",
-      "noApps": "Mini Apps are generated instantly during conversations with AI. Open one to use it right away and keep iterating.",
-      "runningApps": "Running",
-      "myApps": "Opened",
-      "stop": "Stop"
+      "tools": "What it can use — built-in tools & MCP services"
     },
     "sections": {
       "workspace": "Workspace",
@@ -175,6 +166,9 @@
       "assistantDeleted": "Personal assistant deleted",
       "resetWorkspaceFailed": "Failed to reset workspace",
       "workspaceReset": "Workspace reset",
+      "reorderFailed": "Failed to reorder workspaces",
+      "dropBefore": "Release to insert before",
+      "dropAfter": "Release to insert after",
       "revealFailed": "Failed to reveal workspace folder",
       "createSessionFailed": "Failed to create session",
       "worktreeCreated": "Worktree created",
@@ -655,7 +649,7 @@
     "capabilities": "Capabilities",
     "agents": "Agents",
     "skills": "Skills",
-    "toolbox": "Mini App",
+    "miniApps": "Mini App",
     "myAgent": "My Agent",
     "shell": "Shell"
   },
@@ -675,7 +669,7 @@
     "openOtherProject": "Open",
     "newProject": "New",
     "noOtherWorkspaces": "No other workspaces",
-    "emptyHint": "Open a scene to get started",
+    "emptyHint": "Pick a scene and let's build something great",
     "firstTime": {
       "title": "Welcome to BitFun",
       "subtitle": "Your AI coding companion — turn ideas into reality in an instant.",
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index e8838ac3..782fb690 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -121,7 +121,8 @@
     "selectPromptTemplate": "Select prompt template (Ctrl+Shift+P)",
     "willSendAfterStop": "Will send after stop",
     "openWorkspaceFolder": "Open workspace folder",
-    "openWorkspaceFolderFailed": "Failed to open workspace folder: {{error}}"
+    "openWorkspaceFolderFailed": "Failed to open workspace folder: {{error}}",
+    "spaceToActivate": "Space to type"
   },
   "context": {
     "title": "Context",
@@ -271,6 +272,7 @@
     "cancel": "Stop",
     "openThread": "Open thread",
     "threadLabel": "Side thread",
+    "emptyThreadLabel": "No {{label}} open",
     "origin": "Asked from",
     "parent": "parent session",
     "turnLabel": "turn {{index}}",
@@ -800,6 +802,12 @@
     "subtitleEveningCowork": "Wrap up, reflect, or set the stage for tomorrow — all good here",
     "subtitleNightCowork": "Late nights are great for planning and clearing your head",
     "aiPartnerCowork": "Flow Partner",
+    "aiPartnerClaw": "I'm your assistant",
+    "subtitleMorningClaw": "What can I help you with today?",
+    "subtitleAfternoonClaw": "What can I help you with?",
+    "subtitleEveningClaw": "What can I help you with?",
+    "subtitleNightClaw": "Still up? What's on your mind?",
+    "narrativeClaw": "Brainstorm, draft, research, or just think out loud — whatever you need, just tell me.",
     "featureIntro": "",
     "featureIntroCowork": "",
     "lastTimeYouWere": "Last time you were working on:",
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index 59c3d2f4..45690572 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -89,16 +89,7 @@
       "persona": "智能体档案 — 身份、规则、记忆、知识与能力",
       "agents": "它能调用哪些 Agent 与 Agent Team",
       "skills": "它懂什么专项知识 — 技能知识文件",
-      "tools": "它能用什么工具 — 内置工具与 MCP 服务",
-      "toolbox": "边聊边生成，马上可用"
-    },
-    "toolbox": {
-      "openGallery": "打开小应用",
-      "newMiniApp": "新建小应用",
-      "noApps": "即时生成的小应用，打开就能用，也能继续迭代。",
-      "runningApps": "运行中",
-      "myApps": "已打开",
-      "stop": "停止"
+      "tools": "它能用什么工具 — 内置工具与 MCP 服务"
     },
     "sections": {
       "workspace": "工作区",
@@ -175,6 +166,9 @@
       "assistantDeleted": "已删除个人助理",
       "resetWorkspaceFailed": "重置工作区失败",
       "workspaceReset": "已重置工作区",
+      "reorderFailed": "调整工作区顺序失败",
+      "dropBefore": "松开后插入到此项前",
+      "dropAfter": "松开后插入到此项后",
       "revealFailed": "打开工作区目录失败",
       "createSessionFailed": "新建会话失败",
       "worktreeCreated": "已创建 worktree",
@@ -655,7 +649,7 @@
     "capabilities": "能力配置",
     "agents": "智能体",
     "skills": "技能",
-    "toolbox": "小应用",
+    "miniApps": "小应用",
     "myAgent": "我的智能体",
     "shell": "Shell"
   },
@@ -675,7 +669,7 @@
     "openOtherProject": "打开",
     "newProject": "新建",
     "noOtherWorkspaces": "暂无其他工作区",
-    "emptyHint": "打开一个场景开始工作",
+    "emptyHint": "选一个场景，开始今天的创作吧",
     "firstTime": {
       "title": "欢迎使用 BitFun",
       "subtitle": "你的 AI 编程伙伴，让创意瞬间成为现实",
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index ab12bfe0..a7516cf5 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -121,7 +121,8 @@
     "selectPromptTemplate": "选择提示词模板 (Ctrl+Shift+P)",
     "willSendAfterStop": "将在停止后发送",
     "openWorkspaceFolder": "打开工作区文件夹",
-    "openWorkspaceFolderFailed": "打开工作区文件夹失败：{{error}}"
+    "openWorkspaceFolderFailed": "打开工作区文件夹失败：{{error}}",
+    "spaceToActivate": "空格激活"
   },
   "context": {
     "title": "上下文",
@@ -271,6 +272,7 @@
     "cancel": "停止",
     "openThread": "打开子会话",
     "threadLabel": "子会话",
+    "emptyThreadLabel": "暂未打开{{label}}",
     "origin": "来自",
     "parent": "父会话",
     "turnLabel": "第 {{index}} 轮",
@@ -794,6 +796,12 @@
     "subtitleEveningCowork": "收尾、复盘、或是为明天做准备——都行",
     "subtitleNightCowork": "夜深了，适合规划和沉淀，有什么想梳理的？",
     "aiPartnerCowork": "心流伙伴",
+    "aiPartnerClaw": "我是你的助理",
+    "subtitleMorningClaw": "今天有什么需要帮忙的？",
+    "subtitleAfternoonClaw": "有什么需要帮忙的？",
+    "subtitleEveningClaw": "有什么需要帮忙的？",
+    "subtitleNightClaw": "夜深了，有什么还放不下的？",
+    "narrativeClaw": "整理思路、起草文字、搜集信息，或者只是随便聊聊——有什么需要，直接告诉我。",
     "featureIntro": "",
     "featureIntroCowork": "",
     "lastTimeYouWere": "上次您正在处理：",
diff --git a/src/web-ui/src/main.tsx b/src/web-ui/src/main.tsx
index e025ed55..2e558b39 100644
--- a/src/web-ui/src/main.tsx
+++ b/src/web-ui/src/main.tsx
@@ -118,6 +118,19 @@ function registerGlobalErrorHandlers() {
 
 registerGlobalErrorHandlers();
 
+// Disable Tab-key focus traversal globally.
+// Tab still works inside Monaco Editor and xterm terminal where it has semantic meaning.
+document.addEventListener(
+  'keydown',
+  (e: KeyboardEvent) => {
+    if (e.key !== 'Tab') return;
+    const target = e.target as Element | null;
+    if (target?.closest('.monaco-editor, .xterm')) return;
+    e.preventDefault();
+  },
+  true
+);
+
 // Configure Monaco Editor loader - use local files (offline-ready).
 const isDev = import.meta.env.DEV;
 const monacoPath = getMonacoPath();
diff --git a/src/web-ui/src/shared/services/openShellSessionTarget.ts b/src/web-ui/src/shared/services/openShellSessionTarget.ts
new file mode 100644
index 00000000..e438a962
--- /dev/null
+++ b/src/web-ui/src/shared/services/openShellSessionTarget.ts
@@ -0,0 +1,45 @@
+import type { SceneTabId } from '@/app/components/SceneBar/types';
+import { useSceneStore } from '@/app/stores/sceneStore';
+import { useTerminalSceneStore } from '@/app/stores/terminalSceneStore';
+import { createTerminalTab } from '@/shared/utils/tabUtils';
+
+interface OpenShellSessionTargetOptions {
+  sessionId: string;
+  sessionName: string;
+}
+
+function openStandaloneShellSession(sessionId: string): void {
+  const { openScene } = useSceneStore.getState();
+  const terminalState = useTerminalSceneStore.getState();
+
+  openScene('shell' as SceneTabId);
+
+  // Force a remount when reopening the same session so the terminal view
+  // can recover from stale/error state and always reflect the latest selection.
+  if (terminalState.activeSessionId === sessionId) {
+    terminalState.setActiveSession(null);
+    window.setTimeout(() => {
+      useTerminalSceneStore.getState().setActiveSession(sessionId);
+    }, 0);
+    return;
+  }
+
+  terminalState.setActiveSession(sessionId);
+}
+
+/**
+ * Unified shell open strategy:
+ * - stay inside Agent right tabs when the active scene is session
+ * - otherwise open the standalone shell scene
+ */
+export function openShellSessionTarget(options: OpenShellSessionTargetOptions): void {
+  const { sessionId, sessionName } = options;
+  const { activeTabId } = useSceneStore.getState();
+
+  if (activeTabId === 'session') {
+    createTerminalTab(sessionId, sessionName, 'agent');
+    return;
+  }
+
+  openStandaloneShellSession(sessionId);
+}
diff --git a/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts b/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts
index 65499967..f6e92935 100644
--- a/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts
+++ b/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts
@@ -42,7 +42,7 @@ export function resolveOpenTarget(intent: OpenIntent, context: OpenTargetContext
 
   // Non-agent scenes route to their dedicated host scenes.
   if (intent === 'terminal') {
-    return { mode: 'project', targetSceneId: 'terminal', sceneJustOpened: false };
+    return { mode: 'project', targetSceneId: 'shell', sceneJustOpened: false };
   }
 
   return { mode: 'project', targetSceneId: 'file-viewer', sceneJustOpened: false };
diff --git a/src/web-ui/src/shared/types/global-state.ts b/src/web-ui/src/shared/types/global-state.ts
index aa89647c..3d5ca1d4 100644
--- a/src/web-ui/src/shared/types/global-state.ts
+++ b/src/web-ui/src/shared/types/global-state.ts
@@ -144,6 +144,7 @@ export interface GlobalStateAPI {
   resetAssistantWorkspace(workspaceId: string): Promise<WorkspaceInfo>;
   closeWorkspace(workspaceId: string): Promise<void>;
   setActiveWorkspace(workspaceId: string): Promise<WorkspaceInfo>;
+  reorderOpenedWorkspaces(workspaceIds: string[]): Promise<void>;
   getCurrentWorkspace(): Promise<WorkspaceInfo | null>;
   getOpenedWorkspaces(): Promise<WorkspaceInfo[]>;
   getRecentWorkspaces(): Promise<WorkspaceInfo[]>;
@@ -312,6 +313,10 @@ export function createGlobalStateAPI(): GlobalStateAPI {
       return mapWorkspaceInfo(await globalAPI.setActiveWorkspace(workspaceId));
     },
 
+    async reorderOpenedWorkspaces(workspaceIds: string[]): Promise<void> {
+      return await globalAPI.reorderOpenedWorkspaces(workspaceIds);
+    },
+
     async getCurrentWorkspace(): Promise<WorkspaceInfo | null> {
       const workspace = await globalAPI.getCurrentWorkspace();
       return workspace ? mapWorkspaceInfo(workspace) : null;
diff --git a/src/web-ui/src/shared/types/session-history.ts b/src/web-ui/src/shared/types/session-history.ts
index 9c1a0ec6..39c6f8b7 100644
--- a/src/web-ui/src/shared/types/session-history.ts
+++ b/src/web-ui/src/shared/types/session-history.ts
@@ -4,6 +4,17 @@
  * Used by session lists and persistence metadata in the frontend.
  */
 
+export type SessionKind = 'normal' | 'btw';
+
+export interface SessionCustomMetadata extends Record<string, unknown> {
+  kind?: SessionKind;
+  parentSessionId?: string | null;
+  parentRequestId?: string | null;
+  parentDialogTurnId?: string | null;
+  parentTurnIndex?: number | null;
+  lastFinishedAt?: number | null;
+}
+
 export interface SessionMetadata {
   sessionId: string;
   sessionName: string;
@@ -17,7 +28,7 @@ export interface SessionMetadata {
   status: SessionStatus;
   snapshotSessionId?: string;
   tags: string[];
-  customMetadata?: Record<string, any>;
+  customMetadata?: SessionCustomMetadata;
   todos?: any[];
   workspacePath?: string;
 }
diff --git a/src/web-ui/src/shared/utils/tabUtils.ts b/src/web-ui/src/shared/utils/tabUtils.ts
index 7f1a0264..0d32062e 100644
--- a/src/web-ui/src/shared/utils/tabUtils.ts
+++ b/src/web-ui/src/shared/utils/tabUtils.ts
@@ -3,8 +3,10 @@
 import { i18nService } from '@/infrastructure/i18n';
 import { fileTabManager } from '@/shared/services/FileTabManager';
 import type { FileTabOptions } from '@/shared/services/FileTabManager';
+import { enqueuePendingTab } from '@/shared/services/pendingTabQueue';
 import { resolveAndFocusOpenTarget } from '@/shared/services/sceneOpenTargetResolver';
 import type { OpenSource } from '@/shared/services/sceneOpenTargetResolver';
+import { TAB_EVENTS } from '@/app/components/panels/content-canvas/types';
 export type TabTargetMode = 'agent' | 'project' | 'git';
 
 export interface TabCreationOptions {
@@ -19,6 +21,19 @@ export interface TabCreationOptions {
   mode?: TabTargetMode;
 }
 
+interface CreateTerminalTabOptions {
+  sceneJustOpened?: boolean;
+}
+
+function isRightPanelCollapsed(): boolean {
+  try {
+    const layoutState = (window as any).__BITFUN_LAYOUT_STATE__;
+    return layoutState?.rightPanelCollapsed ?? false;
+  } catch {
+    return false;
+  }
+}
+
  
 export function createTab(options: TabCreationOptions): void {
   const {
@@ -242,25 +257,49 @@ export function createConfigCenterTab(
 export function createTerminalTab(
   sessionId: string,
   sessionName: string,
-  mode: 'agent' | 'project' = 'agent'
+  mode: 'agent' | 'project' = 'agent',
+  options: CreateTerminalTabOptions = {}
 ): void {
   const title = sessionName.length > 20 
     ? `${sessionName.slice(0, 20)}...` 
     : sessionName;
-  
-  createTab({
+
+  const detail = {
     type: 'terminal',
     title: `${title}`,
     data: { sessionId, sessionName },
-    metadata: { 
+    metadata: {
       isTerminal: true,
       sessionId,
-      duplicateCheckKey: `terminal-${sessionId}`
+      duplicateCheckKey: `terminal-${sessionId}`,
     },
     checkDuplicate: true,
     duplicateCheckKey: `terminal-${sessionId}`,
     replaceExisting: false,
-    mode
+  };
+
+  if (mode === 'agent') {
+    window.dispatchEvent(new CustomEvent(TAB_EVENTS.EXPAND_RIGHT_PANEL));
+
+    if (options.sceneJustOpened) {
+      enqueuePendingTab('agent', detail);
+      return;
+    }
+
+    if (isRightPanelCollapsed()) {
+      window.setTimeout(() => {
+        window.dispatchEvent(new CustomEvent(TAB_EVENTS.AGENT_CREATE_TAB, { detail }));
+      }, 300);
+      return;
+    }
+
+    window.dispatchEvent(new CustomEvent(TAB_EVENTS.AGENT_CREATE_TAB, { detail }));
+    return;
+  }
+
+  createTab({
+    ...detail,
+    mode,
   });
 }
 
diff --git a/src/web-ui/src/tools/terminal/components/Terminal.tsx b/src/web-ui/src/tools/terminal/components/Terminal.tsx
index f6edb1c8..d59e1b1f 100644
--- a/src/web-ui/src/tools/terminal/components/Terminal.tsx
+++ b/src/web-ui/src/tools/terminal/components/Terminal.tsx
@@ -10,6 +10,7 @@ import { WebLinksAddon } from '@xterm/addon-web-links';
 import { WebglAddon } from '@xterm/addon-webgl';
 import { TerminalResizeDebouncer } from '../utils';
 import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
+import { themeService } from '@/infrastructure/theme/core/ThemeService';
 import { createLogger } from '@/shared/utils/logger';
 import '@xterm/xterm/css/xterm.css';
 import './Terminal.scss';
@@ -120,6 +121,61 @@ export interface TerminalRef {
   getSize: () => { cols: number; rows: number } | null;
 }
 
+/**
+ * Build an xterm.js theme object from the current ThemeService state synchronously.
+ * Calling this at XTerm construction time prevents the initial black-background flash
+ * that occurs when the theme is applied asynchronously via useEffect.
+ */
+function buildXtermTheme(): TerminalOptions['theme'] {
+  const theme = themeService.getCurrentTheme();
+  const isDark = theme.type === 'dark';
+
+  const ansiColors = isDark ? {
+    black:         '#000000',
+    red:           '#cd3131',
+    green:         '#0dbc79',
+    yellow:        '#e5e510',
+    blue:          '#2472c8',
+    magenta:       '#bc3fbc',
+    cyan:          '#11a8cd',
+    white:         '#e5e5e5',
+    brightBlack:   '#666666',
+    brightRed:     '#f14c4c',
+    brightGreen:   '#23d18b',
+    brightYellow:  '#f5f543',
+    brightBlue:    '#3b8eea',
+    brightMagenta: '#d670d6',
+    brightCyan:    '#29b8db',
+    brightWhite:   '#ffffff',
+  } : {
+    black:         '#000000',
+    red:           '#c91b00',
+    green:         '#007a3d',
+    yellow:        '#b58900',
+    blue:          '#0037da',
+    magenta:       '#881798',
+    cyan:          '#0e7490',
+    white:         '#586e75',
+    brightBlack:   '#555555',
+    brightRed:     '#e74856',
+    brightGreen:   '#16a34a',
+    brightYellow:  '#a16207',
+    brightBlue:    '#0078d4',
+    brightMagenta: '#b4009e',
+    brightCyan:    '#0891b2',
+    brightWhite:   '#1e293b',
+  };
+
+  return {
+    background: theme.colors.background.scene,
+    foreground: theme.colors.text.primary,
+    cursor: theme.colors.text.primary,
+    cursorAccent: theme.colors.background.secondary,
+    selectionBackground: isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(59, 130, 246, 0.3)',
+    ...ansiColors,
+  };
+}
+
 const DEFAULT_OPTIONS: TerminalOptions = {
   fontSize: 14,
   fontFamily: "'Fira Code', 'Noto Sans SC', Consolas, 'Courier New', monospace",
@@ -127,29 +183,6 @@ const DEFAULT_OPTIONS: TerminalOptions = {
   cursorStyle: 'block',
   cursorBlink: true,
   scrollback: 10000,
-  theme: {
-    background: '#1e1e1e',
-    foreground: '#d4d4d4',
-    cursor: '#d4d4d4',
-    cursorAccent: '#1e1e1e',
-    selectionBackground: 'rgba(255, 255, 255, 0.3)',
-    black: '#000000',
-    red: '#cd3131',
-    green: '#0dbc79',
-    yellow: '#e5e510',
-    blue: '#2472c8',
-    magenta: '#bc3fbc',
-    cyan: '#11a8cd',
-    white: '#e5e5e5',
-    brightBlack: '#666666',
-    brightRed: '#f14c4c',
-    brightGreen: '#23d18b',
-    brightYellow: '#f5f543',
-    brightBlue: '#3b8eea',
-    brightMagenta: '#d670d6',
-    brightCyan: '#29b8db',
-    brightWhite: '#ffffff',
-  },
 };
 
 const Terminal = forwardRef<TerminalRef, TerminalProps>(({
@@ -178,12 +211,14 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(({
   const lastBackendSizeRef = useRef<{ cols: number; rows: number } | null>(null);
   const [isReady, setIsReady] = useState(false);
 
-  // Merge options.
+  // Merge options. Theme is resolved from ThemeService at render time so that the
+  // initial XTerm instance is created with the correct background color and avoids
+  // the black-background flash that occurs when a light theme is active.
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
     ...options,
     theme: {
-      ...DEFAULT_OPTIONS.theme,
+      ...buildXtermTheme(),
       ...options.theme,
     },
   };
@@ -555,7 +590,7 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(({
     if (!terminal || !isReady) return;
 
     const updateXtermTheme = () => {
-      import('@/infrastructure/theme/core/ThemeService').then(({ themeService }) => {
+      (() => {
         const theme = themeService.getCurrentTheme();
         const isDark = theme.type === 'dark';
 
@@ -621,18 +656,15 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(({
         terminal.options.fontWeightBold = isDark ? 'bold' : '700';
 
         forceRefresh(terminal);
-      });
+      })();
     };
 
     updateXtermTheme();
 
-    import('@/infrastructure/theme/core/ThemeService').then(({ themeService }) => {
-      const unsubscribe = themeService.on('theme:after-change', updateXtermTheme);
-
-      return () => {
-        unsubscribe?.();
-      };
-    });
+    const unsubscribe = themeService.on('theme:after-change', updateXtermTheme);
+    return () => {
+      unsubscribe?.();
+    };
   }, [isReady, forceRefresh]);
 
   return (
diff --git a/tests/e2e/specs/l1-navigation.spec.ts b/tests/e2e/specs/l1-navigation.spec.ts
index 1a21eace..a468a7cb 100644
--- a/tests/e2e/specs/l1-navigation.spec.ts
+++ b/tests/e2e/specs/l1-navigation.spec.ts
@@ -15,7 +15,7 @@ const NAV_ENTRY_SELECTORS = [
   '.bitfun-nav-panel__workspace-item-name-btn',
   '.bitfun-nav-panel__inline-item',
   '.bitfun-nav-panel__workspace-create-main',
-  '.bitfun-nav-panel__toolbox-entry',
+  '.bitfun-nav-panel__miniapp-entry',
 ];
 
 async function getNavigationEntryCounts(): Promise<Record<string, number>> {
@@ -170,7 +170,7 @@ describe('L1 Navigation', () => {
         return;
       }
 
-      const activeItems = await browser.$$('.bitfun-nav-panel__item.is-active, .bitfun-nav-panel__inline-item.is-active, .bitfun-nav-panel__toolbox-entry.is-active');
+      const activeItems = await browser.$$('.bitfun-nav-panel__item.is-active, .bitfun-nav-panel__inline-item.is-active, .bitfun-nav-panel__miniapp-entry.is-active');
       const activeCount = activeItems.length;
       console.log('[L1] Active navigation items:', activeCount);
 
@@ -191,7 +191,7 @@ describe('L1 Navigation', () => {
       }
 
       // Get initial active item
-      const initialActive = await browser.$$('.bitfun-nav-panel__item.is-active, .bitfun-nav-panel__inline-item.is-active, .bitfun-nav-panel__toolbox-entry.is-active');
+      const initialActive = await browser.$$('.bitfun-nav-panel__item.is-active, .bitfun-nav-panel__inline-item.is-active, .bitfun-nav-panel__miniapp-entry.is-active');
       const initialActiveCount = initialActive.length;
       console.log('[L1] Initial active items:', initialActiveCount);
 
@@ -229,7 +229,7 @@ describe('L1 Navigation', () => {
       }
 
       // Check for active state (don't fail if state doesn't change)
-      const afterActive = await browser.$$('.bitfun-nav-panel__item.is-active, .bitfun-nav-panel__inline-item.is-active, .bitfun-nav-panel__toolbox-entry.is-active');
+      const afterActive = await browser.$$('.bitfun-nav-panel__item.is-active, .bitfun-nav-panel__inline-item.is-active, .bitfun-nav-panel__miniapp-entry.is-active');
       console.log('[L1] Active items after click:', afterActive.length);
 
       // Verify active state detection completed