From 85c9c4e9e9f432bd60c4a5af9420559a9112040a Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sat, 24 Oct 2026 16:16:49 +0800
Subject: [PATCH] feat(web): refine project and subscription flows and add
 MiniApp demos

---
 MiniApp/Demo/background-remover/AGENTS.md     |  14 +
 MiniApp/Demo/background-remover/README.md     |  79 ++
 MiniApp/Demo/background-remover/meta.json     |  31 +
 MiniApp/Demo/background-remover/package.json  |   8 +
 .../Demo/background-remover/source/build.mjs  |  25 +
 .../source/esm_dependencies.json              |   1 +
 .../Demo/background-remover/source/index.html |  91 ++
 .../Demo/background-remover/source/package.py |  40 +
 .../Demo/background-remover/source/style.css  | 110 ++
 MiniApp/Demo/background-remover/source/ui.js  | 519 ++++++++++
 .../Demo/background-remover/source/ui/core.js | 131 +++
 .../Demo/background-remover/source/ui/i18n.js |  61 ++
 .../Demo/background-remover/source/ui/main.js | 321 ++++++
 .../Demo/background-remover/source/worker.js  |   1 +
 .../background-remover/tests/core.test.mjs    | 116 +++
 .../tests/delivery.test.mjs                   |  28 +
 MiniApp/Demo/icon-studio-v2/AGENTS.md         |  15 +
 MiniApp/Demo/icon-studio-v2/README.md         |  95 ++
 MiniApp/Demo/icon-studio-v2/meta.json         |  21 +
 MiniApp/Demo/icon-studio-v2/package.json      |   6 +
 MiniApp/Demo/icon-studio-v2/source/build.mjs  |  25 +
 .../source/esm_dependencies.json              |   1 +
 MiniApp/Demo/icon-studio-v2/source/index.html |  75 ++
 MiniApp/Demo/icon-studio-v2/source/package.py |  40 +
 MiniApp/Demo/icon-studio-v2/source/style.css  | 106 ++
 MiniApp/Demo/icon-studio-v2/source/ui.js      | 959 ++++++++++++++++++
 MiniApp/Demo/icon-studio-v2/source/ui/boot.js |  29 +
 .../Demo/icon-studio-v2/source/ui/geometry.js | 180 ++++
 MiniApp/Demo/icon-studio-v2/source/ui/i18n.js |  68 ++
 .../icon-studio-v2/source/ui/interactions.js  | 214 ++++
 MiniApp/Demo/icon-studio-v2/source/ui/io.js   | 156 +++
 .../Demo/icon-studio-v2/source/ui/render.js   | 111 ++
 .../Demo/icon-studio-v2/source/ui/state.js    |  78 ++
 .../Demo/icon-studio-v2/source/ui/trace.js    | 107 ++
 MiniApp/Demo/icon-studio-v2/source/worker.js  |   1 +
 .../icon-studio-v2/tests/delivery.test.mjs    |  22 +
 .../icon-studio-v2/tests/geometry.test.mjs    | 124 +++
 .../icon-studio-v2/tests/persistence.test.mjs |  73 ++
 scripts/frontend-color-surface-registry.json  |  35 +
 .../NavPanel/MainNav.projectCreation.test.tsx |  11 +
 .../src/app/components/NavPanel/MainNav.tsx   |  36 +-
 .../NewProjectDialog.test.tsx                 |  53 +-
 .../NewProjectDialog/NewProjectDialog.tsx     |  49 +-
 ...temCompatibilityScene.presentation.test.ts |  24 +
 .../EcosystemCompatibilityScene.scss          |  43 +-
 .../ecosystem-compatibility/EcosystemPets.tsx |   7 +-
 .../ExternalAgentContent.tsx                  |   8 +-
 .../ai/ModelSettingsPage.loading.test.tsx     |  73 ++
 .../ai/ModelSettingsPage.presentation.test.ts |  32 +
 .../settings/pages/ai/ModelSettingsPage.scss  |  56 +-
 .../settings/pages/ai/ModelSettingsPage.tsx   | 216 ++--
 .../ai/SubscriptionQuotaPanel.module.scss     |  65 +-
 .../pages/ai/SubscriptionQuotaPanel.test.tsx  |  54 +-
 .../pages/ai/SubscriptionQuotaPanel.tsx       |  39 +-
 .../ai/SubscriptionServiceGroup.test.tsx      |   4 +
 .../pages/ai/SubscriptionServiceGroup.tsx     |  22 +-
 .../src/app/services/createProject.test.ts    |  10 +
 src/web-ui/src/app/services/createProject.ts  |   5 +-
 src/web-ui/src/app/utils/projectDraft.ts      |   7 +
 .../ssh-remote/WorkspaceSourceSelector.tsx    |   5 +-
 src/web-ui/src/locales/en-US/common.json      |   1 +
 src/web-ui/src/locales/zh-CN/common.json      |   1 +
 src/web-ui/src/locales/zh-TW/common.json      |   1 +
 63 files changed, 4756 insertions(+), 183 deletions(-)
 create mode 100644 MiniApp/Demo/background-remover/AGENTS.md
 create mode 100644 MiniApp/Demo/background-remover/README.md
 create mode 100644 MiniApp/Demo/background-remover/meta.json
 create mode 100644 MiniApp/Demo/background-remover/package.json
 create mode 100644 MiniApp/Demo/background-remover/source/build.mjs
 create mode 100644 MiniApp/Demo/background-remover/source/esm_dependencies.json
 create mode 100644 MiniApp/Demo/background-remover/source/index.html
 create mode 100644 MiniApp/Demo/background-remover/source/package.py
 create mode 100644 MiniApp/Demo/background-remover/source/style.css
 create mode 100644 MiniApp/Demo/background-remover/source/ui.js
 create mode 100644 MiniApp/Demo/background-remover/source/ui/core.js
 create mode 100644 MiniApp/Demo/background-remover/source/ui/i18n.js
 create mode 100644 MiniApp/Demo/background-remover/source/ui/main.js
 create mode 100644 MiniApp/Demo/background-remover/source/worker.js
 create mode 100644 MiniApp/Demo/background-remover/tests/core.test.mjs
 create mode 100644 MiniApp/Demo/background-remover/tests/delivery.test.mjs
 create mode 100644 MiniApp/Demo/icon-studio-v2/AGENTS.md
 create mode 100644 MiniApp/Demo/icon-studio-v2/README.md
 create mode 100644 MiniApp/Demo/icon-studio-v2/meta.json
 create mode 100644 MiniApp/Demo/icon-studio-v2/package.json
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/build.mjs
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/esm_dependencies.json
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/index.html
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/package.py
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/style.css
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/boot.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/geometry.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/i18n.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/interactions.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/io.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/render.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/state.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/ui/trace.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/source/worker.js
 create mode 100644 MiniApp/Demo/icon-studio-v2/tests/delivery.test.mjs
 create mode 100644 MiniApp/Demo/icon-studio-v2/tests/geometry.test.mjs
 create mode 100644 MiniApp/Demo/icon-studio-v2/tests/persistence.test.mjs

diff --git a/MiniApp/Demo/background-remover/AGENTS.md b/MiniApp/Demo/background-remover/AGENTS.md
new file mode 100644
index 0000000000..087491611c
--- /dev/null
+++ b/MiniApp/Demo/background-remover/AGENTS.md
@@ -0,0 +1,14 @@
+# Background Remover MiniApp
+
+Run the focused checks from the repository root:
+
+```sh
+node MiniApp/Demo/background-remover/source/build.mjs
+python3 MiniApp/Demo/background-remover/source/package.py
+node --test MiniApp/Demo/background-remover/tests/*.test.mjs
+```
+
+After UI or color changes, also run `pnpm run theme:color-audit:all`.
+Edit `source/ui/*.js`, then rebuild the generated `source/ui.js` bundle.
+The standalone HTML is generated under repository-level ignored `output/miniapps/`, separate from host-owned `compiled.html`.
+Do not use Computer Use or browser control for verification unless the user asks.
diff --git a/MiniApp/Demo/background-remover/README.md b/MiniApp/Demo/background-remover/README.md
new file mode 100644
index 0000000000..2240b54fde
--- /dev/null
+++ b/MiniApp/Demo/background-remover/README.md
@@ -0,0 +1,79 @@
+# 轻抠 / Background Remover
+
+给图标、Logo 去掉纯色或近似纯色背景，下载真正带 Alpha 通道的透明 PNG。
+所有像素处理都在当前打开页面的设备上完成；不上传图片，不加载模型，不需要网络、账号或 Node Worker。
+
+## 使用
+
+在仓库根目录运行：
+
+```sh
+node MiniApp/Demo/background-remover/source/build.mjs
+```
+
+打开仓库根目录下生成的 `output/miniapps/background-remover.html` 即可离线使用，无需启动服务器。
+
+1. 点击上传、拖入或粘贴一张 PNG、JPG、WebP 图片。
+2. 自动读取图片边缘的主要背景颜色，并显示抠图结果。棋盘格代表真实透明。
+3. 背景未去干净时，在原图上点击背景取色，或调整颜色容差和边缘柔化。
+4. 点击「下载透明 PNG」，保留原图像素尺寸。对比底色只改变预览。
+
+默认只移除与图片四边连通的背景，保留主体内部同色区域。
+需要去掉字母、镂空区域内的背景时，取消勾选该选项；这也可能移除主体内部的同色内容。
+对已有透明边缘的图片，自动模式先保留原图，手动取色后可继续处理。
+
+最大输入为 30 MiB、1600 万像素，单边不超过 8192 像素；超限会明确提示，不会自动缩图。
+适合简单背景；复杂照片、已经烘焙进图片的棋盘格、与背景相连的同色主体无法可靠分离。
+容差过大可能清空图片，此时禁用导出并提示调整设置。
+
+## OpenBitFun MiniApp
+
+**源码文件夹和独立 HTML 不会自动出现在应用列表里，需要先导入。**
+
+在 OpenBitFun 中打开 Mini Apps，点击「导入小应用」→「从文件夹导入」，
+选择本目录 `MiniApp/Demo/background-remover`（含 `meta.json` 的目录，不是 `source` 子目录）。
+客户端会完成安装、编译并更新应用列表；无需把它改成内置应用，也无需重新构建客户端。
+
+也可以在构建后生成安装包：
+
+```sh
+python3 MiniApp/Demo/background-remover/source/package.py
+```
+
+然后在「导入小应用」菜单中导入 `output/miniapps/background-remover.bfminiapp`，
+查看权限并确认。安装包不会发布到市场。
+
+本目录同时包含标准 `meta.json`、`source/index.html`、`source/style.css`、`source/ui.js`、
+`source/worker.js` 和空的 `source/esm_dependencies.json`。
+宿主应通过标准 MiniApp 创建／导入流程读取这些源码并编译；不要把独立 HTML 复制为 `compiled.html`。
+本次交付未调用宿主 `InitMiniApp` / `FinalizeMiniApp`，未安装到用户的 Mini App 列表。
+
+仅申请 `{user-selected}` 写权限，用于 `app.dialog.save` 选择位置后保存 PNG。
+图片输入来自页面文件选择器、拖拽或粘贴，不读取工作区、宿主路径或任意目录。
+在 OpenBitFun 中保存使用 `app.fs.writeFile`；独立 HTML 使用页面下载。
+不支持文件保存的宿主会显示明确提示。
+随宿主切换明暗主题和中英文；独立版也提供语言和主题切换。
+
+## 开发与验证
+
+```sh
+node MiniApp/Demo/background-remover/source/build.mjs
+node --test MiniApp/Demo/background-remover/tests/*.test.mjs
+pnpm run theme:color-audit:all
+```
+
+编辑 `source/ui/*.js` 后重新构建，`source/ui.js` 为生成入口。
+算法测试覆盖背景识别、边缘连通、封闭区域、既有透明度、柔化和去色边、取消处理。
+未使用浏览器控制或 Computer Use 验证界面。
+
+远程场景：本应用不调用工作区、Agent Runtime 或命令执行接口，像素处理不依赖宿主文件系统。
+远程工作区、远程控制、Peer Device Mode 和 Detached Dispatch 均未做端到端验证；
+不据本地算法测试宣称这些宿主支持图片上传、保存或独立运行界面。
+
+## English
+
+Build using the command above, then open `output/miniapps/background-remover.html` from the repository root locally.
+Upload, drop, or paste an icon, pick its background color if necessary, adjust tolerance and edge softness,
+and download a transparent PNG at the original resolution. Processing stays on the viewing device.
+Edge-connected removal preserves enclosed foreground regions; disable it to remove matching colors inside holes.
+This tool targets solid or near-solid backgrounds rather than complex photographic segmentation.
diff --git a/MiniApp/Demo/background-remover/meta.json b/MiniApp/Demo/background-remover/meta.json
new file mode 100644
index 0000000000..c2e15800ac
--- /dev/null
+++ b/MiniApp/Demo/background-remover/meta.json
@@ -0,0 +1,31 @@
+{
+  "id": "background-remover",
+  "name": "轻抠",
+  "description": "为图标和 Logo 去除纯色或近似纯色背景。图片仅在当前设备处理，支持背景取色、容差调整和透明 PNG 导出。",
+  "icon": "Scissors",
+  "category": "creative",
+  "tags": ["image", "background", "transparent", "icon"],
+  "version": 1,
+  "created_at": 0,
+  "updated_at": 0,
+  "permissions": {
+    "fs": { "read": [], "write": ["{user-selected}"] },
+    "shell": { "allow": [] },
+    "net": { "allow": [] },
+    "node": { "enabled": false }
+  },
+  "i18n": {
+    "locales": {
+      "zh-CN": {
+        "name": "轻抠",
+        "description": "图标、Logo 简单背景抠图，自动识别背景、手动取色，本地导出透明 PNG。",
+        "tags": ["图片", "抠图", "透明背景", "图标"]
+      },
+      "en-US": {
+        "name": "Background Remover",
+        "description": "Remove simple backgrounds from icons and logos, pick a background color, and export transparent PNGs locally.",
+        "tags": ["image", "background removal", "transparent", "icon"]
+      }
+    }
+  }
+}
diff --git a/MiniApp/Demo/background-remover/package.json b/MiniApp/Demo/background-remover/package.json
new file mode 100644
index 0000000000..a21bcb5ffd
--- /dev/null
+++ b/MiniApp/Demo/background-remover/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "miniapp-background-remover",
+  "private": true,
+  "scripts": {
+    "build": "node source/build.mjs",
+    "test": "node --test tests/*.test.mjs"
+  }
+}
diff --git a/MiniApp/Demo/background-remover/source/build.mjs b/MiniApp/Demo/background-remover/source/build.mjs
new file mode 100644
index 0000000000..e9a0ece649
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/build.mjs
@@ -0,0 +1,25 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const sourceRoot = path.dirname(fileURLToPath(import.meta.url));
+const appRoot = path.dirname(sourceRoot);
+const repoRoot = path.resolve(appRoot, '../../..');
+const inputs = ['ui/core.js', 'ui/i18n.js', 'ui/main.js'];
+const bundle = inputs.map(file => `/* ${file} */\n${fs.readFileSync(path.join(sourceRoot, file), 'utf8')}\n`).join('');
+fs.writeFileSync(path.join(sourceRoot, 'ui.js'), bundle);
+
+// This is an offline user deliverable, not the host-managed compiled.html.
+// Reuse the canonical first-paint projection instead of creating another palette.
+const appearance = fs.readFileSync(path.join(repoRoot,
+  'src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html'), 'utf8');
+const css = fs.readFileSync(path.join(sourceRoot, 'style.css'), 'utf8');
+const html = fs.readFileSync(path.join(sourceRoot, 'index.html'), 'utf8');
+const escapeScript = script => script.replace(/<\/script/gi, '<\\/script');
+const standalone = html
+  .replace('</head>', `${appearance}\n<style>\n${css}\n</style>\n</head>`)
+  .replace('</body>', `<script>\n${escapeScript(bundle)}\n</script>\n</body>`);
+const outputDir = path.join(repoRoot, 'output', 'miniapps');
+fs.mkdirSync(outputDir, { recursive: true });
+fs.writeFileSync(path.join(outputDir, 'background-remover.html'), standalone);
+console.log('Built MiniApp source/ui.js and standalone output/miniapps/background-remover.html');
diff --git a/MiniApp/Demo/background-remover/source/esm_dependencies.json b/MiniApp/Demo/background-remover/source/esm_dependencies.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/esm_dependencies.json
@@ -0,0 +1 @@
+[]
diff --git a/MiniApp/Demo/background-remover/source/index.html b/MiniApp/Demo/background-remover/source/index.html
new file mode 100644
index 0000000000..4bc4624026
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>轻抠 · Background Remover</title>
+</head>
+<body>
+  <main class="app">
+    <header class="topbar">
+      <div>
+        <h1 data-i18n="title"></h1>
+        <p data-i18n="subtitle"></p>
+      </div>
+      <div class="header-actions">
+        <span class="local-badge" data-i18n="local"></span>
+        <button id="locale" class="quiet" type="button" data-i18n-aria="switchLanguage">EN</button>
+        <button id="theme" class="quiet" type="button" data-i18n="theme" hidden></button>
+      </div>
+    </header>
+
+    <input id="file" type="file" accept="image/png,image/jpeg,image/webp" hidden />
+    <section id="upload" class="upload">
+      <button id="choose" class="upload-button" type="button">
+        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 16V4m-4 4 4-4 4 4M4 15v5h16v-5" /></svg>
+        <strong data-i18n="upload"></strong>
+        <span data-i18n="uploadHint"></span>
+      </button>
+      <p class="formats" data-i18n="formats"></p>
+    </section>
+
+    <section id="editor" class="editor" hidden>
+      <div class="filebar">
+        <div class="file-info"><strong id="filename"></strong><span id="dimensions"></span></div>
+        <button id="replace" type="button" data-i18n="replace"></button>
+      </div>
+      <div class="workspace">
+        <div class="previews">
+          <figure class="preview-panel">
+            <figcaption><span data-i18n="original"></span><span id="pick-hint" class="muted" data-i18n="pickHint"></span></figcaption>
+            <div class="canvas-stage checker">
+              <canvas id="original" tabindex="0" role="img" data-i18n-aria="originalCanvas"></canvas>
+            </div>
+          </figure>
+          <figure class="preview-panel">
+            <figcaption><span data-i18n="result"></span><span class="muted">PNG</span></figcaption>
+            <div id="result-stage" class="canvas-stage checker">
+              <canvas id="result" role="img" data-i18n-aria="resultCanvas"></canvas>
+            </div>
+          </figure>
+        </div>
+        <aside class="settings" aria-labelledby="settings-title">
+          <h2 id="settings-title" data-i18n="settings"></h2>
+          <fieldset id="controls">
+            <div class="control-group">
+              <label for="background" data-i18n="background"></label>
+              <div class="color-row">
+                <input id="background" type="color" data-i18n-aria="background" />
+                <output id="color-value"></output>
+                <button id="auto" type="button" data-i18n="auto"></button>
+              </div>
+              <button id="eyedropper" type="button" class="wide" aria-pressed="false" data-i18n="pick"></button>
+            </div>
+            <div class="control-group">
+              <div class="label-row"><label for="tolerance" data-i18n="tolerance"></label><output id="tolerance-value" for="tolerance">24</output></div>
+              <input id="tolerance" type="range" min="0" max="160" step="1" value="24" />
+              <p class="hint" data-i18n="toleranceHint"></p>
+            </div>
+            <div class="control-group">
+              <div class="label-row"><label for="feather" data-i18n="feather"></label><output id="feather-value" for="feather">16</output></div>
+              <input id="feather" type="range" min="0" max="64" step="1" value="16" />
+              <p class="hint" data-i18n="featherHint"></p>
+            </div>
+            <label class="check-row"><input id="connected" type="checkbox" checked /><span data-i18n="connected"></span></label>
+            <p class="hint" data-i18n="connectedHint"></p>
+            <label class="check-row"><input id="decontaminate" type="checkbox" checked /><span data-i18n="decontaminate"></span></label>
+            <button id="reset" type="button" class="wide" data-i18n="reset"></button>
+          </fieldset>
+          <div class="export-group">
+            <label class="check-row"><input id="contrast" type="checkbox" /><span data-i18n="contrast"></span></label>
+            <button id="download" type="button" class="primary wide" data-i18n="download" disabled></button>
+            <p class="hint" data-i18n="exportHint"></p>
+          </div>
+        </aside>
+      </div>
+    </section>
+    <p id="status" class="status" role="status" aria-live="polite" aria-atomic="true"></p>
+    <footer data-i18n="scope"></footer>
+  </main>
+</body>
+</html>
diff --git a/MiniApp/Demo/background-remover/source/package.py b/MiniApp/Demo/background-remover/source/package.py
new file mode 100644
index 0000000000..8cc90927b8
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/package.py
@@ -0,0 +1,40 @@
+"""Package the built MiniApp for OpenBitFun's local .bfminiapp importer."""
+
+import json
+from pathlib import Path
+from zipfile import ZIP_DEFLATED, ZipFile, ZipInfo
+
+
+def main():
+    app_root = Path(__file__).resolve().parent.parent
+    repo_root = app_root.parents[2]
+    modules = ["ui/core.js", "ui/i18n.js", "ui/main.js"]
+    expected = "".join(
+        f"/* {name} */\n{(app_root / 'source' / name).read_text(encoding='utf-8')}\n"
+        for name in modules
+    )
+    if (app_root / "source/ui.js").read_text(encoding="utf-8") != expected:
+        raise SystemExit("Source bundle is stale. Run node source/build.mjs first.")
+
+    source_meta = json.loads((app_root / "meta.json").read_text(encoding="utf-8"))
+    # Local packages use MarketPackageMeta. Identity and install timestamps belong
+    # to the importing host; no source paths or user storage enter the package.
+    fields = ["name", "description", "icon", "category", "tags", "version", "permissions", "i18n"]
+    meta = {key: source_meta[key] for key in fields if key in source_meta}
+    files = {"meta.json": json.dumps(meta, ensure_ascii=False, indent=2).encode("utf-8")}
+    for name in ["index.html", "style.css", "ui.js", "worker.js", "esm_dependencies.json"]:
+        files[f"source/{name}"] = (app_root / "source" / name).read_bytes()
+
+    destination = repo_root / "output/miniapps/background-remover.bfminiapp"
+    destination.parent.mkdir(parents=True, exist_ok=True)
+    with ZipFile(destination, "w") as package:
+        for name, content in files.items():
+            entry = ZipInfo(name, date_time=(1980, 1, 1, 0, 0, 0))
+            entry.compress_type = ZIP_DEFLATED
+            entry.external_attr = 0o100644 << 16
+            package.writestr(entry, content)
+    print(f"Built {destination.name}")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/MiniApp/Demo/background-remover/source/style.css b/MiniApp/Demo/background-remover/source/style.css
new file mode 100644
index 0000000000..ee89050f96
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/style.css
@@ -0,0 +1,110 @@
+/* === Design System ===
+ * Theme: Quiet image utility, following the host's light/dark appearance.
+ * Palette: Public MiniApp surface, text, border and action tokens only.
+ * Typography: Host sans; heading 22px / body 14px / captions 13px.
+ * Radius: Host card radius, 6px for controls.
+ * Motif: Paired canvas panels with the same checkerboard transparency grid.
+ * Standalone defaults are injected by build.mjs from the host projection.
+ * ===================== */
+*, *::before, *::after { box-sizing: border-box; }
+[hidden] { display: none !important; }
+:root { color-scheme: dark; }
+:root[data-openbitfun-appearance-mode="light"] { color-scheme: light; }
+body {
+  margin: 0;
+  background: var(--openbitfun-bg);
+  color: var(--openbitfun-text);
+  font: 14px/1.6 var(--openbitfun-font-sans);
+}
+button, input { font: inherit; color: inherit; }
+button {
+  min-height: 36px;
+  padding: 6px 12px;
+  border: 1px solid var(--openbitfun-border);
+  border-radius: 6px;
+  background: var(--openbitfun-element-bg);
+  cursor: pointer;
+}
+button:hover:not(:disabled) { background: var(--openbitfun-element-hover); }
+button:disabled { opacity: .45; cursor: default; }
+button:focus-visible, input:focus-visible, canvas:focus-visible {
+  outline: 2px solid var(--openbitfun-focus-ring);
+  outline-offset: 3px;
+}
+button[aria-pressed="true"] { border-color: var(--openbitfun-accent); color: var(--openbitfun-accent); }
+.app { max-width: 1440px; margin: 0 auto; padding: 24px; }
+.topbar, .header-actions, .filebar, .label-row, .color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.topbar { margin-bottom: 24px; flex-wrap: wrap; }
+h1 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 0 0 4px; }
+h2 { font-size: 14px; font-weight: 600; margin: 0 0 20px; }
+p { margin: 0; }
+.topbar p, .muted, .hint, footer, .formats, #dimensions { color: var(--openbitfun-text-secondary); }
+.hint, footer, .formats, .muted { font-size: 13px; }
+.quiet { border-color: transparent; background: transparent; }
+.local-badge { color: var(--openbitfun-text-secondary); font-size: 13px; }
+.upload {
+  border: 1px dashed var(--openbitfun-border);
+  border-radius: var(--openbitfun-radius);
+  background: var(--openbitfun-bg-secondary);
+  text-align: center;
+  padding: 48px 24px 24px;
+}
+.upload-button { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 0; padding: 24px; width: 100%; background: transparent; }
+.upload-button svg { margin-bottom: 12px; color: var(--openbitfun-text-secondary); }
+.upload-button strong { font-size: 18px; font-weight: 600; }
+.upload-button span { color: var(--openbitfun-text-secondary); }
+.formats { margin: 24px 0; }
+body.dragging .app { outline: 2px dashed var(--openbitfun-accent); outline-offset: -8px; }
+.filebar { padding-bottom: 16px; }
+.file-info { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
+#filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw; }
+#dimensions { white-space: nowrap; font-size: 13px; }
+.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 16px; }
+.previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
+.preview-panel { margin: 0; border: 1px solid var(--openbitfun-border); border-radius: var(--openbitfun-radius); overflow: hidden; min-width: 0; }
+figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 8px 12px; background: var(--openbitfun-bg-secondary); border-bottom: 1px solid var(--openbitfun-border); }
+.canvas-stage { display: flex; align-items: center; justify-content: center; padding: 16px; height: clamp(240px, 50vh, 560px); overflow: hidden; }
+.checker {
+  --checker-tile: color-mix(in srgb, var(--openbitfun-text) 10%, transparent);
+  background-color: var(--openbitfun-bg);
+  background-image: conic-gradient(var(--checker-tile) 25%, transparent 0 50%, var(--checker-tile) 0 75%, transparent 0);
+  background-size: 20px 20px;
+}
+.canvas-stage.contrast { background-color: var(--openbitfun-text); background-image: none; }
+canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
+#original { cursor: crosshair; }
+.settings { padding: 16px; border: 1px solid var(--openbitfun-border); border-radius: var(--openbitfun-radius); background: var(--openbitfun-bg-secondary); align-self: start; }
+fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
+.control-group { margin-bottom: 20px; }
+.control-group > label { display: block; margin-bottom: 8px; }
+.color-row { gap: 8px; margin-bottom: 8px; }
+input[type="color"] { flex-shrink: 0; width: 36px; height: 36px; padding: 2px; border: 1px solid var(--openbitfun-border); border-radius: 6px; background: var(--openbitfun-field-bg); cursor: pointer; }
+#color-value { font: 13px var(--openbitfun-font-mono); }
+.label-row output { font-variant-numeric: tabular-nums; color: var(--openbitfun-text-secondary); }
+input[type="range"] { display: block; width: 100%; height: 32px; margin: 4px 0; accent-color: var(--openbitfun-accent); cursor: pointer; }
+input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--openbitfun-accent); }
+.check-row { display: flex; align-items: center; min-height: 36px; gap: 8px; cursor: pointer; }
+.check-row + .hint { margin-bottom: 12px; }
+.wide { width: 100%; }
+#reset { margin-top: 12px; }
+.export-group { border-top: 1px solid var(--openbitfun-border); margin-top: 20px; padding-top: 12px; }
+.export-group .hint { margin-top: 8px; }
+.primary { background: var(--openbitfun-accent); color: var(--openbitfun-text-on-accent); border-color: transparent; font-weight: 600; }
+.primary:hover:not(:disabled) { background: var(--openbitfun-accent-hover); }
+.status { min-height: 24px; margin-top: 16px; overflow-wrap: anywhere; color: var(--openbitfun-text-secondary); }
+.status[data-tone="error"] { color: var(--openbitfun-error); }
+.status[data-tone="warning"] { color: var(--openbitfun-warning); }
+footer { border-top: 1px solid var(--openbitfun-border-subtle); padding-top: 16px; margin-top: 16px; }
+@media (max-width: 980px) {
+  .workspace { grid-template-columns: minmax(0, 1fr); }
+  .settings { width: 100%; }
+}
+@media (max-width: 600px) {
+  .app { padding: 16px; }
+  .previews { grid-template-columns: minmax(0, 1fr); }
+  .canvas-stage { height: 280px; }
+  .file-info { flex-direction: column; gap: 0; align-items: flex-start; }
+  #filename { max-width: 55vw; }
+  #pick-hint { display: none; }
+  .upload { padding: 24px 12px; }
+}
diff --git a/MiniApp/Demo/background-remover/source/ui.js b/MiniApp/Demo/background-remover/source/ui.js
new file mode 100644
index 0000000000..23c6269d43
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/ui.js
@@ -0,0 +1,519 @@
+/* ui/core.js */
+// Pure pixel operations shared by the MiniApp, standalone export, and Node tests.
+(() => {
+  const distance = (data, offset, color) => Math.max(
+    Math.abs(data[offset] - color[0]),
+    Math.abs(data[offset + 1] - color[1]),
+    Math.abs(data[offset + 2] - color[2]),
+  );
+
+  function validate(image) {
+    if (!Number.isInteger(image.width) || !Number.isInteger(image.height)
+      || image.width < 1 || image.height < 1
+      || image.data.length !== image.width * image.height * 4) {
+      throw new Error('Invalid RGBA image dimensions');
+    }
+  }
+
+  function detectBackground(image) {
+    validate(image);
+    const { width, height, data } = image;
+    const samples = [];
+    // Sample all four edges, rather than assuming a corner belongs to the background.
+    const step = Math.max(1, Math.ceil(Math.max(width, height) / 256));
+    for (let x = 0; x < width; x += step) {
+      samples.push(x * 4);
+      if (height > 1) samples.push(((height - 1) * width + x) * 4);
+    }
+    for (let y = 1; y < height - 1; y += step) {
+      samples.push(y * width * 4);
+      if (width > 1) samples.push((y * width + width - 1) * 4);
+    }
+    const opaque = samples.filter(offset => data[offset + 3] >= 250);
+    // Do not guess a foreground color when the image already has transparent padding.
+    if (opaque.length < samples.length / 2) return null;
+    const buckets = new Map();
+    let winner = null;
+    for (const offset of opaque) {
+      const key = (data[offset] >> 4) * 256 + (data[offset + 1] >> 4) * 16 + (data[offset + 2] >> 4);
+      const bucket = buckets.get(key) || [];
+      bucket.push(offset);
+      buckets.set(key, bucket);
+      if (!winner || bucket.length > winner.length) winner = bucket;
+    }
+    const median = values => values.sort((a, b) => a - b)[Math.floor(values.length / 2)];
+    const color = [0, 1, 2].map(channel => median(winner.map(offset => data[offset + channel])));
+    const confidence = opaque.filter(offset => distance(data, offset, color) <= 24).length / opaque.length;
+    return { color, confidence };
+  }
+
+  async function removeBackground(image, options, hooks = {}) {
+    validate(image);
+    const { width, height, data } = image;
+    const { color, tolerance = 24, feather = 16, connected = true, decontaminate = true } = options;
+    if (!Array.isArray(color) || color.length !== 3 || color.some(c => !Number.isFinite(c) || c < 0 || c > 255)
+      || !Number.isFinite(tolerance) || tolerance < 0 || tolerance > 255
+      || !Number.isFinite(feather) || feather < 0 || feather > 255) {
+      throw new Error('Invalid background removal options');
+    }
+    const checkCancellation = () => {
+      if (hooks.cancelled?.()) {
+        const error = new Error('Image processing cancelled');
+        error.name = 'AbortError';
+        throw error;
+      }
+    };
+    const yieldControl = hooks.yieldControl || (() => new Promise(resolve => setTimeout(resolve, 0)));
+    const checkpoint = async () => { await yieldControl(); checkCancellation(); };
+    checkCancellation();
+
+    const count = width * height;
+    const mask = new Uint8Array(count);
+    const limit = Math.min(255, tolerance + feather);
+    if (connected) {
+      const queue = new Uint32Array(count);
+      let head = 0;
+      let tail = 0;
+      const visit = index => {
+        if (mask[index]) return;
+        mask[index] = 1; // Visited foreground; each pixel is evaluated at most once.
+        const offset = index * 4;
+        if (data[offset + 3] === 0 || distance(data, offset, color) <= limit) {
+          mask[index] = 2;
+          queue[tail++] = index;
+        }
+      };
+      for (let x = 0; x < width; x++) { visit(x); visit((height - 1) * width + x); }
+      for (let y = 0; y < height; y++) { visit(y * width); visit(y * width + width - 1); }
+      while (head < tail) {
+        const index = queue[head++];
+        const x = index % width;
+        if (x > 0) visit(index - 1);
+        if (x + 1 < width) visit(index + 1);
+        if (index >= width) visit(index - width);
+        if (index + width < count) visit(index + width);
+        if (head % 65536 === 0) await checkpoint();
+      }
+    }
+
+    const output = new Uint8ClampedArray(data);
+    let changedPixels = 0;
+    let visiblePixels = 0;
+    for (let index = 0; index < count; index++) {
+      const offset = index * 4;
+      if (data[offset + 3] > 0 && (!connected || mask[index] === 2)) {
+        const difference = distance(data, offset, color);
+        let coverage = 1;
+        if (difference <= tolerance) coverage = 0;
+        else if (feather > 0 && difference < limit) {
+          const transition = (difference - tolerance) / feather;
+          coverage = transition * transition * (3 - 2 * transition);
+        }
+        const alpha = Math.round(data[offset + 3] * coverage);
+        output[offset + 3] = alpha;
+        if (alpha < data[offset + 3]) changedPixels++;
+        if (alpha === 0) output.fill(0, offset, offset + 3);
+        // Unblend opaque source edges from the key color, reducing white/color halos.
+        // Existing partial alpha is retained without applying a second unblend.
+        else if (decontaminate && coverage < 1 && data[offset + 3] === 255) {
+          for (let channel = 0; channel < 3; channel++) {
+            output[offset + channel] = (data[offset + channel] - color[channel] * (1 - coverage)) / coverage;
+          }
+        }
+      }
+      if (output[offset + 3] > 0) visiblePixels++;
+      if (index > 0 && index % 65536 === 0) await checkpoint();
+    }
+    checkCancellation();
+    return { data: output, width, height, changedPixels, visiblePixels };
+  }
+
+  globalThis.IconCutout = Object.freeze({ detectBackground, removeBackground });
+})();
+
+/* ui/i18n.js */
+(() => {
+  const messages = {
+    'zh-CN': {
+      title: '轻抠', subtitle: '去掉图标背景，留下透明 PNG。', local: '本地处理 · 无需联网',
+      switchLanguage: 'Switch to English', theme: '切换明暗', upload: '选择一张图片',
+      uploadHint: '点击上传，或将图片拖到这里；也支持粘贴图片。',
+      formats: 'PNG / JPG / WebP · 最大 30 MB、1600 万像素', replace: '更换图片',
+      original: '原图', result: '透明背景', pickHint: '可点击背景取色',
+      originalCanvas: '原始图片，启用取色后可点击背景选择颜色', resultCanvas: '抠图结果，棋盘格表示透明区域',
+      settings: '抠图设置', background: '背景颜色', auto: '自动', pick: '从原图取色', picking: '点击原图中的背景…',
+      tolerance: '颜色容差', toleranceHint: '越大，去除的相近颜色越多。',
+      feather: '边缘柔化', featherHint: '让背景色与主体边缘平滑过渡。',
+      connected: '只去除与边缘相连的背景', connectedHint: '保留内部同色区域。取消勾选可去掉字母、镂空处的背景。',
+      decontaminate: '减少边缘残留的背景色', reset: '恢复默认设置', contrast: '切换对比底色（仅预览）',
+      download: '下载透明 PNG', exportHint: '保留原始尺寸，预览底色不会写入 PNG。',
+      scope: '适合图标、Logo 的纯色或近似纯色背景。复杂照片、棋盘格图片、与主体相连的同色背景不适用。',
+      ready: '上传一张图片即可开始。', loading: '正在读取图片…', processing: '正在抠图…',
+      done: '处理完成，可以下载透明 PNG。', none: '没有找到可去除的背景。请取色、增大容差，或取消“只去除与边缘相连的背景”。',
+      empty: '当前设置会清空整张图片。请减小容差或重新选择背景色。',
+      transparent: '图片边缘已有透明区域，已保留原图。需要继续处理时，可手动取色。',
+      uncertain: '图片边缘颜色不一致，请检查预览，必要时手动取色。',
+      pickStatus: '请点击原图背景；按 Esc 退出。也可直接用颜色选择器。',
+      transparentPick: '此处为透明像素，请选择有颜色的背景区域。',
+      invalidType: '请选择 PNG、JPG 或 WebP 图片。', tooLarge: '图片过大：最大 30 MB、1600 万像素，单边不超过 8192 像素。',
+      unreadable: '无法读取这张图片，请尝试重新导出为 PNG。',
+      failed: '图片处理失败，请更换图片重试。', saveFailed: '保存失败，请重试并选择可写入的位置。',
+      unsupportedSave: '此宿主不支持文件保存。请使用独立 HTML 版本下载图片。',
+      saving: '正在保存 PNG…', saved: '透明 PNG 已保存。', downloaded: '已发起 PNG 下载。',
+      oneFile: '请一次选择一张图片。',
+    },
+    'en-US': {
+      title: 'Background Remover', subtitle: 'Remove the background. Keep a transparent PNG.', local: 'On-device · Offline',
+      switchLanguage: '切换到中文', theme: 'Toggle theme', upload: 'Choose an image',
+      uploadHint: 'Click to upload, drop an image here, or paste from your clipboard.',
+      formats: 'PNG / JPG / WebP · Up to 30 MB and 16 megapixels', replace: 'Change image',
+      original: 'Original', result: 'Transparent result', pickHint: 'Click background to pick',
+      originalCanvas: 'Original image. Activate the color picker, then click the background.', resultCanvas: 'Cutout result. The checkerboard represents transparency.',
+      settings: 'Cutout settings', background: 'Background color', auto: 'Auto', pick: 'Pick from original', picking: 'Click the background…',
+      tolerance: 'Color tolerance', toleranceHint: 'Higher values remove more similar colors.',
+      feather: 'Edge softness', featherHint: 'Blend the transition between background and subject.',
+      connected: 'Only remove edge-connected background', connectedHint: 'Keep enclosed areas of the same color. Uncheck to remove backgrounds inside letters and holes.',
+      decontaminate: 'Reduce background color on edges', reset: 'Reset settings', contrast: 'Contrast backdrop (preview only)',
+      download: 'Download transparent PNG', exportHint: 'Original dimensions. The preview backdrop is never exported.',
+      scope: 'For icons and logos with solid or near-solid backgrounds. Not suitable for complex photos, baked-in checkerboards, or subjects connected to a background of the same color.',
+      ready: 'Choose an image to get started.', loading: 'Reading image…', processing: 'Removing background…',
+      done: 'Ready. Download your transparent PNG.', none: 'No background removed. Pick a color, increase tolerance, or disable edge-connected removal.',
+      empty: 'These settings remove the entire image. Reduce tolerance or pick another background color.',
+      transparent: 'The edges are already transparent. The original is preserved; pick a color to remove more.',
+      uncertain: 'The image edges have mixed colors. Check the preview or pick the background manually.',
+      pickStatus: 'Click the original background. Press Esc to exit, or use the color input.',
+      transparentPick: 'This pixel is transparent. Choose a colored background area.',
+      invalidType: 'Please choose a PNG, JPG, or WebP image.', tooLarge: 'Image too large: up to 30 MB, 16 megapixels, and 8192 pixels per side.',
+      unreadable: 'This image could not be read. Try exporting it as PNG.',
+      failed: 'Image processing failed. Please try another image.', saveFailed: 'Could not save. Try again and choose a writable location.',
+      unsupportedSave: 'This host does not support saving files. Use the standalone HTML version to download.',
+      saving: 'Saving PNG…', saved: 'Transparent PNG saved.', downloaded: 'PNG download started.',
+      oneFile: 'Please choose one image at a time.',
+    },
+  };
+  globalThis.CutoutMessages = Object.freeze(messages);
+})();
+
+/* ui/main.js */
+(() => {
+  const host = window.app;
+  const $ = id => document.getElementById(id);
+  const originalCanvas = $('original');
+  const resultCanvas = $('result');
+  const originalContext = originalCanvas.getContext('2d', { willReadFrequently: true });
+  const resultContext = resultCanvas.getContext('2d');
+  let locale = /^(zh|yue)/i.test(host?.locale || navigator.language) ? 'zh-CN' : 'en-US';
+  let image = null;
+  let filename = '';
+  let revision = 0;
+  let loadRevision = 0;
+  let timer;
+  let picking = false;
+  let loading = false;
+  let saving = false;
+  let canExport = false;
+  let statusKey = 'ready';
+  let statusTone = '';
+  let automaticColor = null;
+  const t = key => CutoutMessages[locale][key];
+  const hex = color => '#' + color.map(c => c.toString(16).padStart(2, '0')).join('');
+  const hexToChannels = value => [1, 3, 5].map(start => parseInt(value.slice(start, start + 2), 16));
+
+  function status(key, tone = '') {
+    statusKey = key;
+    statusTone = tone;
+    $('status').textContent = t(key);
+    $('status').dataset.tone = tone;
+  }
+
+  function refreshActions() {
+    $('controls').disabled = loading || saving;
+    $('download').disabled = !canExport || loading || saving;
+    $('replace').disabled = saving;
+    $('choose').disabled = saving;
+  }
+
+  function setPicking(next) {
+    picking = next;
+    $('eyedropper').setAttribute('aria-pressed', String(next));
+    $('eyedropper').textContent = t(next ? 'picking' : 'pick');
+    if (next) { originalCanvas.focus(); status('pickStatus'); }
+  }
+
+  function applyLocale() {
+    document.documentElement.lang = locale;
+    document.title = t('title');
+    document.querySelectorAll('[data-i18n]').forEach(node => { node.textContent = t(node.dataset.i18n); });
+    document.querySelectorAll('[data-i18n-aria]').forEach(node => { node.setAttribute('aria-label', t(node.dataset.i18nAria)); });
+    $('locale').textContent = locale === 'zh-CN' ? 'EN' : '中文';
+    $('eyedropper').textContent = t(picking ? 'picking' : 'pick');
+    status(statusKey, statusTone);
+  }
+
+  function setTheme(mode) {
+    document.documentElement.dataset.openbitfunAppearanceMode = mode;
+  }
+  if (host) {
+    setTheme(host.appearanceMode || 'dark');
+    host.onAppearanceChange?.(payload => setTheme(payload.mode));
+    host.onLocaleChange?.(next => { locale = /^(zh|yue)/i.test(next) ? 'zh-CN' : 'en-US'; applyLocale(); });
+  } else {
+    setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    $('theme').hidden = false;
+  }
+
+  function updateColor(color) {
+    $('background').value = hex(color);
+    $('color-value').textContent = $('background').value.toUpperCase();
+  }
+
+  function defaults() {
+    $('tolerance').value = '24';
+    $('feather').value = '16';
+    $('tolerance-value').textContent = '24';
+    $('feather-value').textContent = '16';
+    $('connected').checked = true;
+    $('decontaminate').checked = true;
+    automaticColor = image ? IconCutout.detectBackground(image) : null;
+    // The default picker value is input data, not a UI theme color.
+    updateColor(automaticColor?.color || [255, 255, 255]);
+    setPicking(false);
+  }
+
+  function showOriginalResult() {
+    revision++;
+    clearTimeout(timer);
+    resultContext.putImageData(image, 0, 0);
+    canExport = image.data.some((alpha, index) => index % 4 === 3 && alpha > 0);
+    resultCanvas.setAttribute('aria-busy', 'false');
+    status('transparent');
+    refreshActions();
+  }
+
+  function schedule() {
+    const current = ++revision;
+    clearTimeout(timer);
+    canExport = false;
+    refreshActions();
+    if (!image) return;
+    // Hide the prior result while a new mask is pending, so a stale image cannot be saved.
+    resultCanvas.style.visibility = 'hidden';
+    resultCanvas.setAttribute('aria-busy', 'true');
+    status('processing');
+    timer = setTimeout(() => processImage(current), 100);
+  }
+
+  async function processImage(current) {
+    try {
+      const output = await IconCutout.removeBackground(image, {
+        color: hexToChannels($('background').value),
+        tolerance: Number($('tolerance').value),
+        feather: Number($('feather').value),
+        connected: $('connected').checked,
+        decontaminate: $('decontaminate').checked,
+      }, { cancelled: () => current !== revision });
+      if (current !== revision) return;
+      resultContext.putImageData(new ImageData(output.data, output.width, output.height), 0, 0);
+      resultCanvas.style.visibility = '';
+      resultCanvas.setAttribute('aria-busy', 'false');
+      canExport = output.visiblePixels > 0;
+      if (!output.visiblePixels) status('empty', 'warning');
+      else if (!output.changedPixels) status('none', 'warning');
+      else if (automaticColor && automaticColor.confidence < .65) status('uncertain', 'warning');
+      else status('done');
+      refreshActions();
+    } catch (error) {
+      if (error.name === 'AbortError' || current !== revision) return;
+      resultCanvas.setAttribute('aria-busy', 'false');
+      status('failed', 'error');
+      refreshActions();
+    }
+  }
+
+  function readDataURL(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  async function loadFile(file) {
+    if (saving) return;
+    if (!/^image\/(png|jpeg|webp)$/.test(file.type) && !(file.type === '' && /\.(png|jpe?g|webp)$/i.test(file.name))) {
+      status('invalidType', 'error'); return;
+    }
+    if (file.size > 30 * 1024 * 1024) { status('tooLarge', 'error'); return; }
+    const current = ++loadRevision;
+    const previousCanExport = canExport;
+    revision++;
+    clearTimeout(timer);
+    loading = true;
+    refreshActions();
+    status('loading');
+    try {
+      const source = await readDataURL(file);
+      if (current !== loadRevision) return;
+      const decoded = new Image();
+      await new Promise((resolve, reject) => {
+        decoded.onload = resolve;
+        decoded.onerror = reject;
+        // Data URLs also work under the hosted MiniApp's restrictive image CSP.
+        decoded.src = source;
+      });
+      if (current !== loadRevision) return;
+      const width = decoded.naturalWidth;
+      const height = decoded.naturalHeight;
+      if (!width || !height || width * height > 16000000 || width > 8192 || height > 8192) {
+        throw new Error('tooLarge');
+      }
+      // Decode on a temporary canvas so a failed replacement preserves the current image.
+      const scratch = document.createElement('canvas');
+      scratch.width = width;
+      scratch.height = height;
+      const context = scratch.getContext('2d', { willReadFrequently: true });
+      context.drawImage(decoded, 0, 0);
+      const nextImage = context.getImageData(0, 0, width, height);
+      image = nextImage;
+      filename = file.name || 'image.png';
+      originalCanvas.width = resultCanvas.width = width;
+      originalCanvas.height = resultCanvas.height = height;
+      originalContext.putImageData(image, 0, 0);
+      $('filename').textContent = filename;
+      $('filename').title = filename;
+      // Pixel dimensions are identifiers of the raster, without locale-specific grouping.
+      $('dimensions').textContent = `${width} × ${height} px`;
+      $('upload').hidden = true;
+      $('editor').hidden = false;
+      loading = false;
+      defaults();
+      if (!automaticColor) {
+        resultCanvas.style.visibility = '';
+        showOriginalResult();
+      } else schedule();
+    } catch (error) {
+      if (current !== loadRevision) return;
+      loading = false;
+      canExport = previousCanExport;
+      resultCanvas.setAttribute('aria-busy', 'false');
+      // If replacement cancelled an in-flight render, regenerate the preserved image.
+      if (image && !canExport) schedule();
+      status(error?.message === 'tooLarge' ? 'tooLarge' : 'unreadable', 'error');
+    } finally {
+      if (current === loadRevision) { loading = false; refreshActions(); }
+    }
+  }
+
+  function acceptFiles(files) {
+    if (files.length !== 1) { status('oneFile', 'warning'); return; }
+    void loadFile(files[0]);
+  }
+
+  async function download() {
+    if (!canExport || loading || saving) return;
+    saving = true;
+    const exportName = `${filename.replace(/\.[^.]+$/, '') || 'image'}-transparent.png`;
+    refreshActions();
+    try {
+      // Freeze the current raster before awaiting a host picker or file write.
+      const dataURL = resultCanvas.toDataURL('image/png');
+      if (host) {
+        if (!host.dialog?.save || !host.fs?.writeFile) { status('unsupportedSave', 'error'); return; }
+        const path = await host.dialog.save({
+          title: t('download'), defaultPath: exportName,
+          filters: [{ name: 'PNG', extensions: ['png'] }],
+        });
+        if (!path) { status('done'); return; }
+        status('saving');
+        await host.fs.writeFile(path, dataURL.slice(dataURL.indexOf(',') + 1), { encoding: 'base64' });
+        status('saved');
+      } else {
+        const link = document.createElement('a');
+        link.download = exportName;
+        link.href = dataURL;
+        document.body.append(link);
+        link.click();
+        link.remove();
+        status('downloaded');
+      }
+    } catch {
+      status('saveFailed', 'error');
+    } finally { saving = false; refreshActions(); }
+  }
+
+  $('choose').addEventListener('click', () => $('file').click());
+  $('replace').addEventListener('click', () => $('file').click());
+  $('file').addEventListener('change', event => {
+    const files = Array.from(event.target.files || []);
+    if (files.length) acceptFiles(files);
+    event.target.value = '';
+  });
+  let dragDepth = 0;
+  document.addEventListener('dragenter', event => {
+    if (!Array.from(event.dataTransfer?.types || []).includes('Files')) return;
+    event.preventDefault(); dragDepth++; document.body.classList.add('dragging');
+  });
+  document.addEventListener('dragover', event => {
+    if (Array.from(event.dataTransfer?.types || []).includes('Files')) event.preventDefault();
+  });
+  document.addEventListener('dragleave', () => {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (!dragDepth) document.body.classList.remove('dragging');
+  });
+  document.addEventListener('drop', event => {
+    event.preventDefault(); dragDepth = 0; document.body.classList.remove('dragging');
+    if (event.dataTransfer?.files.length) acceptFiles(Array.from(event.dataTransfer.files));
+  });
+  document.addEventListener('paste', event => {
+    const files = Array.from(event.clipboardData?.files || []).filter(file => file.type.startsWith('image/'));
+    if (files.length) { event.preventDefault(); acceptFiles(files); }
+  });
+  $('background').addEventListener('input', () => {
+    automaticColor = null;
+    $('color-value').textContent = $('background').value.toUpperCase();
+    schedule();
+  });
+  for (const key of ['tolerance', 'feather']) {
+    $(key).addEventListener('input', () => { $(`${key}-value`).textContent = $(key).value; schedule(); });
+  }
+  for (const key of ['connected', 'decontaminate']) $(key).addEventListener('change', schedule);
+  $('auto').addEventListener('click', () => {
+    automaticColor = IconCutout.detectBackground(image);
+    setPicking(false);
+    if (automaticColor) { updateColor(automaticColor.color); schedule(); }
+    else { resultCanvas.style.visibility = ''; showOriginalResult(); }
+  });
+  $('reset').addEventListener('click', () => {
+    defaults();
+    if (automaticColor) schedule();
+    else { resultCanvas.style.visibility = ''; showOriginalResult(); }
+  });
+  $('eyedropper').addEventListener('click', () => setPicking(!picking));
+  originalCanvas.addEventListener('click', event => {
+    if (!image || loading || saving) return;
+    // Canvas itself has its intrinsic aspect ratio; no object-fit letterbox is sampled.
+    const box = originalCanvas.getBoundingClientRect();
+    const x = Math.min(image.width - 1, Math.max(0, Math.floor((event.clientX - box.left) / box.width * image.width)));
+    const y = Math.min(image.height - 1, Math.max(0, Math.floor((event.clientY - box.top) / box.height * image.height)));
+    const offset = (y * image.width + x) * 4;
+    if (!image.data[offset + 3]) { status('transparentPick', 'warning'); return; }
+    updateColor(Array.from(image.data.slice(offset, offset + 3)));
+    automaticColor = null;
+    setPicking(false);
+    schedule();
+  });
+  originalCanvas.addEventListener('keydown', event => {
+    if (event.key === 'Escape') { setPicking(false); status('done'); }
+    else if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); $('background').click(); }
+  });
+  $('contrast').addEventListener('change', () => $('result-stage').classList.toggle('contrast', $('contrast').checked));
+  $('download').addEventListener('click', download);
+  $('locale').addEventListener('click', () => { locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'; applyLocale(); });
+  $('theme').addEventListener('click', () => setTheme(document.documentElement.dataset.openbitfunAppearanceMode === 'dark' ? 'light' : 'dark'));
+  window.addEventListener('pagehide', () => { revision++; loadRevision++; clearTimeout(timer); });
+  defaults();
+  applyLocale();
+  refreshActions();
+})();
+
diff --git a/MiniApp/Demo/background-remover/source/ui/core.js b/MiniApp/Demo/background-remover/source/ui/core.js
new file mode 100644
index 0000000000..6b53e3255a
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/ui/core.js
@@ -0,0 +1,131 @@
+// Pure pixel operations shared by the MiniApp, standalone export, and Node tests.
+(() => {
+  const distance = (data, offset, color) => Math.max(
+    Math.abs(data[offset] - color[0]),
+    Math.abs(data[offset + 1] - color[1]),
+    Math.abs(data[offset + 2] - color[2]),
+  );
+
+  function validate(image) {
+    if (!Number.isInteger(image.width) || !Number.isInteger(image.height)
+      || image.width < 1 || image.height < 1
+      || image.data.length !== image.width * image.height * 4) {
+      throw new Error('Invalid RGBA image dimensions');
+    }
+  }
+
+  function detectBackground(image) {
+    validate(image);
+    const { width, height, data } = image;
+    const samples = [];
+    // Sample all four edges, rather than assuming a corner belongs to the background.
+    const step = Math.max(1, Math.ceil(Math.max(width, height) / 256));
+    for (let x = 0; x < width; x += step) {
+      samples.push(x * 4);
+      if (height > 1) samples.push(((height - 1) * width + x) * 4);
+    }
+    for (let y = 1; y < height - 1; y += step) {
+      samples.push(y * width * 4);
+      if (width > 1) samples.push((y * width + width - 1) * 4);
+    }
+    const opaque = samples.filter(offset => data[offset + 3] >= 250);
+    // Do not guess a foreground color when the image already has transparent padding.
+    if (opaque.length < samples.length / 2) return null;
+    const buckets = new Map();
+    let winner = null;
+    for (const offset of opaque) {
+      const key = (data[offset] >> 4) * 256 + (data[offset + 1] >> 4) * 16 + (data[offset + 2] >> 4);
+      const bucket = buckets.get(key) || [];
+      bucket.push(offset);
+      buckets.set(key, bucket);
+      if (!winner || bucket.length > winner.length) winner = bucket;
+    }
+    const median = values => values.sort((a, b) => a - b)[Math.floor(values.length / 2)];
+    const color = [0, 1, 2].map(channel => median(winner.map(offset => data[offset + channel])));
+    const confidence = opaque.filter(offset => distance(data, offset, color) <= 24).length / opaque.length;
+    return { color, confidence };
+  }
+
+  async function removeBackground(image, options, hooks = {}) {
+    validate(image);
+    const { width, height, data } = image;
+    const { color, tolerance = 24, feather = 16, connected = true, decontaminate = true } = options;
+    if (!Array.isArray(color) || color.length !== 3 || color.some(c => !Number.isFinite(c) || c < 0 || c > 255)
+      || !Number.isFinite(tolerance) || tolerance < 0 || tolerance > 255
+      || !Number.isFinite(feather) || feather < 0 || feather > 255) {
+      throw new Error('Invalid background removal options');
+    }
+    const checkCancellation = () => {
+      if (hooks.cancelled?.()) {
+        const error = new Error('Image processing cancelled');
+        error.name = 'AbortError';
+        throw error;
+      }
+    };
+    const yieldControl = hooks.yieldControl || (() => new Promise(resolve => setTimeout(resolve, 0)));
+    const checkpoint = async () => { await yieldControl(); checkCancellation(); };
+    checkCancellation();
+
+    const count = width * height;
+    const mask = new Uint8Array(count);
+    const limit = Math.min(255, tolerance + feather);
+    if (connected) {
+      const queue = new Uint32Array(count);
+      let head = 0;
+      let tail = 0;
+      const visit = index => {
+        if (mask[index]) return;
+        mask[index] = 1; // Visited foreground; each pixel is evaluated at most once.
+        const offset = index * 4;
+        if (data[offset + 3] === 0 || distance(data, offset, color) <= limit) {
+          mask[index] = 2;
+          queue[tail++] = index;
+        }
+      };
+      for (let x = 0; x < width; x++) { visit(x); visit((height - 1) * width + x); }
+      for (let y = 0; y < height; y++) { visit(y * width); visit(y * width + width - 1); }
+      while (head < tail) {
+        const index = queue[head++];
+        const x = index % width;
+        if (x > 0) visit(index - 1);
+        if (x + 1 < width) visit(index + 1);
+        if (index >= width) visit(index - width);
+        if (index + width < count) visit(index + width);
+        if (head % 65536 === 0) await checkpoint();
+      }
+    }
+
+    const output = new Uint8ClampedArray(data);
+    let changedPixels = 0;
+    let visiblePixels = 0;
+    for (let index = 0; index < count; index++) {
+      const offset = index * 4;
+      if (data[offset + 3] > 0 && (!connected || mask[index] === 2)) {
+        const difference = distance(data, offset, color);
+        let coverage = 1;
+        if (difference <= tolerance) coverage = 0;
+        else if (feather > 0 && difference < limit) {
+          const transition = (difference - tolerance) / feather;
+          coverage = transition * transition * (3 - 2 * transition);
+        }
+        const alpha = Math.round(data[offset + 3] * coverage);
+        output[offset + 3] = alpha;
+        if (alpha < data[offset + 3]) changedPixels++;
+        if (alpha === 0) output.fill(0, offset, offset + 3);
+        // Unblend opaque source edges from the key color, reducing white/color halos.
+        // Existing partial alpha is retained without applying a second unblend.
+        else if (decontaminate && coverage < 1 && data[offset + 3] === 255) {
+          for (let channel = 0; channel < 3; channel++) {
+            output[offset + channel] = (data[offset + channel] - color[channel] * (1 - coverage)) / coverage;
+          }
+        }
+      }
+      if (output[offset + 3] > 0) visiblePixels++;
+      if (index > 0 && index % 65536 === 0) await checkpoint();
+    }
+    checkCancellation();
+    return { data: output, width, height, changedPixels, visiblePixels };
+  }
+
+  globalThis.IconCutout = Object.freeze({ detectBackground, removeBackground });
+})();
diff --git a/MiniApp/Demo/background-remover/source/ui/i18n.js b/MiniApp/Demo/background-remover/source/ui/i18n.js
new file mode 100644
index 0000000000..ed8da16ad1
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/ui/i18n.js
@@ -0,0 +1,61 @@
+(() => {
+  const messages = {
+    'zh-CN': {
+      title: '轻抠', subtitle: '去掉图标背景，留下透明 PNG。', local: '本地处理 · 无需联网',
+      switchLanguage: 'Switch to English', theme: '切换明暗', upload: '选择一张图片',
+      uploadHint: '点击上传，或将图片拖到这里；也支持粘贴图片。',
+      formats: 'PNG / JPG / WebP · 最大 30 MB、1600 万像素', replace: '更换图片',
+      original: '原图', result: '透明背景', pickHint: '可点击背景取色',
+      originalCanvas: '原始图片，启用取色后可点击背景选择颜色', resultCanvas: '抠图结果，棋盘格表示透明区域',
+      settings: '抠图设置', background: '背景颜色', auto: '自动', pick: '从原图取色', picking: '点击原图中的背景…',
+      tolerance: '颜色容差', toleranceHint: '越大，去除的相近颜色越多。',
+      feather: '边缘柔化', featherHint: '让背景色与主体边缘平滑过渡。',
+      connected: '只去除与边缘相连的背景', connectedHint: '保留内部同色区域。取消勾选可去掉字母、镂空处的背景。',
+      decontaminate: '减少边缘残留的背景色', reset: '恢复默认设置', contrast: '切换对比底色（仅预览）',
+      download: '下载透明 PNG', exportHint: '保留原始尺寸，预览底色不会写入 PNG。',
+      scope: '适合图标、Logo 的纯色或近似纯色背景。复杂照片、棋盘格图片、与主体相连的同色背景不适用。',
+      ready: '上传一张图片即可开始。', loading: '正在读取图片…', processing: '正在抠图…',
+      done: '处理完成，可以下载透明 PNG。', none: '没有找到可去除的背景。请取色、增大容差，或取消“只去除与边缘相连的背景”。',
+      empty: '当前设置会清空整张图片。请减小容差或重新选择背景色。',
+      transparent: '图片边缘已有透明区域，已保留原图。需要继续处理时，可手动取色。',
+      uncertain: '图片边缘颜色不一致，请检查预览，必要时手动取色。',
+      pickStatus: '请点击原图背景；按 Esc 退出。也可直接用颜色选择器。',
+      transparentPick: '此处为透明像素，请选择有颜色的背景区域。',
+      invalidType: '请选择 PNG、JPG 或 WebP 图片。', tooLarge: '图片过大：最大 30 MB、1600 万像素，单边不超过 8192 像素。',
+      unreadable: '无法读取这张图片，请尝试重新导出为 PNG。',
+      failed: '图片处理失败，请更换图片重试。', saveFailed: '保存失败，请重试并选择可写入的位置。',
+      unsupportedSave: '此宿主不支持文件保存。请使用独立 HTML 版本下载图片。',
+      saving: '正在保存 PNG…', saved: '透明 PNG 已保存。', downloaded: '已发起 PNG 下载。',
+      oneFile: '请一次选择一张图片。',
+    },
+    'en-US': {
+      title: 'Background Remover', subtitle: 'Remove the background. Keep a transparent PNG.', local: 'On-device · Offline',
+      switchLanguage: '切换到中文', theme: 'Toggle theme', upload: 'Choose an image',
+      uploadHint: 'Click to upload, drop an image here, or paste from your clipboard.',
+      formats: 'PNG / JPG / WebP · Up to 30 MB and 16 megapixels', replace: 'Change image',
+      original: 'Original', result: 'Transparent result', pickHint: 'Click background to pick',
+      originalCanvas: 'Original image. Activate the color picker, then click the background.', resultCanvas: 'Cutout result. The checkerboard represents transparency.',
+      settings: 'Cutout settings', background: 'Background color', auto: 'Auto', pick: 'Pick from original', picking: 'Click the background…',
+      tolerance: 'Color tolerance', toleranceHint: 'Higher values remove more similar colors.',
+      feather: 'Edge softness', featherHint: 'Blend the transition between background and subject.',
+      connected: 'Only remove edge-connected background', connectedHint: 'Keep enclosed areas of the same color. Uncheck to remove backgrounds inside letters and holes.',
+      decontaminate: 'Reduce background color on edges', reset: 'Reset settings', contrast: 'Contrast backdrop (preview only)',
+      download: 'Download transparent PNG', exportHint: 'Original dimensions. The preview backdrop is never exported.',
+      scope: 'For icons and logos with solid or near-solid backgrounds. Not suitable for complex photos, baked-in checkerboards, or subjects connected to a background of the same color.',
+      ready: 'Choose an image to get started.', loading: 'Reading image…', processing: 'Removing background…',
+      done: 'Ready. Download your transparent PNG.', none: 'No background removed. Pick a color, increase tolerance, or disable edge-connected removal.',
+      empty: 'These settings remove the entire image. Reduce tolerance or pick another background color.',
+      transparent: 'The edges are already transparent. The original is preserved; pick a color to remove more.',
+      uncertain: 'The image edges have mixed colors. Check the preview or pick the background manually.',
+      pickStatus: 'Click the original background. Press Esc to exit, or use the color input.',
+      transparentPick: 'This pixel is transparent. Choose a colored background area.',
+      invalidType: 'Please choose a PNG, JPG, or WebP image.', tooLarge: 'Image too large: up to 30 MB, 16 megapixels, and 8192 pixels per side.',
+      unreadable: 'This image could not be read. Try exporting it as PNG.',
+      failed: 'Image processing failed. Please try another image.', saveFailed: 'Could not save. Try again and choose a writable location.',
+      unsupportedSave: 'This host does not support saving files. Use the standalone HTML version to download.',
+      saving: 'Saving PNG…', saved: 'Transparent PNG saved.', downloaded: 'PNG download started.',
+      oneFile: 'Please choose one image at a time.',
+    },
+  };
+  globalThis.CutoutMessages = Object.freeze(messages);
+})();
diff --git a/MiniApp/Demo/background-remover/source/ui/main.js b/MiniApp/Demo/background-remover/source/ui/main.js
new file mode 100644
index 0000000000..879f6a40f5
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/ui/main.js
@@ -0,0 +1,321 @@
+(() => {
+  const host = window.app;
+  const $ = id => document.getElementById(id);
+  const originalCanvas = $('original');
+  const resultCanvas = $('result');
+  const originalContext = originalCanvas.getContext('2d', { willReadFrequently: true });
+  const resultContext = resultCanvas.getContext('2d');
+  let locale = /^(zh|yue)/i.test(host?.locale || navigator.language) ? 'zh-CN' : 'en-US';
+  let image = null;
+  let filename = '';
+  let revision = 0;
+  let loadRevision = 0;
+  let timer;
+  let picking = false;
+  let loading = false;
+  let saving = false;
+  let canExport = false;
+  let statusKey = 'ready';
+  let statusTone = '';
+  let automaticColor = null;
+  const t = key => CutoutMessages[locale][key];
+  const hex = color => '#' + color.map(c => c.toString(16).padStart(2, '0')).join('');
+  const hexToChannels = value => [1, 3, 5].map(start => parseInt(value.slice(start, start + 2), 16));
+
+  function status(key, tone = '') {
+    statusKey = key;
+    statusTone = tone;
+    $('status').textContent = t(key);
+    $('status').dataset.tone = tone;
+  }
+
+  function refreshActions() {
+    $('controls').disabled = loading || saving;
+    $('download').disabled = !canExport || loading || saving;
+    $('replace').disabled = saving;
+    $('choose').disabled = saving;
+  }
+
+  function setPicking(next) {
+    picking = next;
+    $('eyedropper').setAttribute('aria-pressed', String(next));
+    $('eyedropper').textContent = t(next ? 'picking' : 'pick');
+    if (next) { originalCanvas.focus(); status('pickStatus'); }
+  }
+
+  function applyLocale() {
+    document.documentElement.lang = locale;
+    document.title = t('title');
+    document.querySelectorAll('[data-i18n]').forEach(node => { node.textContent = t(node.dataset.i18n); });
+    document.querySelectorAll('[data-i18n-aria]').forEach(node => { node.setAttribute('aria-label', t(node.dataset.i18nAria)); });
+    $('locale').textContent = locale === 'zh-CN' ? 'EN' : '中文';
+    $('eyedropper').textContent = t(picking ? 'picking' : 'pick');
+    status(statusKey, statusTone);
+  }
+
+  function setTheme(mode) {
+    document.documentElement.dataset.openbitfunAppearanceMode = mode;
+  }
+  if (host) {
+    setTheme(host.appearanceMode || 'dark');
+    host.onAppearanceChange?.(payload => setTheme(payload.mode));
+    host.onLocaleChange?.(next => { locale = /^(zh|yue)/i.test(next) ? 'zh-CN' : 'en-US'; applyLocale(); });
+  } else {
+    setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    $('theme').hidden = false;
+  }
+
+  function updateColor(color) {
+    $('background').value = hex(color);
+    $('color-value').textContent = $('background').value.toUpperCase();
+  }
+
+  function defaults() {
+    $('tolerance').value = '24';
+    $('feather').value = '16';
+    $('tolerance-value').textContent = '24';
+    $('feather-value').textContent = '16';
+    $('connected').checked = true;
+    $('decontaminate').checked = true;
+    automaticColor = image ? IconCutout.detectBackground(image) : null;
+    // The default picker value is input data, not a UI theme color.
+    updateColor(automaticColor?.color || [255, 255, 255]);
+    setPicking(false);
+  }
+
+  function showOriginalResult() {
+    revision++;
+    clearTimeout(timer);
+    resultContext.putImageData(image, 0, 0);
+    canExport = image.data.some((alpha, index) => index % 4 === 3 && alpha > 0);
+    resultCanvas.setAttribute('aria-busy', 'false');
+    status('transparent');
+    refreshActions();
+  }
+
+  function schedule() {
+    const current = ++revision;
+    clearTimeout(timer);
+    canExport = false;
+    refreshActions();
+    if (!image) return;
+    // Hide the prior result while a new mask is pending, so a stale image cannot be saved.
+    resultCanvas.style.visibility = 'hidden';
+    resultCanvas.setAttribute('aria-busy', 'true');
+    status('processing');
+    timer = setTimeout(() => processImage(current), 100);
+  }
+
+  async function processImage(current) {
+    try {
+      const output = await IconCutout.removeBackground(image, {
+        color: hexToChannels($('background').value),
+        tolerance: Number($('tolerance').value),
+        feather: Number($('feather').value),
+        connected: $('connected').checked,
+        decontaminate: $('decontaminate').checked,
+      }, { cancelled: () => current !== revision });
+      if (current !== revision) return;
+      resultContext.putImageData(new ImageData(output.data, output.width, output.height), 0, 0);
+      resultCanvas.style.visibility = '';
+      resultCanvas.setAttribute('aria-busy', 'false');
+      canExport = output.visiblePixels > 0;
+      if (!output.visiblePixels) status('empty', 'warning');
+      else if (!output.changedPixels) status('none', 'warning');
+      else if (automaticColor && automaticColor.confidence < .65) status('uncertain', 'warning');
+      else status('done');
+      refreshActions();
+    } catch (error) {
+      if (error.name === 'AbortError' || current !== revision) return;
+      resultCanvas.setAttribute('aria-busy', 'false');
+      status('failed', 'error');
+      refreshActions();
+    }
+  }
+
+  function readDataURL(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  async function loadFile(file) {
+    if (saving) return;
+    if (!/^image\/(png|jpeg|webp)$/.test(file.type) && !(file.type === '' && /\.(png|jpe?g|webp)$/i.test(file.name))) {
+      status('invalidType', 'error'); return;
+    }
+    if (file.size > 30 * 1024 * 1024) { status('tooLarge', 'error'); return; }
+    const current = ++loadRevision;
+    const previousCanExport = canExport;
+    revision++;
+    clearTimeout(timer);
+    loading = true;
+    refreshActions();
+    status('loading');
+    try {
+      const source = await readDataURL(file);
+      if (current !== loadRevision) return;
+      const decoded = new Image();
+      await new Promise((resolve, reject) => {
+        decoded.onload = resolve;
+        decoded.onerror = reject;
+        // Data URLs also work under the hosted MiniApp's restrictive image CSP.
+        decoded.src = source;
+      });
+      if (current !== loadRevision) return;
+      const width = decoded.naturalWidth;
+      const height = decoded.naturalHeight;
+      if (!width || !height || width * height > 16000000 || width > 8192 || height > 8192) {
+        throw new Error('tooLarge');
+      }
+      // Decode on a temporary canvas so a failed replacement preserves the current image.
+      const scratch = document.createElement('canvas');
+      scratch.width = width;
+      scratch.height = height;
+      const context = scratch.getContext('2d', { willReadFrequently: true });
+      context.drawImage(decoded, 0, 0);
+      const nextImage = context.getImageData(0, 0, width, height);
+      image = nextImage;
+      filename = file.name || 'image.png';
+      originalCanvas.width = resultCanvas.width = width;
+      originalCanvas.height = resultCanvas.height = height;
+      originalContext.putImageData(image, 0, 0);
+      $('filename').textContent = filename;
+      $('filename').title = filename;
+      // Pixel dimensions are identifiers of the raster, without locale-specific grouping.
+      $('dimensions').textContent = `${width} × ${height} px`;
+      $('upload').hidden = true;
+      $('editor').hidden = false;
+      loading = false;
+      defaults();
+      if (!automaticColor) {
+        resultCanvas.style.visibility = '';
+        showOriginalResult();
+      } else schedule();
+    } catch (error) {
+      if (current !== loadRevision) return;
+      loading = false;
+      canExport = previousCanExport;
+      resultCanvas.setAttribute('aria-busy', 'false');
+      // If replacement cancelled an in-flight render, regenerate the preserved image.
+      if (image && !canExport) schedule();
+      status(error?.message === 'tooLarge' ? 'tooLarge' : 'unreadable', 'error');
+    } finally {
+      if (current === loadRevision) { loading = false; refreshActions(); }
+    }
+  }
+
+  function acceptFiles(files) {
+    if (files.length !== 1) { status('oneFile', 'warning'); return; }
+    void loadFile(files[0]);
+  }
+
+  async function download() {
+    if (!canExport || loading || saving) return;
+    saving = true;
+    const exportName = `${filename.replace(/\.[^.]+$/, '') || 'image'}-transparent.png`;
+    refreshActions();
+    try {
+      // Freeze the current raster before awaiting a host picker or file write.
+      const dataURL = resultCanvas.toDataURL('image/png');
+      if (host) {
+        if (!host.dialog?.save || !host.fs?.writeFile) { status('unsupportedSave', 'error'); return; }
+        const path = await host.dialog.save({
+          title: t('download'), defaultPath: exportName,
+          filters: [{ name: 'PNG', extensions: ['png'] }],
+        });
+        if (!path) { status('done'); return; }
+        status('saving');
+        await host.fs.writeFile(path, dataURL.slice(dataURL.indexOf(',') + 1), { encoding: 'base64' });
+        status('saved');
+      } else {
+        const link = document.createElement('a');
+        link.download = exportName;
+        link.href = dataURL;
+        document.body.append(link);
+        link.click();
+        link.remove();
+        status('downloaded');
+      }
+    } catch {
+      status('saveFailed', 'error');
+    } finally { saving = false; refreshActions(); }
+  }
+
+  $('choose').addEventListener('click', () => $('file').click());
+  $('replace').addEventListener('click', () => $('file').click());
+  $('file').addEventListener('change', event => {
+    const files = Array.from(event.target.files || []);
+    if (files.length) acceptFiles(files);
+    event.target.value = '';
+  });
+  let dragDepth = 0;
+  document.addEventListener('dragenter', event => {
+    if (!Array.from(event.dataTransfer?.types || []).includes('Files')) return;
+    event.preventDefault(); dragDepth++; document.body.classList.add('dragging');
+  });
+  document.addEventListener('dragover', event => {
+    if (Array.from(event.dataTransfer?.types || []).includes('Files')) event.preventDefault();
+  });
+  document.addEventListener('dragleave', () => {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (!dragDepth) document.body.classList.remove('dragging');
+  });
+  document.addEventListener('drop', event => {
+    event.preventDefault(); dragDepth = 0; document.body.classList.remove('dragging');
+    if (event.dataTransfer?.files.length) acceptFiles(Array.from(event.dataTransfer.files));
+  });
+  document.addEventListener('paste', event => {
+    const files = Array.from(event.clipboardData?.files || []).filter(file => file.type.startsWith('image/'));
+    if (files.length) { event.preventDefault(); acceptFiles(files); }
+  });
+  $('background').addEventListener('input', () => {
+    automaticColor = null;
+    $('color-value').textContent = $('background').value.toUpperCase();
+    schedule();
+  });
+  for (const key of ['tolerance', 'feather']) {
+    $(key).addEventListener('input', () => { $(`${key}-value`).textContent = $(key).value; schedule(); });
+  }
+  for (const key of ['connected', 'decontaminate']) $(key).addEventListener('change', schedule);
+  $('auto').addEventListener('click', () => {
+    automaticColor = IconCutout.detectBackground(image);
+    setPicking(false);
+    if (automaticColor) { updateColor(automaticColor.color); schedule(); }
+    else { resultCanvas.style.visibility = ''; showOriginalResult(); }
+  });
+  $('reset').addEventListener('click', () => {
+    defaults();
+    if (automaticColor) schedule();
+    else { resultCanvas.style.visibility = ''; showOriginalResult(); }
+  });
+  $('eyedropper').addEventListener('click', () => setPicking(!picking));
+  originalCanvas.addEventListener('click', event => {
+    if (!image || loading || saving) return;
+    // Canvas itself has its intrinsic aspect ratio; no object-fit letterbox is sampled.
+    const box = originalCanvas.getBoundingClientRect();
+    const x = Math.min(image.width - 1, Math.max(0, Math.floor((event.clientX - box.left) / box.width * image.width)));
+    const y = Math.min(image.height - 1, Math.max(0, Math.floor((event.clientY - box.top) / box.height * image.height)));
+    const offset = (y * image.width + x) * 4;
+    if (!image.data[offset + 3]) { status('transparentPick', 'warning'); return; }
+    updateColor(Array.from(image.data.slice(offset, offset + 3)));
+    automaticColor = null;
+    setPicking(false);
+    schedule();
+  });
+  originalCanvas.addEventListener('keydown', event => {
+    if (event.key === 'Escape') { setPicking(false); status('done'); }
+    else if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); $('background').click(); }
+  });
+  $('contrast').addEventListener('change', () => $('result-stage').classList.toggle('contrast', $('contrast').checked));
+  $('download').addEventListener('click', download);
+  $('locale').addEventListener('click', () => { locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'; applyLocale(); });
+  $('theme').addEventListener('click', () => setTheme(document.documentElement.dataset.openbitfunAppearanceMode === 'dark' ? 'light' : 'dark'));
+  window.addEventListener('pagehide', () => { revision++; loadRevision++; clearTimeout(timer); });
+  defaults();
+  applyLocale();
+  refreshActions();
+})();
diff --git a/MiniApp/Demo/background-remover/source/worker.js b/MiniApp/Demo/background-remover/source/worker.js
new file mode 100644
index 0000000000..fc101f8eed
--- /dev/null
+++ b/MiniApp/Demo/background-remover/source/worker.js
@@ -0,0 +1 @@
+// This MiniApp processes pixels in the renderer. No Node worker is required.
diff --git a/MiniApp/Demo/background-remover/tests/core.test.mjs b/MiniApp/Demo/background-remover/tests/core.test.mjs
new file mode 100644
index 0000000000..d606e1ccc7
--- /dev/null
+++ b/MiniApp/Demo/background-remover/tests/core.test.mjs
@@ -0,0 +1,116 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import test from 'node:test';
+import vm from 'node:vm';
+
+const context = vm.createContext({ Uint8ClampedArray, Uint8Array, Uint32Array, setTimeout });
+vm.runInContext(fs.readFileSync(new URL('../source/ui/core.js', import.meta.url), 'utf8'), context);
+const { detectBackground, removeBackground } = context.IconCutout;
+const immediate = { yieldControl: async () => {} };
+const paper = [255, 255, 255, 255];
+const ink = [20, 40, 60, 255];
+function raster(width, height, pixel = () => paper) {
+  const data = new Uint8ClampedArray(width * height * 4);
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) data.set(pixel(x, y), (y * width + x) * 4);
+  }
+  return { width, height, data };
+}
+const pixelAt = (image, x, y) => Array.from(image.data.slice((y * image.width + x) * 4, (y * image.width + x + 1) * 4));
+const key = { color: [255, 255, 255], tolerance: 24, feather: 0 };
+
+test('finds the dominant edge background even when a corner contains foreground', () => {
+  const image = raster(9, 9, (x, y) => x < 2 && y < 2 ? ink : [242, 240, 238, 255]);
+  assert.deepEqual(Array.from(detectBackground(image).color), [242, 240, 238]);
+});
+
+test('transparent padding does not cause the visible subject to become the automatic key', () => {
+  const image = raster(5, 5, (x, y) => x === 2 && y === 2 ? ink : [180, 90, 30, 0]);
+  assert.equal(detectBackground(image), null);
+});
+
+test('edge-connected removal keeps enclosed areas and never mutates the source', async () => {
+  const image = raster(7, 7, (x, y) => (x === 2 || x === 4) && y >= 2 && y <= 4
+    || (y === 2 || y === 4) && x >= 2 && x <= 4 ? ink : paper);
+  const before = new Uint8ClampedArray(image.data);
+  const output = await removeBackground(image, key, immediate);
+  assert.equal(pixelAt(output, 0, 0)[3], 0);
+  assert.deepEqual(pixelAt(output, 3, 3), paper);
+  assert.deepEqual(pixelAt(output, 2, 3), ink);
+  assert.deepEqual(image.data, before);
+  assert.equal(output.changedPixels, 40);
+  assert.equal(output.visiblePixels, 9);
+});
+
+test('global mode removes enclosed background inside logo holes', async () => {
+  const image = raster(5, 5, (x, y) => x === 0 || y === 0 || x === 4 || y === 4 || x === 2 && y === 2 ? paper : ink);
+  const output = await removeBackground(image, { ...key, connected: false }, immediate);
+  assert.equal(pixelAt(output, 2, 2)[3], 0);
+  assert.deepEqual(pixelAt(output, 1, 1), ink);
+});
+
+test('handles dark and colored backgrounds, JPEG-like variation, and one-pixel dimensions', async () => {
+  for (const color of [[0, 0, 0], [40, 130, 75]]) {
+    const image = raster(5, 1, x => x === 2 ? paper : [...color.map(c => c + x), 255]);
+    const output = await removeBackground(image, { color, tolerance: 4, feather: 0 }, immediate);
+    assert.deepEqual(Array.from(output.data.filter((_, index) => index % 4 === 3)), [0, 0, 255, 0, 0]);
+  }
+  const vertical = raster(1, 3, (_, y) => y === 1 ? ink : paper);
+  const output = await removeBackground(vertical, key, immediate);
+  assert.equal(output.visiblePixels, 1);
+});
+
+test('existing transparency and subject partial alpha are preserved', async () => {
+  const image = raster(5, 1, x => x === 2 ? [10, 30, 70, 128] : x === 4 ? [150, 70, 30, 0] : paper);
+  const output = await removeBackground(image, { ...key, feather: 20 }, immediate);
+  assert.deepEqual(pixelAt(output, 2, 0), [10, 30, 70, 128]);
+  assert.deepEqual(pixelAt(output, 4, 0), [150, 70, 30, 0]);
+});
+
+test('softness produces partial alpha and decontamination reduces a white halo', async () => {
+  const image = raster(1, 1, () => [235, 235, 235, 255]);
+  const options = { color: [255, 255, 255], tolerance: 10, feather: 20 };
+  const soft = await removeBackground(image, { ...options, decontaminate: false }, immediate);
+  const clean = await removeBackground(image, { ...options, decontaminate: true }, immediate);
+  assert.equal(soft.data[3], 128);
+  assert.equal(clean.data[3], 128);
+  assert.equal(soft.data[0], 235);
+  assert.equal(clean.data[0], 215);
+});
+
+test('removal multiplies rather than replaces existing partial alpha', async () => {
+  const image = raster(1, 1, () => [235, 235, 235, 100]);
+  const output = await removeBackground(image, { color: [255, 255, 255], tolerance: 10, feather: 20 }, immediate);
+  assert.deepEqual(Array.from(output.data), [235, 235, 235, 50]);
+});
+
+test('reports a fully removed image and an unmatched key without fake success', async () => {
+  const empty = await removeBackground(raster(3, 3), key, immediate);
+  assert.equal(empty.visiblePixels, 0);
+  assert.equal(empty.changedPixels, 9);
+  const unchanged = await removeBackground(raster(3, 3, () => ink), key, immediate);
+  assert.equal(unchanged.visiblePixels, 9);
+  assert.equal(unchanged.changedPixels, 0);
+});
+
+test('transparent border pixels allow a manually selected background to flood inward', async () => {
+  const image = raster(5, 5, (x, y) => x === 0 || y === 0 || x === 4 || y === 4 ? [0, 0, 0, 0] : x === 2 && y === 2 ? ink : paper);
+  const output = await removeBackground(image, key, immediate);
+  assert.equal(output.visiblePixels, 1);
+  assert.deepEqual(pixelAt(output, 2, 2), ink);
+});
+
+test('large jobs yield and cancel obsolete previews', async () => {
+  let cancelled = false;
+  let yields = 0;
+  await assert.rejects(removeBackground(raster(512, 512), key, {
+    cancelled: () => cancelled,
+    yieldControl: async () => { yields++; cancelled = true; },
+  }), error => error.name === 'AbortError');
+  assert.equal(yields, 1);
+});
+
+test('rejects malformed dimensions and options', async () => {
+  await assert.rejects(removeBackground({ width: 2, height: 1, data: new Uint8ClampedArray(4) }, key), /dimensions/);
+  await assert.rejects(removeBackground(raster(1, 1), { color: [NaN, 0, 0] }), /options/);
+});
diff --git a/MiniApp/Demo/background-remover/tests/delivery.test.mjs b/MiniApp/Demo/background-remover/tests/delivery.test.mjs
new file mode 100644
index 0000000000..5a94a00987
--- /dev/null
+++ b/MiniApp/Demo/background-remover/tests/delivery.test.mjs
@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import test from 'node:test';
+import vm from 'node:vm';
+
+const read = relative => fs.readFileSync(new URL(relative, import.meta.url), 'utf8');
+
+test('standalone output embeds its assets and has syntactically valid scripts', () => {
+  const html = read('../../../../output/miniapps/background-remover.html');
+  assert.ok(html.includes('<style>'));
+  assert.ok(html.includes('id="openbitfun-appearance-default"'));
+  assert.doesNotMatch(html, /<(?:script|link)[^>]+(?:src|href)\s*=\s*["']https?:/i);
+  for (const match of html.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)) new vm.Script(match[1]);
+});
+
+test('both languages cover all static and dynamic message keys', () => {
+  const context = vm.createContext({});
+  vm.runInContext(read('../source/ui/i18n.js'), context);
+  const messages = context.CutoutMessages;
+  const keys = Object.keys(messages['zh-CN']).sort();
+  assert.deepEqual(Object.keys(messages['en-US']).sort(), keys);
+  for (const match of read('../source/index.html').matchAll(/data-i18n(?:-aria)?="([^"]+)"/g)) {
+    for (const table of Object.values(messages)) assert.equal(typeof table[match[1]], 'string', match[1]);
+  }
+  for (const match of read('../source/ui/main.js').matchAll(/\b(?:status|t)\('([^']+)'/g)) {
+    for (const table of Object.values(messages)) assert.equal(typeof table[match[1]], 'string', match[1]);
+  }
+});
diff --git a/MiniApp/Demo/icon-studio-v2/AGENTS.md b/MiniApp/Demo/icon-studio-v2/AGENTS.md
new file mode 100644
index 0000000000..f3d0857e8c
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/AGENTS.md
@@ -0,0 +1,15 @@
+# Icon Studio V2.0.2
+
+From the repository root:
+
+```sh
+node MiniApp/Demo/icon-studio-v2/source/build.mjs
+python3 MiniApp/Demo/icon-studio-v2/source/package.py
+node --test MiniApp/Demo/icon-studio-v2/tests/*.test.mjs
+```
+
+After UI/color changes run `pnpm run theme:color-audit:all`.
+Edit `source/ui/*.js`, then regenerate `source/ui.js`. Deliverables go under
+ignored `output/miniapps/`. Do not write host-managed `compiled.html` or install
+by modifying user data. Use the host importer for the generated `.bfminiapp`.
+Do not use Computer Use or browser control for verification unless requested.
diff --git a/MiniApp/Demo/icon-studio-v2/README.md b/MiniApp/Demo/icon-studio-v2/README.md
new file mode 100644
index 0000000000..ba18880f0a
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/README.md
@@ -0,0 +1,95 @@
+# 图标工坊 / Icon Studio V2.0.2
+
+从单色位图开始，描摹像素轮廓、编辑矢量节点，再绘制适合应用内使用的 SVG 图标。
+这是独立的 V2.0.2 小应用，保留原有「轻抠」工具。无需网络、模型、账号或 Node Worker。
+
+## 运行与安装
+
+从仓库根目录执行：
+
+```sh
+node MiniApp/Demo/icon-studio-v2/source/build.mjs
+python3 MiniApp/Demo/icon-studio-v2/source/package.py
+```
+
+- 独立版本：打开 `output/miniapps/icon-studio-v2.0.2.html`，无需启动服务。
+- Mini App：在 OpenBitFun 的「导入小应用」菜单中导入
+  `output/miniapps/icon-studio-v2.0.2.bfminiapp`，审阅权限后确认。
+- 也可「从文件夹导入」本目录（含 `meta.json` 的目录）。
+
+源码和 HTML 不会自动注册到 Mini App 列表。本次生成安装包，不直接改写用户的应用数据。
+版本名称、工程 release 与 package.json 为 `2.0.2`；`meta.json.version` 是宿主管理的整数内容修订，
+不是语义版本号，不能用字符串 `2.0.2` 替换。
+
+## 从图片开始
+
+1. 上传、拖入或粘贴 PNG、JPG、WebP，自动生成一个新的矢量图层。
+2. 自动选择透明 Alpha 或背景差分，追踪外轮廓与内部镂空，合并成 evenodd 复合路径。
+3. 用对比阈值、轮廓简化、平滑、最小区域调整描摹，再点击「描摹为新图层」。
+   重新描摹会新增图层，保留已编辑的路径，方便比较或撤销。
+4. 按 A 拖动节点；选中节点后可调整贝塞尔手柄、输入坐标、插入／删除、平滑／尖角转换。
+
+描摹按最长边 512px 采样，保留原图宽高比并映射到 24×24 画布。
+输入限制为 20 MiB、1600 万像素、单边 8192px；超限明确报错，不覆盖当前矢量画布。
+支持简单背景的单色图标；复杂照片、多色分层和自动中线骨架识别不在本版本范围。
+轮廓描摹不会把图像理解为“首页”“下载”，也不会伪装成经过设计师规范化的线框图标。
+降低简化可以保留更多细节，提高最小区域可以过滤小噪点。
+
+## 绘制与编辑
+
+- V：选择／拖动图层；A：节点与曲线手柄；双击路径插入节点。
+- P：钢笔逐点绘制，拖动创建贝塞尔手柄，点击起点闭合，Enter 完成。
+- B：自由绘制；L：直线；R：矩形；O：椭圆。按 Shift 绘制正方形／正圆。
+- Esc：取消当前绘制／拖动；Delete 删除节点或图层；方向键微调，Shift + 方向键按 1px 移动。
+- 默认 0.5px 吸附，可改成 1px 或关闭；拖动时按 Alt 临时关闭吸附。
+- Cmd/Ctrl + Z 撤销，Cmd/Ctrl + Shift + Z 或 Ctrl + Y 重做，Cmd/Ctrl + D 复制图层。
+- 图层支持命名、隐藏、前后排序、复制、删除、位置／尺寸、居中与适配安全区。
+- 每层可选择填充／描边、描边宽度、端点和转角。描摹层默认填充；绘制层默认 2px 圆头圆角描边。
+- 提供首页与下载的可编辑几何起点，以及 16／20／24／32px 的常规与反色实际尺寸预览。
+
+画布缩放仅放大编辑视图。它不增加 SVG 本身的像素尺寸。
+安全区为 20×20（画布内 2px 留白），适配操作还会预留半个描边宽度以免裁切。
+控制点范围用于保守边界估算；曲线的实际光学重心仍需在小尺寸下检查。
+
+## 导出与保存
+
+SVG 使用标准 `viewBox="0 0 24 24"`、`currentColor`、无位图、无背景、无脚本、无编辑网格与手柄。
+外部应用通过 CSS 的 `color` 统一控制颜色。导出包含用户名称作为 `aria-label`；
+如果应用把图标当作纯装饰，应由组件设置合适的 `aria-hidden`，并在按钮上提供可访问名称。
+
+可保存／导入 `.icon.json` 工程，保留所有矢量节点、手柄、图层和样式。
+参考位图只在当前页面内存中存在，不嵌入 SVG、不进入自动保存或工程文件；重开后需要重新导入参考图。
+自动保存使用宿主 `app.storage`，独立版使用页面 LocalStorage；保存不可用时明确提示导出工程。
+未知 schemaVersion、无效坐标或损坏工程会保留原记录及当前画布，并给出错误，不清空用户数据。
+支持至多 512 个图层、20000 个工程节点；复杂描摹会明确提示降低复杂度。
+
+仅申请 `{user-selected}` 写权限，以宿主文件选择器选定的路径保存 SVG／工程。
+不读工作区、不执行命令、不联网；输入来自当前页面的文件选择器、拖拽或粘贴。
+未宣称已安装到宿主。远程工作区、远程控制、Peer Device Mode、Detached Dispatch
+未做端到端验证；本地算法测试不代表这些宿主均提供图片选择、存储或保存能力。
+
+## 设计依据
+
+- [Lucide design principles](https://lucide.dev/contribute/icons/design-principles)：
+  24px 基准、2px 描边、圆头圆角、清晰留白、像素对齐、低复杂度与小尺寸光学检查。
+  本工具使用可调整参数；不声称任意自动描摹都符合 Lucide 的完整设计规则。
+- [W3C SVG paths](https://www.w3.org/TR/SVG2/paths.html)：节点、复合路径和三次贝塞尔曲线。
+- [W3C SVG painting](https://www.w3.org/TR/SVG2/painting.html)：currentColor 与 evenodd 镂空。
+
+## 验证
+
+```sh
+node --test MiniApp/Demo/icon-studio-v2/tests/*.test.mjs
+pnpm run theme:color-audit:all
+```
+
+验证几何与描摹、旧工程缺省字段、安全导出、操作历史，以及导入真实测试图后导出 SVG 的链路。
+遵循用户要求，不使用 Computer Use 或浏览器控制验证。DOM 模拟检查不等同于实际宿主的视觉验收。
+
+## English
+
+An offline vector icon editor with raster silhouette tracing, editable compound paths and Bézier handles,
+pen/freehand/geometric drawing, undo/redo, half-pixel snapping and actual-size previews.
+Build the standalone HTML and `.bfminiapp` package with the commands above, then use OpenBitFun's importer.
+Export clean `currentColor` SVGs or round-trip the editable `.icon.json` project.
+Raster tracing preserves silhouettes and holes; centerline reconstruction and semantic icon recognition are not provided.
diff --git a/MiniApp/Demo/icon-studio-v2/meta.json b/MiniApp/Demo/icon-studio-v2/meta.json
new file mode 100644
index 0000000000..4d0e509a41
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/meta.json
@@ -0,0 +1,21 @@
+{
+  "id": "icon-studio-v2",
+  "name": "图标工坊 V2.0.2",
+  "description": "V2.0.2：将简单单色图片描摹为可编辑矢量图标。支持钢笔、节点与贝塞尔手柄、几何绘制、像素吸附、撤销重做、实际尺寸预览和 currentColor SVG 导出。",
+  "icon": "PenTool",
+  "category": "creative",
+  "tags": ["icon", "svg", "vector", "design"],
+  "version": 1,
+  "created_at": 0,
+  "updated_at": 0,
+  "permissions": {
+    "fs": { "read": [], "write": ["{user-selected}"] },
+    "shell": { "allow": [] },
+    "net": { "allow": [] },
+    "node": { "enabled": false }
+  },
+  "i18n": { "locales": {
+    "zh-CN": { "name": "图标工坊 V2.0.2", "description": "导入位图、描摹矢量、调整节点并绘制应用内图标，导出 SVG。", "tags": ["图标", "矢量", "绘制", "设计"] },
+    "en-US": { "name": "Icon Studio V2.0.2", "description": "Trace monochrome images, edit vector nodes, draw UI icons, and export SVG.", "tags": ["icon", "vector", "draw", "design"] }
+  } }
+}
diff --git a/MiniApp/Demo/icon-studio-v2/package.json b/MiniApp/Demo/icon-studio-v2/package.json
new file mode 100644
index 0000000000..4e61d9e7b9
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "miniapp-icon-studio-v2",
+  "version": "2.0.2",
+  "private": true,
+  "scripts": { "build": "node source/build.mjs", "test": "node --test tests/*.test.mjs" }
+}
diff --git a/MiniApp/Demo/icon-studio-v2/source/build.mjs b/MiniApp/Demo/icon-studio-v2/source/build.mjs
new file mode 100644
index 0000000000..acd6138b46
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/build.mjs
@@ -0,0 +1,25 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const sourceRoot = path.dirname(fileURLToPath(import.meta.url));
+const appRoot = path.dirname(sourceRoot);
+const repoRoot = path.resolve(appRoot, '../../..');
+const inputs = ['ui/geometry.js', 'ui/trace.js', 'ui/i18n.js', 'ui/state.js', 'ui/render.js', 'ui/interactions.js', 'ui/io.js', 'ui/boot.js'];
+const bundle = inputs.map(file => `/* ${file} */\n${fs.readFileSync(path.join(sourceRoot, file), 'utf8')}\n`).join('');
+fs.writeFileSync(path.join(sourceRoot, 'ui.js'), bundle);
+
+// This is an offline user deliverable, not the host-managed compiled.html.
+// Reuse the canonical first-paint projection instead of creating another palette.
+const appearance = fs.readFileSync(path.join(repoRoot,
+  'src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html'), 'utf8');
+const css = fs.readFileSync(path.join(sourceRoot, 'style.css'), 'utf8');
+const html = fs.readFileSync(path.join(sourceRoot, 'index.html'), 'utf8');
+const escapeScript = script => script.replace(/<\/script/gi, '<\\/script');
+const standalone = html
+  .replace('</head>', `${appearance}\n<style>\n${css}\n</style>\n</head>`)
+  .replace('</body>', `<script>\n${escapeScript(bundle)}\n</script>\n</body>`);
+const outputDir = path.join(repoRoot, 'output', 'miniapps');
+fs.mkdirSync(outputDir, { recursive: true });
+fs.writeFileSync(path.join(outputDir, 'icon-studio-v2.0.2.html'), standalone);
+console.log('Built MiniApp source/ui.js and standalone output/miniapps/icon-studio-v2.0.2.html');
diff --git a/MiniApp/Demo/icon-studio-v2/source/esm_dependencies.json b/MiniApp/Demo/icon-studio-v2/source/esm_dependencies.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/esm_dependencies.json
@@ -0,0 +1 @@
+[]
diff --git a/MiniApp/Demo/icon-studio-v2/source/index.html b/MiniApp/Demo/icon-studio-v2/source/index.html
new file mode 100644
index 0000000000..42943dac43
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Icon Studio V2.0.2</title></head>
+<body>
+  <main class="studio">
+    <header class="topbar">
+      <div class="brand"><strong data-i18n="title"></strong><span class="version">V2.0.2</span><span class="tagline" data-i18n="tagline"></span></div>
+      <div class="actions"><button id="import" data-i18n="import"></button><button id="export" class="primary" data-i18n="svg"></button><button id="language" data-i18n="language"></button><button id="theme" data-i18n="theme" hidden></button></div>
+    </header>
+    <input id="file" type="file" accept="image/png,image/jpeg,image/webp,.json" hidden />
+    <div class="editor-layout">
+      <aside class="left-panel">
+        <label for="name" data-i18n="name"></label><input id="name" type="text" value="icon" maxlength="80" />
+        <div class="button-row"><button id="new" data-i18n="new"></button><button id="project" data-i18n="project"></button></div>
+        <h2 data-i18n="tools"></h2>
+        <div id="tools" class="tool-grid" role="toolbar" data-i18n-aria="tools">
+          <button data-tool="select" data-i18n="select" aria-pressed="true"></button><button data-tool="node" data-i18n="node" aria-pressed="false"></button>
+          <button data-tool="pen" data-i18n="pen" aria-pressed="false"></button><button data-tool="pencil" data-i18n="pencil" aria-pressed="false"></button>
+          <button data-tool="line" data-i18n="line" aria-pressed="false"></button><button data-tool="rect" data-i18n="rect" aria-pressed="false"></button>
+          <button data-tool="ellipse" data-i18n="ellipse" aria-pressed="false"></button>
+        </div>
+        <div class="button-row"><button id="undo" data-i18n="undo"></button><button id="redo" data-i18n="redo"></button></div>
+        <h2 data-i18n="templates"></h2><div class="button-row"><button id="home" data-i18n="home"></button><button id="download-starter" data-i18n="download"></button></div>
+        <h2 data-i18n="layers"></h2><div id="layers" class="layers"></div>
+        <div class="button-row compact"><button id="duplicate" data-i18n="duplicate"></button><button id="delete" data-i18n="delete"></button></div>
+        <div class="button-row compact"><button id="raise" data-i18n="up"></button><button id="lower" data-i18n="down"></button></div>
+      </aside>
+      <section class="canvas-panel">
+        <div class="canvas-toolbar">
+          <label><input id="grid" type="checkbox" checked /><span data-i18n="grid"></span></label>
+          <label><span data-i18n="snap"></span><select id="snap"><option value="0" data-i18n="off"></option><option value="0.5" selected>0.5px</option><option value="1">1px</option></select></label>
+          <label><span data-i18n="zoom"></span><select id="zoom"><option value="360">1500%</option><option value="480" selected>2000%</option><option value="720">3000%</option><option value="960">4000%</option></select></label>
+        </div>
+        <div id="viewport" class="viewport">
+          <svg id="canvas" class="drawing-canvas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="480" height="480" tabindex="0" role="application" data-i18n-aria="canvas">
+            <defs><pattern id="pixel-grid" width="1" height="1" patternUnits="userSpaceOnUse"><path d="M1 0H0V1" class="grid-line" /></pattern></defs>
+            <rect x="0" y="0" width="24" height="24" class="canvas-bg" />
+            <image id="reference-image" x="0" y="0" width="24" height="24" preserveAspectRatio="xMidYMid meet" opacity="0.25" pointer-events="none" />
+            <rect id="grid-overlay" x="0" y="0" width="24" height="24" fill="url(#pixel-grid)" pointer-events="none" />
+            <rect x="2" y="2" width="20" height="20" class="safe-area" pointer-events="none" />
+            <g id="art"></g><g id="draft"></g><g id="handles"></g>
+          </svg>
+        </div>
+        <div class="canvas-footer"><span data-i18n="guide"></span><span id="node-count"></span></div>
+        <section class="preview-panel"><h2 data-i18n="preview"></h2><div id="previews" class="previews"></div></section>
+        <details class="code-panel"><summary data-i18n="code"></summary><textarea id="code" readonly spellcheck="false" data-i18n-aria="code"></textarea><button id="copy" data-i18n="copy"></button><p class="hint" data-i18n="noRasterExport"></p></details>
+      </section>
+      <aside class="right-panel">
+        <h2 data-i18n="properties"></h2><p id="no-selection" class="hint" data-i18n="noSelection"></p>
+        <fieldset id="properties" disabled>
+          <label for="layer-name" data-i18n="layerName"></label><input id="layer-name" maxlength="80" />
+          <label class="check"><input id="visible" type="checkbox" /><span data-i18n="visible"></span></label>
+          <div class="fields"><label>X<input id="shape-x" type="number" step="0.5" /></label><label>Y<input id="shape-y" type="number" step="0.5" /></label><label>W<input id="shape-w" type="number" min="0.1" step="0.5" /></label><label>H<input id="shape-h" type="number" min="0.1" step="0.5" /></label></div>
+          <label class="check"><input id="fill" type="checkbox" /><span data-i18n="filled"></span></label><label class="check"><input id="stroke" type="checkbox" /><span data-i18n="stroked"></span></label>
+          <label class="field-label"><span data-i18n="width"></span><input id="stroke-width" type="number" min="0.1" max="8" step="0.25" value="2" /></label>
+          <div class="fields"><label><span data-i18n="cap"></span><select id="cap"><option value="round" data-i18n="round"></option><option value="butt" data-i18n="butt"></option><option value="square" data-i18n="square"></option></select></label><label><span data-i18n="join"></span><select id="join"><option value="round" data-i18n="round"></option><option value="miter" data-i18n="miter"></option><option value="bevel" data-i18n="bevel"></option></select></label></div>
+          <button id="fit" class="wide" data-i18n="fit"></button><button id="center" class="wide" data-i18n="center"></button><button id="close-path" class="wide" data-i18n="closePath"></button>
+        </fieldset>
+        <section id="node-properties" hidden><h2 data-i18n="nodeTitle"></h2><div class="fields"><label>X<input id="node-x" type="number" step="0.5" data-i18n-aria="nodeX" /></label><label>Y<input id="node-y" type="number" step="0.5" data-i18n-aria="nodeY" /></label></div><div class="button-row"><button id="smooth" data-i18n="smooth"></button><button id="corner" data-i18n="corner"></button></div><div class="button-row"><button id="insert-node" data-i18n="insert"></button><button id="delete-node" data-i18n="removeNode"></button></div></section>
+        <section class="trace-panel"><h2 data-i18n="traceTitle"></h2>
+          <fieldset id="trace-controls" disabled>
+            <label for="trace-contrast"><span data-i18n="contrast"></span><output id="trace-contrast-value">28</output></label><input id="trace-contrast" type="range" min="1" max="180" value="28" />
+            <label for="trace-simplify"><span data-i18n="simplify"></span><output id="trace-simplify-value">1.5</output></label><input id="trace-simplify" type="range" min="0.25" max="4" step="0.25" value="1.5" />
+            <label for="trace-smoothing"><span data-i18n="smoothing"></span><output id="trace-smoothing-value">0.7</output></label><input id="trace-smoothing" type="range" min="0" max="1" step="0.1" value="0.7" />
+            <label for="trace-minArea"><span data-i18n="minArea"></span><output id="trace-minArea-value">6</output></label><input id="trace-minArea" type="range" min="1" max="128" value="6" />
+            <button id="trace" class="wide" data-i18n="trace"></button>
+          </fieldset><p class="hint" data-i18n="traceHelp"></p><p class="hint" data-i18n="sampling"></p>
+          <div id="reference-controls" hidden><h2 data-i18n="reference"></h2><label class="check"><input id="show-reference" type="checkbox" checked /><span data-i18n="hideRef"></span></label><label for="reference-opacity" data-i18n="opacity"></label><input id="reference-opacity" type="range" min="0" max="1" value="0.25" step="0.05" /></div>
+        </section>
+      </aside>
+    </div>
+    <footer><p id="status" role="status" aria-live="polite"></p><p id="instructions" data-i18n="help"></p><p class="hint" data-i18n="autosave"></p></footer>
+  </main>
+</body>
+</html>
diff --git a/MiniApp/Demo/icon-studio-v2/source/package.py b/MiniApp/Demo/icon-studio-v2/source/package.py
new file mode 100644
index 0000000000..88ded9b925
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/package.py
@@ -0,0 +1,40 @@
+"""Package the built MiniApp for OpenBitFun's local .bfminiapp importer."""
+
+import json
+from pathlib import Path
+from zipfile import ZIP_DEFLATED, ZipFile, ZipInfo
+
+
+def main():
+    app_root = Path(__file__).resolve().parent.parent
+    repo_root = app_root.parents[2]
+    modules = ['ui/geometry.js', 'ui/trace.js', 'ui/i18n.js', 'ui/state.js', 'ui/render.js', 'ui/interactions.js', 'ui/io.js', 'ui/boot.js']
+    expected = "".join(
+        f"/* {name} */\n{(app_root / 'source' / name).read_text(encoding='utf-8')}\n"
+        for name in modules
+    )
+    if (app_root / "source/ui.js").read_text(encoding="utf-8") != expected:
+        raise SystemExit("Source bundle is stale. Run node source/build.mjs first.")
+
+    source_meta = json.loads((app_root / "meta.json").read_text(encoding="utf-8"))
+    # Local packages use MarketPackageMeta. Identity and install timestamps belong
+    # to the importing host; no source paths or user storage enter the package.
+    fields = ["name", "description", "icon", "category", "tags", "version", "permissions", "i18n"]
+    meta = {key: source_meta[key] for key in fields if key in source_meta}
+    files = {"meta.json": json.dumps(meta, ensure_ascii=False, indent=2).encode("utf-8")}
+    for name in ["index.html", "style.css", "ui.js", "worker.js", "esm_dependencies.json"]:
+        files[f"source/{name}"] = (app_root / "source" / name).read_bytes()
+
+    destination = repo_root / "output/miniapps/icon-studio-v2.0.2.bfminiapp"
+    destination.parent.mkdir(parents=True, exist_ok=True)
+    with ZipFile(destination, "w") as package:
+        for name, content in files.items():
+            entry = ZipInfo(name, date_time=(1980, 1, 1, 0, 0, 0))
+            entry.compress_type = ZIP_DEFLATED
+            entry.external_attr = 0o100644 << 16
+            package.writestr(entry, content)
+    print(f"Built {destination.name}")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/MiniApp/Demo/icon-studio-v2/source/style.css b/MiniApp/Demo/icon-studio-v2/source/style.css
new file mode 100644
index 0000000000..28b698dd1f
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/style.css
@@ -0,0 +1,106 @@
+/* === Design System ===
+ * Theme: A compact vector workbench using the host's light/dark appearance.
+ * Palette: Public MiniApp surface, content, border and focus tokens only.
+ * Typography: Host sans 13px body; 18px brand; host mono for SVG and coordinates.
+ * Radius: Host card radius; 6px controls.
+ * Motif: One-pixel panel dividers, a precise canvas and repeated property rows.
+ * Authored artwork uses currentColor; its appearance follows preview context.
+ * ===================== */
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+:root { color-scheme: dark; }
+:root[data-openbitfun-appearance-mode="light"] { color-scheme: light; }
+body { margin: 0; font: 13px/1.5 var(--openbitfun-font-sans); color: var(--openbitfun-text); background: var(--openbitfun-bg); }
+button, input, select, textarea { font: inherit; color: inherit; }
+button, select, input:not([type="range"]):not([type="checkbox"]) { min-height: 34px; border: 1px solid var(--openbitfun-border); border-radius: 6px; background: var(--openbitfun-field-bg); padding: 6px 8px; }
+button { cursor: pointer; background: var(--openbitfun-element-bg); }
+button:hover:not(:disabled) { background: var(--openbitfun-element-hover); }
+button:disabled, fieldset:disabled { opacity: .45; cursor: default; }
+button[aria-pressed="true"] { color: var(--openbitfun-accent); border-color: var(--openbitfun-accent); background: color-mix(in srgb, var(--openbitfun-accent) 10%, var(--openbitfun-bg)); }
+button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, svg:focus-visible { outline: 2px solid var(--openbitfun-focus-ring); outline-offset: 2px; }
+.primary { background: var(--openbitfun-accent); color: var(--openbitfun-text-on-accent); border-color: transparent; }
+.primary:hover:not(:disabled) { background: var(--openbitfun-accent-hover); }
+.topbar, .brand, .actions, .button-row, .canvas-toolbar, .canvas-footer, .previews { display: flex; align-items: center; gap: 8px; }
+.topbar { padding: 12px 16px; border-bottom: 1px solid var(--openbitfun-border); justify-content: space-between; flex-wrap: wrap; }
+.brand strong { font-size: 18px; font-weight: 600; }
+.version { font: 12px var(--openbitfun-font-mono); color: var(--openbitfun-text-secondary); border: 1px solid var(--openbitfun-border); border-radius: 6px; padding: 3px 6px; }
+.tagline { color: var(--openbitfun-text-secondary); margin-left: 8px; }
+.editor-layout { display: grid; grid-template-columns: 204px minmax(360px, 1fr) 252px; min-height: calc(100vh - 164px); }
+.left-panel, .right-panel { padding: 16px 12px; background: var(--openbitfun-bg-secondary); }
+.left-panel { border-right: 1px solid var(--openbitfun-border); }
+.right-panel { border-left: 1px solid var(--openbitfun-border); }
+h2 { font-size: 13px; font-weight: 600; margin: 20px 0 10px; }
+.right-panel > h2:first-child { margin-top: 0; }
+.left-panel > input { width: 100%; margin: 4px 0 8px; }
+.button-row { margin: 8px 0; align-items: stretch; }
+.button-row > button { flex: 1; min-width: 0; }
+.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
+.tool-grid button { text-align: left; }
+.layers { min-height: 80px; max-height: 260px; overflow-y: auto; }
+.layer { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid transparent; border-radius: 6px; }
+.layer.active { border-color: var(--openbitfun-accent); }
+.layer button { border: 0; background: transparent; text-align: left; width: 100%; overflow-wrap: anywhere; }
+.layer input { flex-shrink: 0; }
+input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--openbitfun-accent); }
+input[type="range"] { display: block; width: 100%; margin: 0 0 8px; height: 32px; accent-color: var(--openbitfun-accent); }
+fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
+fieldset > input { width: 100%; }
+label.check, .canvas-toolbar label { display: flex; align-items: center; gap: 6px; min-height: 34px; cursor: pointer; }
+.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
+.fields label > input, .fields label > select { display: block; width: 100%; margin-top: 4px; }
+.field-label, #trace-controls > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
+.field-label input { width: 76px; }
+.wide { display: block; width: 100%; margin: 8px 0; }
+.hint, .canvas-footer, #instructions { color: var(--openbitfun-text-secondary); }
+.hint { margin: 8px 0; font-size: 13px; }
+.canvas-panel { min-width: 0; }
+.canvas-toolbar { padding: 8px 12px; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid var(--openbitfun-border-subtle); }
+.viewport { height: 520px; overflow: auto; display: flex; align-items: flex-start; justify-content: flex-start; padding: 24px; background: var(--openbitfun-bg-tertiary); }
+.drawing-canvas { flex-shrink: 0; display: block; margin: auto; background: var(--openbitfun-bg); box-shadow: var(--openbitfun-shadow-card); touch-action: none; color: var(--openbitfun-text-secondary); user-select: none; }
+.canvas-bg { fill: var(--openbitfun-bg); }
+.grid-line { fill: none; stroke: var(--openbitfun-border-subtle); stroke-width: .025; }
+.safe-area { fill: none; stroke: var(--openbitfun-border); stroke-width: .04; stroke-dasharray: .2 .2; }
+.selection-box { fill: none; stroke: var(--openbitfun-accent); stroke-width: .05; stroke-dasharray: .2 .15; pointer-events: none; }
+.node-point { fill: var(--openbitfun-bg); stroke: var(--openbitfun-accent); stroke-width: .06; }
+.node-point.active { fill: var(--openbitfun-accent); }
+.node-hit { fill: transparent; cursor: move; }
+.control-line { fill: none; stroke: var(--openbitfun-accent); stroke-width: .04; pointer-events: none; }
+.control-point { fill: var(--openbitfun-bg); stroke: var(--openbitfun-accent); stroke-width: .05; cursor: move; }
+.art-hit { fill: none; stroke: transparent; stroke-width: .65; cursor: move; }
+#art > g { cursor: move; }
+.canvas-footer { padding: 10px 12px; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid var(--openbitfun-border-subtle); }
+.preview-panel { padding: 0 16px 12px; }
+.previews { flex-wrap: wrap; gap: 24px; }
+.preview-sample { display: flex; align-items: center; gap: 12px; }
+.preview-sample svg { display: block; color: var(--openbitfun-text-secondary); }
+.preview-pair { padding: 8px; display: flex; gap: 12px; align-items: center; border: 1px solid var(--openbitfun-border); border-radius: 6px; }
+.preview-inverse { background: var(--openbitfun-text); color: var(--openbitfun-bg); }
+.preview-inverse svg { color: inherit; }
+.code-panel { margin: 0 16px 16px; }
+summary { cursor: pointer; min-height: 34px; padding-top: 6px; }
+#code { display: block; width: 100%; height: 140px; resize: vertical; padding: 12px; margin: 8px 0; border: 1px solid var(--openbitfun-border); border-radius: 6px; background: var(--openbitfun-field-bg); font: 12px/1.5 var(--openbitfun-font-mono); }
+.trace-panel { border-top: 1px solid var(--openbitfun-border); margin-top: 16px; }
+footer { border-top: 1px solid var(--openbitfun-border); padding: 12px 16px; }
+footer p { margin: 2px 0; }
+#status { min-height: 22px; }
+#status[data-tone="error"] { color: var(--openbitfun-error); }
+#status[data-tone="warning"] { color: var(--openbitfun-warning); }
+body.dragging .studio { outline: 2px dashed var(--openbitfun-accent); outline-offset: -3px; }
+@media (max-width: 1100px) { .tagline { display: none; } .editor-layout { grid-template-columns: 180px minmax(300px, 1fr) 232px; } }
+@media (max-width: 800px) {
+  .editor-layout { grid-template-columns: 160px minmax(0, 1fr); }
+  .right-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-left: 0; border-top: 1px solid var(--openbitfun-border); }
+  .right-panel > h2, #no-selection { grid-column: 1 / -1; }
+  .trace-panel { border-top: 0; margin-top: 0; }
+  .viewport { height: 450px; padding: 16px; }
+}
+@media (max-width: 520px) {
+  .editor-layout { display: flex; flex-direction: column; }
+  .left-panel { border-right: 0; }
+  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .layers { max-height: 130px; }
+  .right-panel { display: block; }
+  .viewport { height: 400px; }
+  .actions { flex-wrap: wrap; }
+  .canvas-toolbar { justify-content: flex-start; }
+}
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui.js b/MiniApp/Demo/icon-studio-v2/source/ui.js
new file mode 100644
index 0000000000..8a173fc5a5
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui.js
@@ -0,0 +1,959 @@
+/* ui/geometry.js */
+(() => {
+  const G = {};
+  const copy = value => JSON.parse(JSON.stringify(value));
+  const point = (x, y) => ({ x, y, in: null, out: null });
+  const mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+  const xy = n => [n.x, n.y];
+  const rounded = n => Number(n.toFixed(3));
+  const escape = value => String(value).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' })[c]);
+  function pathData(shape) {
+    return shape.contours.map(contour => {
+      const nodes = contour.nodes;
+      if (!nodes.length) return '';
+      let d = `M${rounded(nodes[0].x)} ${rounded(nodes[0].y)}`;
+      const count = contour.closed ? nodes.length : nodes.length - 1;
+      for (let i = 0; i < count; i++) {
+        const a = nodes[i], b = nodes[(i + 1) % nodes.length];
+        if (a.out || b.in) {
+          const c1 = a.out || xy(a), c2 = b.in || xy(b);
+          d += `C${c1.map(rounded).join(' ')} ${c2.map(rounded).join(' ')} ${rounded(b.x)} ${rounded(b.y)}`;
+        } else if (i + 1 < nodes.length) d += `L${rounded(b.x)} ${rounded(b.y)}`;
+      }
+      return d + (contour.closed ? 'Z' : '');
+    }).join('');
+  }
+  function shapeMarkup(shape) {
+    return `<path d="${pathData(shape)}" fill="${shape.fill ? 'currentColor' : 'none'}" fill-rule="evenodd" stroke="${shape.stroke ? 'currentColor' : 'none'}" stroke-width="${rounded(shape.width)}" stroke-linecap="${shape.cap}" stroke-linejoin="${shape.join}" opacity="${rounded(shape.opacity)}"/>`;
+  }
+  function exportSVG(doc, size = 24) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="${escape(doc.name)}">\n${doc.shapes.filter(s => s.visible).map(shapeMarkup).join('\n')}\n</svg>`;
+  }
+  function bounds(shape) {
+    const points = shape.contours.flatMap(c => c.nodes.flatMap(n => [xy(n), ...(n.in ? [n.in] : []), ...(n.out ? [n.out] : [])]));
+    if (!points.length) return { x: 0, y: 0, width: 0, height: 0 };
+    const xs = points.map(p => p[0]), ys = points.map(p => p[1]);
+    const x = Math.min(...xs), y = Math.min(...ys);
+    return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+  }
+  function transform(shape, sx, sy, dx, dy, origin = [0, 0]) {
+    for (const contour of shape.contours) for (const n of contour.nodes) {
+      n.x = origin[0] + (n.x - origin[0]) * sx + dx;
+      n.y = origin[1] + (n.y - origin[1]) * sy + dy;
+      for (const key of ['in', 'out']) if (n[key]) {
+        n[key] = [origin[0] + (n[key][0] - origin[0]) * sx + dx, origin[1] + (n[key][1] - origin[1]) * sy + dy];
+      }
+    }
+  }
+  function moveNode(node, x, y) {
+    const dx = x - node.x, dy = y - node.y;
+    if (node.in) node.in = [node.in[0] + dx, node.in[1] + dy];
+    if (node.out) node.out = [node.out[0] + dx, node.out[1] + dy];
+    node.x = x; node.y = y;
+  }
+  function smoothNode(contour, index, amount = 1) {
+    const nodes = contour.nodes;
+    const node = nodes[index];
+    if ((!contour.closed && (index === 0 || index === nodes.length - 1)) || nodes.length < 3) return;
+    const prev = nodes[(index + nodes.length - 1) % nodes.length], next = nodes[(index + 1) % nodes.length];
+    const length = Math.hypot(next.x - prev.x, next.y - prev.y) || 1;
+    const radius = Math.min(Math.hypot(node.x - prev.x, node.y - prev.y), Math.hypot(next.x - node.x, next.y - node.y)) * .3 * amount;
+    const dx = (next.x - prev.x) / length * radius, dy = (next.y - prev.y) / length * radius;
+    node.in = [node.x - dx, node.y - dy]; node.out = [node.x + dx, node.y + dy];
+  }
+  function splitSegment(contour, index, t = .5) {
+    const a = contour.nodes[index], b = contour.nodes[(index + 1) % contour.nodes.length];
+    if (!b || !contour.closed && index === contour.nodes.length - 1) return false;
+    let node;
+    if (a.out || b.in) {
+      const p = xy(a), q = a.out || p, r = b.in || xy(b), s = xy(b);
+      const pq = mix(p, q, t), qr = mix(q, r, t), rs = mix(r, s, t);
+      const pqr = mix(pq, qr, t), qrs = mix(qr, rs, t), at = mix(pqr, qrs, t);
+      a.out = pq; b.in = rs;
+      node = { x: at[0], y: at[1], in: pqr, out: qrs };
+    } else { const at = mix(xy(a), xy(b), t); node = point(...at); }
+    contour.nodes.splice(index + 1, 0, node);
+    return true;
+  }
+  function evaluate(a, b, t) {
+    if (!a.out && !b.in) return mix(xy(a), xy(b), t);
+    const p = xy(a), q = a.out || p, r = b.in || xy(b), s = xy(b);
+    return mix(mix(mix(p, q, t), mix(q, r, t), t), mix(mix(q, r, t), mix(r, s, t), t), t);
+  }
+  function nearestSegment(shape, x, y) {
+    let best = null;
+    shape.contours.forEach((c, ci) => {
+      const count = c.closed ? c.nodes.length : c.nodes.length - 1;
+      for (let i = 0; i < count; i++) {
+        const a = c.nodes[i], b = c.nodes[(i + 1) % c.nodes.length];
+        if (!a.out && !b.in) {
+          const dx = b.x - a.x, dy = b.y - a.y, length = dx * dx + dy * dy;
+          const t = length ? Math.max(.001, Math.min(.999, ((x - a.x) * dx + (y - a.y) * dy) / length)) : .5;
+          const at = mix(xy(a), xy(b), t), distance = Math.hypot(at[0] - x, at[1] - y);
+          if (!best || distance < best.distance) best = { contour: ci, index: i, t, distance };
+          continue;
+        }
+        for (let k = 1; k < 32; k++) {
+        const t = k / 32, at = evaluate(c.nodes[i], c.nodes[(i + 1) % c.nodes.length], t);
+        const distance = Math.hypot(at[0] - x, at[1] - y);
+        if (!best || distance < best.distance) best = { contour: ci, index: i, t, distance };
+        }
+      }
+    });
+    return best;
+  }
+  function shape(contours, name = 'Path', filled = false) {
+    return { id: '', name, visible: true, fill: filled, stroke: !filled, width: 2, cap: 'round', join: 'round', opacity: 1, contours };
+  }
+  function primitive(type, a, b) {
+    const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y), w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y);
+    let nodes;
+    if (type === 'line') nodes = [point(a.x, a.y), point(b.x, b.y)];
+    else if (type === 'rect') nodes = [point(x, y), point(x + w, y), point(x + w, y + h), point(x, y + h)];
+    else {
+      const cx = x + w / 2, cy = y + h / 2, rx = w / 2, ry = h / 2, k = .5522847498;
+      nodes = [
+        { x: cx, y, in: [cx - rx * k, y], out: [cx + rx * k, y] },
+        { x: x + w, y: cy, in: [x + w, cy - ry * k], out: [x + w, cy + ry * k] },
+        { x: cx, y: y + h, in: [cx + rx * k, y + h], out: [cx - rx * k, y + h] },
+        { x, y: cy, in: [x, cy + ry * k], out: [x, cy - ry * k] },
+      ];
+    }
+    return shape([{ closed: type !== 'line', nodes }], type);
+  }
+  function simplify(points, epsilon) {
+    if (points.length <= 2) return points.map(p => [...p]);
+    const keep = new Uint8Array(points.length); keep[0] = 1; keep[points.length - 1] = 1;
+    const work = [[0, points.length - 1]];
+    while (work.length) {
+      const [first, last] = work.pop(), a = points[first], b = points[last];
+      const dx = b[0] - a[0], dy = b[1] - a[1], length = dx * dx + dy * dy;
+      let max = epsilon * epsilon, index = -1;
+      for (let i = first + 1; i < last; i++) {
+        const p = points[i], t = length ? Math.max(0, Math.min(1, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / length)) : 0;
+        const distance = (p[0] - a[0] - t * dx) ** 2 + (p[1] - a[1] - t * dy) ** 2;
+        if (distance > max) { max = distance; index = i; }
+      }
+      if (index >= 0) { keep[index] = 1; work.push([first, index], [index, last]); }
+    }
+    return points.filter((_, i) => keep[i]).map(p => [...p]);
+  }
+  function simplifyClosed(points, epsilon) {
+    if (points.length < 4) return points;
+    let far = 1, distance = 0;
+    for (let i = 1; i < points.length; i++) {
+      const d = (points[i][0] - points[0][0]) ** 2 + (points[i][1] - points[0][1]) ** 2;
+      if (d > distance) { far = i; distance = d; }
+    }
+    return [...simplify(points.slice(0, far + 1), epsilon).slice(0, -1),
+      ...simplify([...points.slice(far), points[0]], epsilon).slice(0, -1)];
+  }
+  function normalizeProject(raw) {
+    if (!raw || typeof raw !== 'object' || raw.schemaVersion !== 1 || !Array.isArray(raw.shapes)
+      || raw.shapes.length > 512) throw new Error('invalidProject');
+    let total = 0;
+    const finite = v => typeof v === 'number' && Number.isFinite(v) && Math.abs(v) <= 10000;
+    const handle = value => value == null ? null : Array.isArray(value) && value.length === 2 && value.every(finite) ? [...value] : (() => { throw new Error('invalidProject'); })();
+    const ids = new Set();
+    const shapes = raw.shapes.map((s, i) => {
+      if (!s || !Array.isArray(s.contours) || !s.contours.length || s.contours.length > 1024) throw new Error('invalidProject');
+      const contours = s.contours.map(c => {
+        if (!c || !Array.isArray(c.nodes) || c.nodes.length < 2 || c.closed && c.nodes.length < 3) throw new Error('invalidProject');
+        total += c.nodes.length;
+        if (total > 20000) throw new Error('invalidProject');
+        return { closed: Boolean(c.closed), nodes: c.nodes.map(n => {
+          if (!n || !finite(n.x) || !finite(n.y)) throw new Error('invalidProject');
+          return { x: n.x, y: n.y, in: handle(n.in), out: handle(n.out) };
+        }) };
+      });
+      const id = typeof s.id === 'string' && /^[a-zA-Z0-9_-]{1,80}$/.test(s.id) ? s.id : `shape-${i}`;
+      if (ids.has(id)) throw new Error('invalidProject'); ids.add(id);
+      return { ...shape(contours), id, name: String(s.name || 'Path').slice(0, 80), visible: s.visible !== false,
+        fill: Boolean(s.fill), stroke: s.stroke !== false, width: finite(s.width) ? Math.max(.1, Math.min(8, s.width)) : 2,
+        cap: ['round', 'butt', 'square'].includes(s.cap) ? s.cap : 'round',
+        join: ['round', 'miter', 'bevel'].includes(s.join) ? s.join : 'round',
+        opacity: finite(s.opacity) ? Math.max(0, Math.min(1, s.opacity)) : 1 };
+    });
+    return { schemaVersion: 1, release: '2.0.2', name: String(raw.name || 'icon').slice(0, 80), shapes };
+  }
+  Object.assign(G, { copy, point, xy, mix, pathData, shapeMarkup, exportSVG, bounds, transform, moveNode, smoothNode, splitSegment, evaluate, nearestSegment, shape, primitive, simplify, simplifyClosed, normalizeProject });
+  globalThis.IconGeometry = Object.freeze(G);
+})();
+
+/* ui/trace.js */
+(() => {
+  async function trace(image, options = {}, cancelled = () => false) {
+    const { width, height, data } = image;
+    if (!Number.isInteger(width) || !Number.isInteger(height) || width < 1 || height < 1
+      || width > 512 || height > 512 || data.length !== width * height * 4) throw new Error('invalidImage');
+    const contrast = Number(options.contrast ?? 28), epsilon = Number(options.simplify ?? 1.5);
+    const minArea = Number(options.minArea ?? 6), smoothing = Number(options.smoothing ?? .7);
+    if (![contrast, epsilon, minArea, smoothing].every(Number.isFinite) || contrast < 1 || contrast > 255
+      || epsilon < 0 || epsilon > 8 || minArea < 1 || smoothing < 0 || smoothing > 1) throw new Error('invalidImage');
+    const checkpoint = async () => {
+      if (cancelled()) throw new Error('cancelled');
+      await new Promise(resolve => setTimeout(resolve, 0));
+      if (cancelled()) throw new Error('cancelled');
+    };
+    await checkpoint();
+    const border = [];
+    for (let x = 0; x < width; x++) { border.push(x * 4); if (height > 1) border.push(((height - 1) * width + x) * 4); }
+    for (let y = 1; y < height - 1; y++) { border.push(y * width * 4); if (width > 1) border.push((y * width + width - 1) * 4); }
+    const opaque = border.filter(i => data[i + 3] >= 250);
+    let transparentPixels = false;
+    for (let i = 3; i < data.length; i += 4) if (data[i] < 128) { transparentPixels = true; break; }
+    const useAlpha = transparentPixels || opaque.length < border.length * .5;
+    const median = values => values.sort((a, b) => a - b)[Math.floor(values.length / 2)] ?? 0;
+    const background = [0, 1, 2].map(c => median(opaque.map(i => data[i + c])));
+    const count = width * height;
+    const mask = new Uint8Array(count);
+    let foreground = 0;
+    for (let i = 0; i < count; i++) {
+      const p = i * 4;
+      const difference = Math.max(...background.map((v, c) => Math.abs(data[p + c] - v)));
+      if (data[p + 3] >= 128 && (useAlpha || difference >= contrast)) { mask[i] = 1; foreground++; }
+      if (i > 0 && i % 65536 === 0) await checkpoint();
+    }
+    if (!foreground) throw new Error('noForeground');
+    const seen = new Uint8Array(count), queue = new Uint32Array(count);
+    for (let i = 0; i < count; i++) {
+      if (!mask[i] || seen[i]) continue;
+      let head = 0, tail = 1; queue[0] = i; seen[i] = 1;
+      const visit = n => { if (mask[n] && !seen[n]) { seen[n] = 1; queue[tail++] = n; } };
+      while (head < tail) {
+        const n = queue[head++], x = n % width;
+        if (x > 0) visit(n - 1); if (x + 1 < width) visit(n + 1);
+        if (n >= width) visit(n - width); if (n + width < count) visit(n + width);
+        if (head % 65536 === 0) await checkpoint();
+      }
+      if (tail < minArea) for (let n = 0; n < tail; n++) mask[queue[n]] = 0;
+    }
+    await checkpoint();
+    // Directed pixel-cell boundaries form complete compound paths. At diagonal
+    // contacts prefer a right turn, keeping touching components from crossing.
+    const edges = [], outgoing = new Map(), stride = width + 1;
+    const add = (a, b, direction) => {
+      const index = edges.length;
+      edges.push({ a, b, direction, used: false });
+      if (!outgoing.has(a)) outgoing.set(a, []);
+      outgoing.get(a).push(index);
+    };
+    for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+      const n = y * width + x;
+      if (!mask[n]) continue;
+      const a = y * stride + x, b = a + 1, c = b + stride, d = a + stride;
+      if (y === 0 || !mask[n - width]) add(a, b, 0);
+      if (x === width - 1 || !mask[n + 1]) add(b, c, 1);
+      if (y === height - 1 || !mask[n + width]) add(c, d, 2);
+      if (x === 0 || !mask[n - 1]) add(d, a, 3);
+    }
+    if (edges.length > 160000) throw new Error('tooComplex');
+    await checkpoint();
+    const contours = [];
+    const scale = 24 / Math.max(width, height), dx = (24 - width * scale) / 2, dy = (24 - height * scale) / 2;
+    const priority = { 1: 0, 0: 1, 3: 2, 2: 3 };
+    let totalNodes = 0;
+    for (const first of edges) {
+      if (first.used) continue;
+      let edge = first;
+      const points = [];
+      do {
+        edge.used = true;
+        points.push([edge.a % stride, Math.floor(edge.a / stride)]);
+        if (edge.b === first.a) break;
+        const candidates = (outgoing.get(edge.b) || []).map(i => edges[i]).filter(e => !e.used);
+        candidates.sort((a, b) => priority[(a.direction - edge.direction + 4) % 4] - priority[(b.direction - edge.direction + 4) % 4]);
+        if (!candidates.length) throw new Error('traceFailed');
+        edge = candidates[0];
+      } while (points.length <= edges.length);
+      let simple = IconGeometry.simplifyClosed(points, epsilon);
+      // A tiny enclosed hole must not disappear merely because simplification
+      // would collapse its contour to a line.
+      if (simple.length < 3) simple = IconGeometry.simplifyClosed(points, 0);
+      const contour = { closed: true, nodes: simple.map(([x, y]) => IconGeometry.point(x * scale + dx, y * scale + dy)) };
+      if (smoothing) contour.nodes.forEach((node, i) => {
+        const prev = contour.nodes[(i + contour.nodes.length - 1) % contour.nodes.length], next = contour.nodes[(i + 1) % contour.nodes.length];
+        const ax = node.x - prev.x, ay = node.y - prev.y, bx = next.x - node.x, by = next.y - node.y;
+        const dot = (ax * bx + ay * by) / (Math.hypot(ax, ay) * Math.hypot(bx, by) || 1);
+        if (dot > .6) IconGeometry.smoothNode(contour, i, smoothing);
+      });
+      totalNodes += contour.nodes.length;
+      if (totalNodes > 12000 || contours.length >= 1024) throw new Error('tooComplex');
+      contours.push(contour);
+      if (contours.length % 32 === 0) await checkpoint();
+    }
+    if (!contours.length) throw new Error('noForeground');
+    await checkpoint();
+    return { shape: IconGeometry.shape(contours, 'Trace', true), nodes: totalNodes, alphaMode: useAlpha };
+  }
+  globalThis.IconTrace = Object.freeze({ trace });
+})();
+
+/* ui/i18n.js */
+(() => {
+  globalThis.StudioMessages = {
+    'zh-CN': {
+      title: '图标工坊', tagline: '从像素轮廓到可编辑图标', import: '导入图片 / 工程', new: '新建画布',
+      svg: '导出 SVG', copy: '复制 SVG', project: '保存工程', name: '图标名称', layers: '图层', emptyLayers: '导入图片或在画布上绘制。',
+      tools: '绘制工具', select: '选择 V', node: '节点 A', pen: '钢笔 P', pencil: '自由绘制 B', line: '直线 L', rect: '矩形 R', ellipse: '椭圆 O',
+      undo: '撤销', redo: '重做', duplicate: '复制图层', delete: '删除', up: '上移图层', down: '下移图层',
+      templates: '线框起点', home: '首页', download: '下载', grid: '像素网格', snap: '吸附', off: '关闭',
+      zoom: '画布缩放', reference: '参考图', opacity: '参考透明度', hideRef: '显示参考图',
+      properties: '图层属性', noSelection: '选择一个图层，或使用绘制工具。', filled: '填充轮廓', stroked: '显示描边', width: '描边宽度', cap: '端点', join: '转角',
+      round: '圆形', butt: '平头', square: '方形', miter: '尖角', bevel: '斜角',
+      fit: '适配 20px 安全区', center: '居中', closePath: '闭合路径', nodeTitle: '节点编辑', smooth: '平滑节点', corner: '转为尖角', insert: '插入节点', removeNode: '删除节点',
+      traceTitle: '图片 → 矢量', contrast: '前景对比阈值', simplify: '轮廓简化', smoothing: '曲线平滑', minArea: '最小区域（像素）', trace: '描摹为新图层',
+      traceHelp: '单色轮廓描摹，保留镂空。线框图标可在参考图上重绘中线；不会自动识别“首页”等语义。',
+      preview: '实际尺寸', code: 'SVG 源码', guide: '24×24 · 默认 2px 圆角描边 · currentColor',
+      help: 'V 选择 · A 节点 · P 钢笔 · Enter 完成 · Esc 取消 · ⌘/Ctrl Z 撤销 · 方向键微调',
+      penHelp: '逐点点击，拖动创建曲线手柄；点击起点闭合，Enter 完成。',
+      ready: '导入 PNG / JPG / WebP 自动描摹，或选择工具开始绘制。',
+      tracing: '正在分析像素并描摹轮廓…', traced: '已生成可编辑路径。按 A 调整节点与手柄。', imported: '工程已载入。',
+      saved: '文件已保存。', downloaded: '已发起文件下载。', copied: 'SVG 已复制。', emptyExport: '请先绘制或描摹一个可见图层。',
+      invalidImage: '请选择有效的 PNG / JPG / WebP 图片，最大 20 MB、1600 万像素、单边 8192 像素。',
+      invalidProject: '工程格式不受支持或数据不完整。当前画布和原文件已保留。',
+      noForeground: '未找到前景，请降低对比阈值或减小最小区域。', tooComplex: '轮廓过于复杂，请提高简化或最小区域数值，或使用更简单的图片。',
+      traceFailed: '描摹失败，请换一张简单背景的单色图片。',
+      saveFailed: '保存失败，请重试或选择可写位置。', storageFailed: '自动保存不可用，请保存工程文件。', storageInvalid: '上次保存的工程无法读取，原记录已保留。可手动导入工程。',
+      copyFailed: '剪贴板不可用，请导出 SVG 文件。', unsupportedSave: '此宿主不支持保存文件，请使用独立 HTML 版本。',
+      busy: '请等待图片处理完成。', tooSmall: '拖动距离太小，请重新绘制。',
+      layer: '路径', traceLayer: '描摹', changed: '已更新。', restored: '已恢复上次的矢量工程。',
+      autosave: '自动保存矢量工程', noRasterExport: 'SVG 不包含参考图片、网格和编辑手柄。',
+      theme: '明暗', language: 'English', canvas: '矢量绘制画布', nodeX: '节点 X', nodeY: '节点 Y',
+      visible: '显示图层', layerName: '图层名称', nodeMin: '闭合路径至少需要 3 个节点，开放路径至少需要 2 个。',
+      clipping: '部分路径可能越过画布，请检查实际尺寸预览或适配安全区。', paths: '图层', nodes: '节点',
+      sampling: '按最长边 512px 采样；参考图不会写入 SVG。',
+    },
+    'en-US': {
+      title: 'Icon Studio', tagline: 'From pixels to editable UI icons', import: 'Import image / project', new: 'New canvas',
+      svg: 'Export SVG', copy: 'Copy SVG', project: 'Save project', name: 'Icon name', layers: 'Layers', emptyLayers: 'Import an image or draw on the canvas.',
+      tools: 'Drawing tools', select: 'Select V', node: 'Nodes A', pen: 'Pen P', pencil: 'Freehand B', line: 'Line L', rect: 'Rectangle R', ellipse: 'Ellipse O',
+      undo: 'Undo', redo: 'Redo', duplicate: 'Duplicate layer', delete: 'Delete', up: 'Raise layer', down: 'Lower layer',
+      templates: 'Outline starters', home: 'Home', download: 'Download', grid: 'Pixel grid', snap: 'Snap', off: 'Off',
+      zoom: 'Canvas zoom', reference: 'Reference', opacity: 'Reference opacity', hideRef: 'Show reference',
+      properties: 'Layer properties', noSelection: 'Select a layer or choose a drawing tool.', filled: 'Fill silhouette', stroked: 'Show stroke', width: 'Stroke width', cap: 'Line cap', join: 'Line join',
+      round: 'Round', butt: 'Butt', square: 'Square', miter: 'Miter', bevel: 'Bevel',
+      fit: 'Fit 20px safe area', center: 'Center', closePath: 'Close path', nodeTitle: 'Edit node', smooth: 'Smooth node', corner: 'Corner node', insert: 'Insert node', removeNode: 'Delete node',
+      traceTitle: 'Image → vector', contrast: 'Foreground contrast', simplify: 'Simplification', smoothing: 'Curve smoothing', minArea: 'Min. area (pixels)', trace: 'Trace as new layer',
+      traceHelp: 'Monochrome silhouette tracing preserves holes. Redraw centerlines over the reference for outline icons; tracing does not infer meanings such as “Home”.',
+      preview: 'Actual sizes', code: 'SVG source', guide: '24×24 · Default 2px round strokes · currentColor',
+      help: 'V select · A nodes · P pen · Enter finish · Esc cancel · ⌘/Ctrl Z undo · Arrow keys nudge',
+      penHelp: 'Click to add nodes, drag for curve handles. Click the first node to close; Enter to finish.',
+      ready: 'Import PNG / JPG / WebP to trace automatically, or choose a drawing tool.',
+      tracing: 'Analyzing pixels and tracing contours…', traced: 'Editable paths created. Press A to edit nodes and handles.', imported: 'Project loaded.',
+      saved: 'File saved.', downloaded: 'File download started.', copied: 'SVG copied.', emptyExport: 'Draw or trace a visible layer first.',
+      invalidImage: 'Choose a valid PNG / JPG / WebP: up to 20 MB, 16 megapixels, 8192 pixels per side.',
+      invalidProject: 'Unsupported or incomplete project. The current canvas and original file are preserved.',
+      noForeground: 'No foreground found. Lower contrast or minimum area.', tooComplex: 'Too many contours. Increase simplification or minimum area, or use a simpler image.',
+      traceFailed: 'Tracing failed. Try a monochrome image with a simple background.',
+      saveFailed: 'Could not save. Try again or choose a writable location.', storageFailed: 'Autosave unavailable. Save a project file.', storageInvalid: 'The saved project could not be read. Its record is preserved; import a project manually.',
+      copyFailed: 'Clipboard unavailable. Export an SVG file instead.', unsupportedSave: 'This host cannot save files. Use the standalone HTML version.',
+      busy: 'Please wait for image processing to finish.', tooSmall: 'Drag farther to draw a shape.',
+      layer: 'Path', traceLayer: 'Trace', changed: 'Updated.', restored: 'Previous vector project restored.',
+      autosave: 'Vector project autosave', noRasterExport: 'SVG excludes the reference image, grid and editing handles.',
+      theme: 'Theme', language: '中文', canvas: 'Vector drawing canvas', nodeX: 'Node X', nodeY: 'Node Y',
+      visible: 'Show layer', layerName: 'Layer name', nodeMin: 'Closed paths need at least 3 nodes; open paths need at least 2.',
+      clipping: 'Some paths may extend beyond the canvas. Check actual sizes or fit the safe area.', paths: 'layers', nodes: 'nodes',
+      sampling: 'Sampled at up to 512px on the longest side. The reference is excluded from SVG.',
+    },
+  };
+})();
+
+/* ui/state.js */
+(() => {
+  const G = IconGeometry;
+  const S = {
+    $: id => document.getElementById(id), host: window.app,
+    locale: /^(zh|yue)/i.test(window.app?.locale || navigator.language) ? 'zh-CN' : 'en-US',
+    doc: { schemaVersion: 1, release: '2.0.2', name: 'icon', shapes: [] },
+    selected: null, node: null, tool: 'select', draft: null, gesture: null,
+    undo: [], redo: [], revision: 0, sequence: 0, job: 0, busy: false, saving: false,
+    source: null, referenceURL: '', statusKey: 'ready', tone: '',
+  };
+  S.t = key => StudioMessages[S.locale][key] || key;
+  S.status = (key, tone = '') => {
+    S.statusKey = key; S.tone = tone;
+    S.$('status').textContent = S.t(key); S.$('status').dataset.tone = tone;
+  };
+  S.current = () => S.doc.shapes.find(s => s.id === S.selected) || null;
+  S.currentNode = () => S.node ? S.current()?.contours[S.node.ci]?.nodes[S.node.ni] : null;
+  S.nextId = () => {
+    let id;
+    do { id = `path-${++S.sequence}`; } while (S.doc.shapes.some(s => s.id === id));
+    return id;
+  };
+  S.snapshot = () => G.copy(S.doc);
+  S.record = before => {
+    if (JSON.stringify(before) === JSON.stringify(S.doc)) { S.render?.(); return true; }
+    // The editor must never save a document that its own reader cannot open.
+    try { G.normalizeProject(S.doc); }
+    catch {
+      S.doc = before;
+      if (!S.current()) S.selected = S.doc.shapes.at(-1)?.id || null;
+      S.node = null; S.render?.(); S.status('tooComplex', 'warning'); return false;
+    }
+    S.undo.push(before); if (S.undo.length > 100) S.undo.shift();
+    S.redo = []; S.revision++; S.autosave?.(); S.render?.();
+    if (S.doc.shapes.some(shape => {
+      const b = G.bounds(shape), padding = shape.stroke ? shape.width / 2 : 0;
+      return shape.visible && (b.x - padding < 0 || b.y - padding < 0 || b.x + b.width + padding > 24 || b.y + b.height + padding > 24);
+    })) S.status('clipping', 'warning');
+    return true;
+  };
+  S.change = fn => {
+    if (S.busy || S.saving) { S.status('busy'); return false; }
+    const before = S.snapshot(); fn(); return S.record(before);
+  };
+  S.add = (shape, name) => {
+    shape.id = S.nextId(); shape.name = name || shape.name;
+    S.doc.shapes.push(shape); S.selected = shape.id; S.node = null;
+  };
+  S.history = redo => {
+    if (S.busy || S.saving) return;
+    S.draft = null; S.gesture = null;
+    const from = redo ? S.redo : S.undo, to = redo ? S.undo : S.redo;
+    if (!from.length) return;
+    to.push(S.snapshot()); S.doc = from.pop();
+    if (!S.current()) S.selected = S.doc.shapes.at(-1)?.id || null;
+    S.node = null; S.revision++; S.autosave?.(); S.render(); S.status('changed');
+  };
+  S.finishDraft = closed => {
+    if (!S.draft) return;
+    const draft = S.draft; S.draft = null;
+    const contour = draft.contours[0];
+    contour.closed = Boolean(closed);
+    if (contour.nodes.length >= (closed ? 3 : 2)) S.change(() => S.add(draft, S.t('layer')));
+    else S.render?.();
+  };
+  S.setTool = tool => {
+    if (S.busy || S.saving) return;
+    if (S.draft) S.finishDraft(false);
+    S.tool = tool; S.node = null; S.render();
+    S.status(tool === 'pen' ? 'penHelp' : 'ready');
+  };
+  S.snap = (number, disabled = false) => {
+    const step = disabled ? 0 : Number(S.$('snap').value);
+    return step ? Math.round(number / step) * step : number;
+  };
+  S.select = id => { S.selected = id; S.node = null; S.render(); };
+  globalThis.IconStudio = S;
+})();
+
+/* ui/render.js */
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const ns = 'http://www.w3.org/2000/svg';
+  const node = (tag, attrs = {}) => {
+    const el = document.createElementNS(ns, tag);
+    for (const [key, value] of Object.entries(attrs)) el.setAttribute(key, value);
+    return el;
+  };
+  function field(id, value) { if (document.activeElement !== $(id)) $(id).value = value; }
+  S.localize = () => {
+    document.documentElement.lang = S.locale;
+    document.title = `${S.t('title')} V2.0.2`;
+    document.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = S.t(el.dataset.i18n); });
+    document.querySelectorAll('[data-i18n-aria]').forEach(el => { el.setAttribute('aria-label', S.t(el.dataset.i18nAria)); });
+    S.status(S.statusKey, S.tone);
+  };
+  S.renderCanvas = () => {
+    const art = $('art'); art.replaceChildren();
+    for (const shape of S.doc.shapes) {
+      if (!shape.visible) continue;
+      const group = node('g', { 'data-shape': shape.id });
+      const path = node('path', { d: G.pathData(shape), fill: shape.fill ? 'currentColor' : 'none', stroke: shape.stroke ? 'currentColor' : 'none',
+        'fill-rule': 'evenodd', 'stroke-width': shape.width, 'stroke-linecap': shape.cap, 'stroke-linejoin': shape.join, opacity: shape.opacity });
+      group.append(path, node('path', { d: G.pathData(shape), class: 'art-hit', 'pointer-events': 'stroke' })); art.append(group);
+    }
+    const draft = $('draft'); draft.replaceChildren();
+    if (S.draft) {
+      draft.append(node('path', { d: G.pathData(S.draft), fill: 'none', stroke: 'currentColor', 'stroke-width': S.draft.width, 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'pointer-events': 'none' }));
+    }
+    const handles = $('handles'); handles.replaceChildren();
+    const selected = S.current();
+    if (selected && selected.visible) {
+      const b = G.bounds(selected);
+      handles.append(node('rect', { x: b.x - .2, y: b.y - .2, width: Math.max(.4, b.width + .4), height: Math.max(.4, b.height + .4), class: 'selection-box' }));
+      if (S.tool === 'node') selected.contours.forEach((contour, ci) => {
+        contour.nodes.forEach((n, ni) => {
+          const active = S.node?.ci === ci && S.node?.ni === ni;
+          const group = node('g', { 'data-node': ni, 'data-contour': ci });
+          group.append(node('circle', { cx: n.x, cy: n.y, r: .48, class: 'node-hit' }),
+            node('circle', { cx: n.x, cy: n.y, r: active ? .21 : .15, class: `node-point${active ? ' active' : ''}`, 'pointer-events': 'none' }));
+          handles.append(group);
+        });
+      });
+      if (S.tool === 'node' && S.currentNode()) {
+        const n = S.currentNode();
+        for (const key of ['in', 'out']) if (n[key]) {
+          const [x, y] = n[key];
+          handles.append(node('line', { x1: n.x, y1: n.y, x2: x, y2: y, class: 'control-line' }));
+          const group = node('g', { 'data-handle': key });
+          group.append(node('circle', { cx: x, cy: y, r: .48, class: 'node-hit' }), node('circle', { cx: x, cy: y, r: .15, class: 'control-point', 'pointer-events': 'none' }));
+          handles.append(group);
+        }
+      }
+    }
+    if (S.draft && S.tool === 'pen') S.draft.contours[0].nodes.forEach((n, i) => {
+      handles.append(node('circle', { cx: n.x, cy: n.y, r: .19, class: 'node-point', 'data-draft-node': i }));
+    });
+    $('grid-overlay').hidden = !$('grid').checked;
+    $('grid-overlay').style.display = $('grid').checked ? '' : 'none';
+    $('reference-image').setAttribute('href', S.referenceURL);
+    $('reference-image').setAttribute('opacity', $('show-reference').checked ? $('reference-opacity').value : '0');
+    $('canvas').style.cursor = ['select', 'node'].includes(S.tool) ? 'default' : 'crosshair';
+  };
+  S.render = () => {
+    S.renderCanvas();
+    document.querySelectorAll('[data-tool]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.tool === S.tool)));
+    const selected = S.current(), disabled = S.busy || S.saving;
+    $('properties').disabled = !selected || disabled;
+    $('no-selection').hidden = Boolean(selected);
+    field('name', S.doc.name);
+    const layers = $('layers'); layers.replaceChildren();
+    if (!S.doc.shapes.length) { const empty = document.createElement('p'); empty.className = 'hint'; empty.textContent = S.t('emptyLayers'); layers.append(empty); }
+    for (const shape of [...S.doc.shapes].reverse()) {
+      const row = document.createElement('div'); row.className = `layer${shape.id === S.selected ? ' active' : ''}`;
+      const check = document.createElement('input'); check.type = 'checkbox'; check.checked = shape.visible; check.disabled = disabled;
+      check.setAttribute('aria-label', `${S.t('visible')}: ${shape.name}`);
+      check.addEventListener('change', () => S.change(() => { shape.visible = check.checked; }));
+      const button = document.createElement('button'); button.textContent = shape.name; button.disabled = disabled;
+      button.addEventListener('click', () => S.select(shape.id)); row.append(check, button); layers.append(row);
+    }
+    if (selected) {
+      const b = G.bounds(selected);
+      field('layer-name', selected.name);
+      for (const [id, value] of [['shape-x', b.x], ['shape-y', b.y], ['shape-w', b.width], ['shape-h', b.height], ['stroke-width', selected.width]]) field(id, Number(value.toFixed(3)));
+      $('fill').checked = selected.fill; $('stroke').checked = selected.stroke; $('visible').checked = selected.visible;
+      $('cap').value = selected.cap; $('join').value = selected.join;
+    }
+    const currentNode = S.currentNode();
+    $('node-properties').hidden = !currentNode;
+    if (currentNode) { field('node-x', Number(currentNode.x.toFixed(3))); field('node-y', Number(currentNode.y.toFixed(3))); }
+    for (const id of ['duplicate', 'delete', 'fit', 'center', 'close-path', 'raise', 'lower']) $(id).disabled = !selected || disabled;
+    $('undo').disabled = !S.undo.length || disabled; $('redo').disabled = !S.redo.length || disabled;
+    $('trace-controls').disabled = !S.source || disabled;
+    $('reference-controls').hidden = !S.referenceURL;
+    for (const id of ['import', 'new', 'project', 'export', 'copy', 'home', 'download-starter', 'name']) $(id).disabled = disabled;
+    document.querySelectorAll('[data-tool]').forEach(button => { button.disabled = disabled; });
+    const svg = G.exportSVG(S.doc);
+    $('code').value = svg;
+    const previews = $('previews'); previews.replaceChildren();
+    for (const size of [16, 20, 24, 32]) {
+      const sample = document.createElement('div'); sample.className = 'preview-sample';
+      const label = document.createElement('span'); label.textContent = `${size}px`;
+      const standard = document.createElement('div'); standard.className = 'preview-pair'; standard.innerHTML = G.exportSVG(S.doc, size);
+      const inverse = document.createElement('div'); inverse.className = 'preview-pair preview-inverse'; inverse.innerHTML = G.exportSVG(S.doc, size);
+      sample.append(label, standard, inverse); previews.append(sample);
+    }
+    const count = S.doc.shapes.reduce((sum, shape) => sum + shape.contours.reduce((n, c) => n + c.nodes.length, 0), 0);
+    $('node-count').textContent = `${S.doc.shapes.length} ${S.t('paths')} · ${count} ${S.t('nodes')}`;
+    $('instructions').textContent = S.t(S.tool === 'pen' ? 'penHelp' : 'help');
+  };
+})();
+
+/* ui/interactions.js */
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const canvas = $('canvas');
+  function location(event) {
+    const box = canvas.getBoundingClientRect();
+    return { x: (event.clientX - box.left) / box.width * 24, y: (event.clientY - box.top) / box.height * 24 };
+  }
+  const snapped = (p, disabled = false) => ({ x: S.snap(p.x, disabled), y: S.snap(p.y, disabled) });
+  function begin(event) {
+    if (event.button !== 0 || S.busy || S.saving || event.detail > 1) return;
+    event.preventDefault(); canvas.focus();
+    const raw = location(event), p = snapped(raw, event.altKey);
+    const shapeElement = event.target.closest('[data-shape]');
+    const nodeElement = event.target.closest('[data-node]');
+    const handleElement = event.target.closest('[data-handle]');
+    let gesture;
+    if (S.tool === 'select' || S.tool === 'node') {
+      if (S.tool === 'node' && handleElement && S.currentNode()) {
+        gesture = { type: 'handle', key: handleElement.dataset.handle, before: S.snapshot(), original: G.copy(S.current()), start: raw };
+      } else if (S.tool === 'node' && nodeElement && S.current()) {
+        S.node = { ci: Number(nodeElement.dataset.contour), ni: Number(nodeElement.dataset.node) };
+        gesture = { type: 'node', before: S.snapshot(), original: G.copy(S.current()), start: raw };
+      } else if (shapeElement) {
+        if (S.selected !== shapeElement.dataset.shape) { S.selected = shapeElement.dataset.shape; S.node = null; }
+        if (S.tool === 'select') gesture = { type: 'move', before: S.snapshot(), original: G.copy(S.current()), start: raw };
+      } else { S.selected = null; S.node = null; }
+    } else if (S.tool === 'pen') {
+      if (S.draft && event.target.dataset.draftNode === '0' && S.draft.contours[0].nodes.length >= 3) {
+        S.finishDraft(true); S.render(); return;
+      }
+      const draftBefore = S.draft ? G.copy(S.draft) : null;
+      if (!S.draft) S.draft = G.shape([{ closed: false, nodes: [] }]);
+      S.draft.contours[0].nodes.push(G.point(p.x, p.y));
+      gesture = { type: 'pen', start: p, draftBefore };
+    } else if (S.tool === 'pencil') {
+      S.draft = G.shape([{ closed: false, nodes: [G.point(raw.x, raw.y)] }]);
+      gesture = { type: 'pencil', points: [[raw.x, raw.y]] };
+    } else {
+      S.draft = G.primitive(S.tool, p, p);
+      gesture = { type: 'primitive', primitive: S.tool, start: p };
+    }
+    if (gesture) {
+      gesture.pointerId = event.pointerId;
+      S.gesture = gesture;
+      canvas.setPointerCapture?.(event.pointerId);
+    }
+    S.render();
+  }
+  function move(event) {
+    const gesture = S.gesture;
+    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    const raw = location(event), p = snapped(raw, event.altKey);
+    if (['move', 'node', 'handle'].includes(gesture.type)) {
+      const shape = G.copy(gesture.original);
+      if (gesture.type === 'move') {
+        G.transform(shape, 1, 1, S.snap(raw.x - gesture.start.x, event.altKey), S.snap(raw.y - gesture.start.y, event.altKey));
+      } else {
+        const n = shape.contours[S.node.ci].nodes[S.node.ni];
+        if (gesture.type === 'node') G.moveNode(n, p.x, p.y);
+        else n[gesture.key] = [p.x, p.y];
+      }
+      const index = S.doc.shapes.findIndex(s => s.id === shape.id); S.doc.shapes[index] = shape;
+    } else if (gesture.type === 'pen') {
+      const n = S.draft.contours[0].nodes.at(-1), dx = p.x - n.x, dy = p.y - n.y;
+      if (Math.hypot(dx, dy) > .08) { n.out = [p.x, p.y]; n.in = [n.x - dx, n.y - dy]; }
+    } else if (gesture.type === 'pencil') {
+      const last = gesture.points.at(-1);
+      if (Math.hypot(raw.x - last[0], raw.y - last[1]) >= .05) {
+        gesture.points.push([raw.x, raw.y]);
+        S.draft.contours[0].nodes.push(G.point(raw.x, raw.y));
+      }
+    } else if (gesture.type === 'primitive') {
+      if (event.shiftKey && gesture.primitive !== 'line') {
+        const size = Math.max(Math.abs(p.x - gesture.start.x), Math.abs(p.y - gesture.start.y));
+        p.x = gesture.start.x + size * (p.x < gesture.start.x ? -1 : 1);
+        p.y = gesture.start.y + size * (p.y < gesture.start.y ? -1 : 1);
+      }
+      S.draft = G.primitive(gesture.primitive, gesture.start, p);
+    }
+    S.renderCanvas();
+  }
+  function end(event, cancelled = false) {
+    const gesture = S.gesture;
+    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    if (!cancelled) move(event);
+    S.gesture = null;
+    if (canvas.hasPointerCapture?.(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+    if (cancelled) {
+      if (gesture.before) S.doc = gesture.before;
+      if (gesture.type === 'pen') S.draft = gesture.draftBefore;
+      else S.draft = null;
+      S.render(); return;
+    }
+    if (gesture.before) S.record(gesture.before);
+    else if (gesture.type === 'primitive') {
+      const draft = S.draft, b = G.bounds(draft); S.draft = null;
+      const valid = gesture.primitive === 'line' ? Math.hypot(b.width, b.height) >= .1 : b.width >= .1 && b.height >= .1;
+      if (valid) S.change(() => S.add(draft, S.t(gesture.primitive).replace(/\s+[A-Z]$/, '')));
+      else { S.status('tooSmall', 'warning'); S.render(); }
+    } else if (gesture.type === 'pencil') {
+      const points = G.simplify(gesture.points, .08);
+      S.draft.contours[0].nodes = points.map(([x, y]) => G.point(x, y));
+      S.draft.contours[0].nodes.forEach((_, i) => G.smoothNode(S.draft.contours[0], i, .7));
+      S.finishDraft(false);
+    } else S.render();
+  }
+  canvas.addEventListener('pointerdown', begin);
+  canvas.addEventListener('pointermove', move);
+  canvas.addEventListener('pointerup', e => end(e));
+  canvas.addEventListener('pointercancel', e => end(e, true));
+  canvas.addEventListener('dblclick', event => {
+    event.preventDefault();
+    if (S.tool === 'pen') { S.finishDraft(false); return; }
+    if (S.tool !== 'node' || !S.current() || event.target.closest('[data-node], [data-handle]')) return;
+    const p = location(event), nearest = G.nearestSegment(S.current(), p.x, p.y);
+    if (nearest && nearest.distance < 1) S.change(() => {
+      G.splitSegment(S.current().contours[nearest.contour], nearest.index, nearest.t);
+      S.node = { ci: nearest.contour, ni: nearest.index + 1 };
+    });
+  });
+  S.deleteNode = () => {
+    const node = S.currentNode(); if (!node) return;
+    const contour = S.current().contours[S.node.ci];
+    if (contour.nodes.length <= (contour.closed ? 3 : 2)) { S.status('nodeMin', 'warning'); return; }
+    S.change(() => { contour.nodes.splice(S.node.ni, 1); S.node.ni = Math.min(S.node.ni, contour.nodes.length - 1); });
+  };
+  S.deleteLayer = () => {
+    if (!S.current()) return;
+    S.change(() => { S.doc.shapes = S.doc.shapes.filter(s => s.id !== S.selected); S.selected = S.doc.shapes.at(-1)?.id || null; S.node = null; });
+  };
+  S.duplicate = () => {
+    if (!S.current()) return;
+    S.change(() => { const shape = G.copy(S.current()); G.transform(shape, 1, 1, .5, .5); S.add(shape); });
+  };
+  document.querySelectorAll('[data-tool]').forEach(button => button.addEventListener('click', () => S.setTool(button.dataset.tool)));
+  $('undo').addEventListener('click', () => S.history(false)); $('redo').addEventListener('click', () => S.history(true));
+  $('duplicate').addEventListener('click', S.duplicate); $('delete').addEventListener('click', S.deleteLayer);
+  $('delete-node').addEventListener('click', S.deleteNode);
+  $('insert-node').addEventListener('click', () => { if (S.currentNode()) S.change(() => {
+    if (G.splitSegment(S.current().contours[S.node.ci], S.node.ni)) S.node.ni++;
+  }); });
+  $('smooth').addEventListener('click', () => { if (S.currentNode()) S.change(() => G.smoothNode(S.current().contours[S.node.ci], S.node.ni)); });
+  $('corner').addEventListener('click', () => { if (S.currentNode()) S.change(() => { S.currentNode().in = null; S.currentNode().out = null; }); });
+  for (const key of ['x', 'y']) $(`node-${key}`).addEventListener('change', () => {
+    const n = S.currentNode(), value = Number($(`node-${key}`).value);
+    if (n && Number.isFinite(value) && Math.abs(value) <= 10000) S.change(() => G.moveNode(n, key === 'x' ? value : n.x, key === 'y' ? value : n.y));
+    else S.render();
+  });
+  for (const [id, key] of [['fill', 'fill'], ['stroke', 'stroke'], ['visible', 'visible']]) $(id).addEventListener('change', () => { if (S.current()) S.change(() => { S.current()[key] = $(id).checked; }); });
+  for (const key of ['cap', 'join']) $(key).addEventListener('change', () => { if (S.current()) S.change(() => { S.current()[key] = $(key).value; }); });
+  $('stroke-width').addEventListener('change', () => {
+    const value = Number($('stroke-width').value);
+    if (S.current() && value >= .1 && value <= 8) S.change(() => { S.current().width = value; }); else S.render();
+  });
+  $('layer-name').addEventListener('change', () => { if (S.current()) S.change(() => { S.current().name = $('layer-name').value.slice(0, 80) || S.t('layer'); }); });
+  $('name').addEventListener('change', () => S.change(() => { S.doc.name = $('name').value.slice(0, 80) || 'icon'; }));
+  for (const key of ['x', 'y', 'w', 'h']) $(`shape-${key}`).addEventListener('change', () => {
+    const shape = S.current(), value = Number($(`shape-${key}`).value);
+    if (!shape || !Number.isFinite(value) || Math.abs(value) > 1000 || ['w', 'h'].includes(key) && value < .1) { S.render(); return; }
+    S.change(() => {
+      const b = G.bounds(shape);
+      if (key === 'x' || key === 'y') G.transform(shape, 1, 1, key === 'x' ? value - b.x : 0, key === 'y' ? value - b.y : 0);
+      else if (b[key === 'w' ? 'width' : 'height'] > 0) G.transform(shape, key === 'w' ? value / b.width : 1, key === 'h' ? value / b.height : 1, 0, 0, [b.x, b.y]);
+    });
+  });
+  $('center').addEventListener('click', () => { if (S.current()) S.change(() => {
+    const b = G.bounds(S.current()); G.transform(S.current(), 1, 1, 12 - b.x - b.width / 2, 12 - b.y - b.height / 2);
+  }); });
+  $('fit').addEventListener('click', () => { if (S.current()) S.change(() => {
+    const shape = S.current(), b = G.bounds(shape), padding = shape.stroke ? shape.width / 2 : 0;
+    const scale = (20 - padding * 2) / (Math.max(b.width, b.height) || 1);
+    G.transform(shape, scale, scale, 0, 0, [b.x + b.width / 2, b.y + b.height / 2]);
+    const next = G.bounds(shape); G.transform(shape, 1, 1, 12 - next.x - next.width / 2, 12 - next.y - next.height / 2);
+  }); });
+  $('close-path').addEventListener('click', () => { if (S.current()) S.change(() => {
+    for (const contour of S.current().contours) if (contour.nodes.length >= 3) contour.closed = true;
+  }); });
+  for (const [id, direction] of [['raise', 1], ['lower', -1]]) $(id).addEventListener('click', () => { if (S.current()) S.change(() => {
+    const index = S.doc.shapes.findIndex(s => s.id === S.selected), next = index + direction;
+    if (next >= 0 && next < S.doc.shapes.length) [S.doc.shapes[index], S.doc.shapes[next]] = [S.doc.shapes[next], S.doc.shapes[index]];
+  }); });
+  $('grid').addEventListener('change', S.renderCanvas);
+  $('zoom').addEventListener('change', () => { canvas.setAttribute('width', $('zoom').value); canvas.setAttribute('height', $('zoom').value); });
+  $('show-reference').addEventListener('change', S.renderCanvas); $('reference-opacity').addEventListener('input', S.renderCanvas);
+  for (const key of ['contrast', 'simplify', 'smoothing', 'minArea']) $(`trace-${key}`).addEventListener('input', () => { $(`trace-${key}-value`).textContent = $(`trace-${key}`).value; });
+  document.addEventListener('keydown', event => {
+    if (event.target.matches('input, textarea, select') || event.target.isContentEditable || S.busy || S.saving) return;
+    const key = event.key.toLowerCase(), command = event.metaKey || event.ctrlKey;
+    if (command && key === 'z') { event.preventDefault(); S.history(event.shiftKey); return; }
+    if (command && key === 'y') { event.preventDefault(); S.history(true); return; }
+    if (command && key === 'd') { event.preventDefault(); S.duplicate(); return; }
+    if (command && key === 's') { event.preventDefault(); S.saveProject?.(); return; }
+    if (command || event.altKey) return;
+    if (key === 'escape') {
+      if (S.gesture?.before) S.doc = S.gesture.before;
+      S.draft = null; S.gesture = null; S.node = null; S.render(); return;
+    }
+    if (key === 'enter') { S.finishDraft(false); return; }
+    if (key === 'delete' || key === 'backspace') {
+      event.preventDefault();
+      if (S.draft) { S.draft.contours[0].nodes.pop(); if (!S.draft.contours[0].nodes.length) S.draft = null; S.render(); }
+      else if (S.tool === 'node' && S.currentNode()) S.deleteNode(); else S.deleteLayer();
+      return;
+    }
+    const tools = { v: 'select', a: 'node', p: 'pen', b: 'pencil', l: 'line', r: 'rect', o: 'ellipse' };
+    if (tools[key]) { event.preventDefault(); S.setTool(tools[key]); return; }
+    if (key.startsWith('arrow') && S.current()) {
+      event.preventDefault(); const step = event.shiftKey ? 1 : Number($('snap').value) || .1;
+      const dx = key === 'arrowleft' ? -step : key === 'arrowright' ? step : 0;
+      const dy = key === 'arrowup' ? -step : key === 'arrowdown' ? step : 0;
+      S.change(() => { const n = S.currentNode(); if (n) G.moveNode(n, n.x + dx, n.y + dy); else G.transform(S.current(), 1, 1, dx, dy); });
+    }
+  });
+})();
+
+/* ui/io.js */
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const storageKey = 'icon-studio-project-v1';
+  let timer, dirty = false, queued = null, writing = false, drainPromise = Promise.resolve();
+  const errorKey = (error, fallback) => Object.hasOwn(StudioMessages['en-US'], error?.message) ? error.message : fallback;
+  async function drain() {
+    writing = true;
+    try {
+      while (queued) {
+        const snapshot = queued; queued = null;
+        try {
+        if (S.host) {
+          if (!S.host.storage?.set) throw new Error('storageFailed');
+          await S.host.storage.set(storageKey, snapshot);
+        } else localStorage.setItem(storageKey, JSON.stringify(snapshot));
+        } catch { S.status('storageFailed', 'warning'); }
+      }
+    } finally { writing = false; }
+  }
+  S.flushSave = () => {
+    clearTimeout(timer); timer = null;
+    if (dirty) { queued = S.snapshot(); dirty = false; }
+    // drain() invokes the host before its first await, so pagehide does not
+    // leave a new save request waiting in a cancelled debounce timer.
+    if (queued && !writing) drainPromise = drain();
+    return drainPromise;
+  };
+  S.autosave = () => {
+    dirty = true; clearTimeout(timer);
+    timer = setTimeout(S.flushSave, 400);
+  };
+  S.restore = async () => {
+    const revision = S.revision;
+    try {
+      const saved = S.host ? await S.host.storage?.get?.(storageKey) : JSON.parse(localStorage.getItem(storageKey) || 'null');
+      if (saved == null || S.revision !== revision || S.busy || S.draft) return;
+      S.doc = G.normalizeProject(saved); S.selected = S.doc.shapes.at(-1)?.id || null;
+      S.render(); S.status('restored');
+    } catch { S.status('storageInvalid', 'warning'); }
+  };
+  async function saveFile(text, filename, extension, mime) {
+    if (S.busy || S.saving) return;
+    S.finishDraft(false);
+    S.saving = true; S.render();
+    try {
+      if (S.host) {
+        if (!S.host.dialog?.save || !S.host.fs?.writeFile) { S.status('unsupportedSave', 'error'); return; }
+        const path = await S.host.dialog.save({ title: filename, defaultPath: filename, filters: [{ name: extension.toUpperCase(), extensions: [extension] }] });
+        if (!path) return;
+        await S.host.fs.writeFile(path, text, { encoding: 'utf-8' }); S.status('saved');
+      } else {
+        const link = document.createElement('a'); link.download = filename;
+        link.href = `data:${mime};charset=utf-8,${encodeURIComponent(text)}`;
+        document.body.append(link); link.click(); link.remove(); S.status('downloaded');
+      }
+    } catch { S.status('saveFailed', 'error'); }
+    finally { S.saving = false; S.render(); }
+  }
+  const filename = () => (S.doc.name.trim().replace(/[^a-zA-Z0-9_-]+/g, '-') || 'icon').slice(0, 64);
+  S.saveProject = () => {
+    S.finishDraft(false);
+    return saveFile(JSON.stringify(S.doc, null, 2), `${filename()}.icon.json`, 'json', 'application/json');
+  };
+  S.exportSVG = () => {
+    S.finishDraft(false);
+    if (!S.doc.shapes.some(s => s.visible && (s.fill || s.stroke))) { S.status('emptyExport', 'warning'); return; }
+    return saveFile(G.exportSVG(S.doc), `${filename()}.svg`, 'svg', 'image/svg+xml');
+  };
+  S.trace = async () => {
+    if (!S.source || S.busy || S.saving) return;
+    S.finishDraft(false);
+    const job = ++S.job, revision = S.revision;
+    S.busy = true; S.render(); S.status('tracing');
+    try {
+      const output = await IconTrace.trace(S.source, {
+        contrast: Number($('trace-contrast').value), simplify: Number($('trace-simplify').value),
+        smoothing: Number($('trace-smoothing').value), minArea: Number($('trace-minArea').value),
+      }, () => job !== S.job || revision !== S.revision);
+      if (job !== S.job || revision !== S.revision) return;
+      S.busy = false;
+      S.change(() => S.add(output.shape, S.t('traceLayer')));
+      S.tool = 'node'; S.node = null; S.render(); S.status('traced');
+    } catch (error) {
+      if (job === S.job && error.message !== 'cancelled') S.status(errorKey(error, 'traceFailed'), 'error');
+    } finally { if (job === S.job) { S.busy = false; S.render(); } }
+  };
+  const readURL = file => new Promise((resolve, reject) => {
+    const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file);
+  });
+  S.load = async file => {
+    if (S.busy || S.saving) { S.status('busy'); return; }
+    if (S.draft) S.finishDraft(false);
+    if (file.size > 20 * 1024 * 1024) { S.status('invalidImage', 'error'); return; }
+    if (/\.json$/i.test(file.name)) {
+      S.busy = true; S.render();
+      try {
+        if (file.size > 4 * 1024 * 1024) throw new Error('invalidProject');
+        const next = G.normalizeProject(JSON.parse(await file.text()));
+        S.busy = false;
+        S.change(() => { S.doc = next; S.selected = next.shapes.at(-1)?.id || null; S.node = null; });
+        S.source = null; S.referenceURL = ''; S.render(); S.status('imported');
+      } catch { S.status('invalidProject', 'error'); }
+      finally { S.busy = false; S.render(); }
+      return;
+    }
+    if (!/^image\/(png|jpeg|webp)$/.test(file.type) && !(file.type === '' && /\.(png|jpe?g|webp)$/i.test(file.name))) { S.status('invalidImage', 'error'); return; }
+    const job = ++S.job;
+    S.busy = true; S.render(); S.status('tracing');
+    try {
+      const source = await readURL(file), image = new Image();
+      await new Promise((resolve, reject) => { image.onload = resolve; image.onerror = reject; image.src = source; });
+      if (job !== S.job) return;
+      const w = image.naturalWidth, h = image.naturalHeight;
+      if (!w || !h || w * h > 16000000 || w > 8192 || h > 8192) throw new Error('invalidImage');
+      const scale = Math.min(1, 512 / Math.max(w, h));
+      const buffer = document.createElement('canvas'); buffer.width = Math.max(1, Math.round(w * scale)); buffer.height = Math.max(1, Math.round(h * scale));
+      const context = buffer.getContext('2d', { willReadFrequently: true }); context.drawImage(image, 0, 0, buffer.width, buffer.height);
+      S.source = context.getImageData(0, 0, buffer.width, buffer.height);
+      S.referenceURL = buffer.toDataURL('image/png'); $('show-reference').checked = true;
+      S.busy = false; S.render(); await S.trace();
+    } catch (error) {
+      if (job === S.job) S.status(errorKey(error, 'invalidImage'), 'error');
+    } finally { if (job === S.job) { S.busy = false; S.render(); } }
+  };
+  $('import').addEventListener('click', () => $('file').click());
+  $('file').addEventListener('change', event => { const file = event.target.files?.[0]; if (file) void S.load(file); event.target.value = ''; });
+  $('export').addEventListener('click', S.exportSVG); $('project').addEventListener('click', S.saveProject); $('trace').addEventListener('click', S.trace);
+  $('copy').addEventListener('click', async () => {
+    S.finishDraft(false);
+    if (!S.doc.shapes.some(s => s.visible && (s.fill || s.stroke))) { S.status('emptyExport', 'warning'); return; }
+    const svg = G.exportSVG(S.doc);
+    try { if (S.host) await S.host.clipboard.writeText(svg); else await navigator.clipboard.writeText(svg); S.status('copied'); }
+    catch { S.status('copyFailed', 'warning'); }
+  });
+  let dragDepth = 0;
+  document.addEventListener('dragenter', event => {
+    if (!Array.from(event.dataTransfer?.types || []).includes('Files')) return;
+    event.preventDefault(); dragDepth++; document.body.classList.add('dragging');
+  });
+  document.addEventListener('dragover', event => { if (Array.from(event.dataTransfer?.types || []).includes('Files')) event.preventDefault(); });
+  document.addEventListener('dragleave', () => { dragDepth = Math.max(0, dragDepth - 1); if (!dragDepth) document.body.classList.remove('dragging'); });
+  document.addEventListener('drop', event => {
+    event.preventDefault(); dragDepth = 0; document.body.classList.remove('dragging');
+    const file = event.dataTransfer?.files?.[0]; if (file) void S.load(file);
+  });
+  document.addEventListener('paste', event => {
+    if (event.target.matches('input, textarea') || event.target.isContentEditable) return;
+    const file = Array.from(event.clipboardData?.files || []).find(f => f.type.startsWith('image/'));
+    if (file) { event.preventDefault(); void S.load(file); }
+  });
+  window.addEventListener('pagehide', () => {
+    S.job++;
+    void S.flushSave();
+  });
+  S.host?.onDeactivate?.(() => { void S.flushSave(); });
+})();
+
+/* ui/boot.js */
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const theme = mode => { document.documentElement.dataset.openbitfunAppearanceMode = mode; };
+  if (S.host) {
+    theme(S.host.appearanceMode || 'dark');
+    S.host.onAppearanceChange?.(payload => theme(payload.mode));
+    S.host.onLocaleChange?.(locale => { S.locale = /^(zh|yue)/i.test(locale) ? 'zh-CN' : 'en-US'; S.localize(); S.render(); });
+  } else { theme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); $('theme').hidden = false; }
+  $('theme').addEventListener('click', () => theme(document.documentElement.dataset.openbitfunAppearanceMode === 'dark' ? 'light' : 'dark'));
+  $('language').addEventListener('click', () => { S.locale = S.locale === 'zh-CN' ? 'en-US' : 'zh-CN'; S.localize(); S.render(); });
+  $('new').addEventListener('click', () => {
+    if (S.change(() => { S.doc.shapes = []; S.doc.name = 'icon'; S.selected = null; S.node = null; })) {
+      S.draft = null; S.referenceURL = ''; S.source = null; S.render(); S.status('ready');
+    }
+  });
+  // Simple editable centerline starters, drawn on the same 24px canvas. These
+  // are starting geometry, not semantic predictions from the imported image.
+  $('home').addEventListener('click', () => S.change(() => {
+    const roof = [G.point(3, 10), G.point(12, 3), G.point(21, 10)];
+    const walls = [[5, 9], [5, 21], [10, 21], [10, 15], [14, 15], [14, 21], [19, 21], [19, 9]].map(([x, y]) => G.point(x, y));
+    S.add(G.shape([{ closed: false, nodes: roof }, { closed: false, nodes: walls }]), S.t('home'));
+  }));
+  $('download-starter').addEventListener('click', () => S.change(() => {
+    const contours = [[[12, 3], [12, 16]], [[7, 11], [12, 16], [17, 11]], [[4, 17], [4, 21], [20, 21], [20, 17]]]
+      .map(points => ({ closed: false, nodes: points.map(([x, y]) => G.point(x, y)) }));
+    S.add(G.shape(contours), S.t('download'));
+  }));
+  S.localize(); S.render(); void S.restore();
+})();
+
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/boot.js b/MiniApp/Demo/icon-studio-v2/source/ui/boot.js
new file mode 100644
index 0000000000..0dced9399b
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/boot.js
@@ -0,0 +1,29 @@
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const theme = mode => { document.documentElement.dataset.openbitfunAppearanceMode = mode; };
+  if (S.host) {
+    theme(S.host.appearanceMode || 'dark');
+    S.host.onAppearanceChange?.(payload => theme(payload.mode));
+    S.host.onLocaleChange?.(locale => { S.locale = /^(zh|yue)/i.test(locale) ? 'zh-CN' : 'en-US'; S.localize(); S.render(); });
+  } else { theme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); $('theme').hidden = false; }
+  $('theme').addEventListener('click', () => theme(document.documentElement.dataset.openbitfunAppearanceMode === 'dark' ? 'light' : 'dark'));
+  $('language').addEventListener('click', () => { S.locale = S.locale === 'zh-CN' ? 'en-US' : 'zh-CN'; S.localize(); S.render(); });
+  $('new').addEventListener('click', () => {
+    if (S.change(() => { S.doc.shapes = []; S.doc.name = 'icon'; S.selected = null; S.node = null; })) {
+      S.draft = null; S.referenceURL = ''; S.source = null; S.render(); S.status('ready');
+    }
+  });
+  // Simple editable centerline starters, drawn on the same 24px canvas. These
+  // are starting geometry, not semantic predictions from the imported image.
+  $('home').addEventListener('click', () => S.change(() => {
+    const roof = [G.point(3, 10), G.point(12, 3), G.point(21, 10)];
+    const walls = [[5, 9], [5, 21], [10, 21], [10, 15], [14, 15], [14, 21], [19, 21], [19, 9]].map(([x, y]) => G.point(x, y));
+    S.add(G.shape([{ closed: false, nodes: roof }, { closed: false, nodes: walls }]), S.t('home'));
+  }));
+  $('download-starter').addEventListener('click', () => S.change(() => {
+    const contours = [[[12, 3], [12, 16]], [[7, 11], [12, 16], [17, 11]], [[4, 17], [4, 21], [20, 21], [20, 17]]]
+      .map(points => ({ closed: false, nodes: points.map(([x, y]) => G.point(x, y)) }));
+    S.add(G.shape(contours), S.t('download'));
+  }));
+  S.localize(); S.render(); void S.restore();
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/geometry.js b/MiniApp/Demo/icon-studio-v2/source/ui/geometry.js
new file mode 100644
index 0000000000..53747b7668
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/geometry.js
@@ -0,0 +1,180 @@
+(() => {
+  const G = {};
+  const copy = value => JSON.parse(JSON.stringify(value));
+  const point = (x, y) => ({ x, y, in: null, out: null });
+  const mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+  const xy = n => [n.x, n.y];
+  const rounded = n => Number(n.toFixed(3));
+  const escape = value => String(value).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' })[c]);
+  function pathData(shape) {
+    return shape.contours.map(contour => {
+      const nodes = contour.nodes;
+      if (!nodes.length) return '';
+      let d = `M${rounded(nodes[0].x)} ${rounded(nodes[0].y)}`;
+      const count = contour.closed ? nodes.length : nodes.length - 1;
+      for (let i = 0; i < count; i++) {
+        const a = nodes[i], b = nodes[(i + 1) % nodes.length];
+        if (a.out || b.in) {
+          const c1 = a.out || xy(a), c2 = b.in || xy(b);
+          d += `C${c1.map(rounded).join(' ')} ${c2.map(rounded).join(' ')} ${rounded(b.x)} ${rounded(b.y)}`;
+        } else if (i + 1 < nodes.length) d += `L${rounded(b.x)} ${rounded(b.y)}`;
+      }
+      return d + (contour.closed ? 'Z' : '');
+    }).join('');
+  }
+  function shapeMarkup(shape) {
+    return `<path d="${pathData(shape)}" fill="${shape.fill ? 'currentColor' : 'none'}" fill-rule="evenodd" stroke="${shape.stroke ? 'currentColor' : 'none'}" stroke-width="${rounded(shape.width)}" stroke-linecap="${shape.cap}" stroke-linejoin="${shape.join}" opacity="${rounded(shape.opacity)}"/>`;
+  }
+  function exportSVG(doc, size = 24) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="${escape(doc.name)}">\n${doc.shapes.filter(s => s.visible).map(shapeMarkup).join('\n')}\n</svg>`;
+  }
+  function bounds(shape) {
+    const points = shape.contours.flatMap(c => c.nodes.flatMap(n => [xy(n), ...(n.in ? [n.in] : []), ...(n.out ? [n.out] : [])]));
+    if (!points.length) return { x: 0, y: 0, width: 0, height: 0 };
+    const xs = points.map(p => p[0]), ys = points.map(p => p[1]);
+    const x = Math.min(...xs), y = Math.min(...ys);
+    return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+  }
+  function transform(shape, sx, sy, dx, dy, origin = [0, 0]) {
+    for (const contour of shape.contours) for (const n of contour.nodes) {
+      n.x = origin[0] + (n.x - origin[0]) * sx + dx;
+      n.y = origin[1] + (n.y - origin[1]) * sy + dy;
+      for (const key of ['in', 'out']) if (n[key]) {
+        n[key] = [origin[0] + (n[key][0] - origin[0]) * sx + dx, origin[1] + (n[key][1] - origin[1]) * sy + dy];
+      }
+    }
+  }
+  function moveNode(node, x, y) {
+    const dx = x - node.x, dy = y - node.y;
+    if (node.in) node.in = [node.in[0] + dx, node.in[1] + dy];
+    if (node.out) node.out = [node.out[0] + dx, node.out[1] + dy];
+    node.x = x; node.y = y;
+  }
+  function smoothNode(contour, index, amount = 1) {
+    const nodes = contour.nodes;
+    const node = nodes[index];
+    if ((!contour.closed && (index === 0 || index === nodes.length - 1)) || nodes.length < 3) return;
+    const prev = nodes[(index + nodes.length - 1) % nodes.length], next = nodes[(index + 1) % nodes.length];
+    const length = Math.hypot(next.x - prev.x, next.y - prev.y) || 1;
+    const radius = Math.min(Math.hypot(node.x - prev.x, node.y - prev.y), Math.hypot(next.x - node.x, next.y - node.y)) * .3 * amount;
+    const dx = (next.x - prev.x) / length * radius, dy = (next.y - prev.y) / length * radius;
+    node.in = [node.x - dx, node.y - dy]; node.out = [node.x + dx, node.y + dy];
+  }
+  function splitSegment(contour, index, t = .5) {
+    const a = contour.nodes[index], b = contour.nodes[(index + 1) % contour.nodes.length];
+    if (!b || !contour.closed && index === contour.nodes.length - 1) return false;
+    let node;
+    if (a.out || b.in) {
+      const p = xy(a), q = a.out || p, r = b.in || xy(b), s = xy(b);
+      const pq = mix(p, q, t), qr = mix(q, r, t), rs = mix(r, s, t);
+      const pqr = mix(pq, qr, t), qrs = mix(qr, rs, t), at = mix(pqr, qrs, t);
+      a.out = pq; b.in = rs;
+      node = { x: at[0], y: at[1], in: pqr, out: qrs };
+    } else { const at = mix(xy(a), xy(b), t); node = point(...at); }
+    contour.nodes.splice(index + 1, 0, node);
+    return true;
+  }
+  function evaluate(a, b, t) {
+    if (!a.out && !b.in) return mix(xy(a), xy(b), t);
+    const p = xy(a), q = a.out || p, r = b.in || xy(b), s = xy(b);
+    return mix(mix(mix(p, q, t), mix(q, r, t), t), mix(mix(q, r, t), mix(r, s, t), t), t);
+  }
+  function nearestSegment(shape, x, y) {
+    let best = null;
+    shape.contours.forEach((c, ci) => {
+      const count = c.closed ? c.nodes.length : c.nodes.length - 1;
+      for (let i = 0; i < count; i++) {
+        const a = c.nodes[i], b = c.nodes[(i + 1) % c.nodes.length];
+        if (!a.out && !b.in) {
+          const dx = b.x - a.x, dy = b.y - a.y, length = dx * dx + dy * dy;
+          const t = length ? Math.max(.001, Math.min(.999, ((x - a.x) * dx + (y - a.y) * dy) / length)) : .5;
+          const at = mix(xy(a), xy(b), t), distance = Math.hypot(at[0] - x, at[1] - y);
+          if (!best || distance < best.distance) best = { contour: ci, index: i, t, distance };
+          continue;
+        }
+        for (let k = 1; k < 32; k++) {
+        const t = k / 32, at = evaluate(c.nodes[i], c.nodes[(i + 1) % c.nodes.length], t);
+        const distance = Math.hypot(at[0] - x, at[1] - y);
+        if (!best || distance < best.distance) best = { contour: ci, index: i, t, distance };
+        }
+      }
+    });
+    return best;
+  }
+  function shape(contours, name = 'Path', filled = false) {
+    return { id: '', name, visible: true, fill: filled, stroke: !filled, width: 2, cap: 'round', join: 'round', opacity: 1, contours };
+  }
+  function primitive(type, a, b) {
+    const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y), w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y);
+    let nodes;
+    if (type === 'line') nodes = [point(a.x, a.y), point(b.x, b.y)];
+    else if (type === 'rect') nodes = [point(x, y), point(x + w, y), point(x + w, y + h), point(x, y + h)];
+    else {
+      const cx = x + w / 2, cy = y + h / 2, rx = w / 2, ry = h / 2, k = .5522847498;
+      nodes = [
+        { x: cx, y, in: [cx - rx * k, y], out: [cx + rx * k, y] },
+        { x: x + w, y: cy, in: [x + w, cy - ry * k], out: [x + w, cy + ry * k] },
+        { x: cx, y: y + h, in: [cx + rx * k, y + h], out: [cx - rx * k, y + h] },
+        { x, y: cy, in: [x, cy + ry * k], out: [x, cy - ry * k] },
+      ];
+    }
+    return shape([{ closed: type !== 'line', nodes }], type);
+  }
+  function simplify(points, epsilon) {
+    if (points.length <= 2) return points.map(p => [...p]);
+    const keep = new Uint8Array(points.length); keep[0] = 1; keep[points.length - 1] = 1;
+    const work = [[0, points.length - 1]];
+    while (work.length) {
+      const [first, last] = work.pop(), a = points[first], b = points[last];
+      const dx = b[0] - a[0], dy = b[1] - a[1], length = dx * dx + dy * dy;
+      let max = epsilon * epsilon, index = -1;
+      for (let i = first + 1; i < last; i++) {
+        const p = points[i], t = length ? Math.max(0, Math.min(1, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / length)) : 0;
+        const distance = (p[0] - a[0] - t * dx) ** 2 + (p[1] - a[1] - t * dy) ** 2;
+        if (distance > max) { max = distance; index = i; }
+      }
+      if (index >= 0) { keep[index] = 1; work.push([first, index], [index, last]); }
+    }
+    return points.filter((_, i) => keep[i]).map(p => [...p]);
+  }
+  function simplifyClosed(points, epsilon) {
+    if (points.length < 4) return points;
+    let far = 1, distance = 0;
+    for (let i = 1; i < points.length; i++) {
+      const d = (points[i][0] - points[0][0]) ** 2 + (points[i][1] - points[0][1]) ** 2;
+      if (d > distance) { far = i; distance = d; }
+    }
+    return [...simplify(points.slice(0, far + 1), epsilon).slice(0, -1),
+      ...simplify([...points.slice(far), points[0]], epsilon).slice(0, -1)];
+  }
+  function normalizeProject(raw) {
+    if (!raw || typeof raw !== 'object' || raw.schemaVersion !== 1 || !Array.isArray(raw.shapes)
+      || raw.shapes.length > 512) throw new Error('invalidProject');
+    let total = 0;
+    const finite = v => typeof v === 'number' && Number.isFinite(v) && Math.abs(v) <= 10000;
+    const handle = value => value == null ? null : Array.isArray(value) && value.length === 2 && value.every(finite) ? [...value] : (() => { throw new Error('invalidProject'); })();
+    const ids = new Set();
+    const shapes = raw.shapes.map((s, i) => {
+      if (!s || !Array.isArray(s.contours) || !s.contours.length || s.contours.length > 1024) throw new Error('invalidProject');
+      const contours = s.contours.map(c => {
+        if (!c || !Array.isArray(c.nodes) || c.nodes.length < 2 || c.closed && c.nodes.length < 3) throw new Error('invalidProject');
+        total += c.nodes.length;
+        if (total > 20000) throw new Error('invalidProject');
+        return { closed: Boolean(c.closed), nodes: c.nodes.map(n => {
+          if (!n || !finite(n.x) || !finite(n.y)) throw new Error('invalidProject');
+          return { x: n.x, y: n.y, in: handle(n.in), out: handle(n.out) };
+        }) };
+      });
+      const id = typeof s.id === 'string' && /^[a-zA-Z0-9_-]{1,80}$/.test(s.id) ? s.id : `shape-${i}`;
+      if (ids.has(id)) throw new Error('invalidProject'); ids.add(id);
+      return { ...shape(contours), id, name: String(s.name || 'Path').slice(0, 80), visible: s.visible !== false,
+        fill: Boolean(s.fill), stroke: s.stroke !== false, width: finite(s.width) ? Math.max(.1, Math.min(8, s.width)) : 2,
+        cap: ['round', 'butt', 'square'].includes(s.cap) ? s.cap : 'round',
+        join: ['round', 'miter', 'bevel'].includes(s.join) ? s.join : 'round',
+        opacity: finite(s.opacity) ? Math.max(0, Math.min(1, s.opacity)) : 1 };
+    });
+    return { schemaVersion: 1, release: '2.0.2', name: String(raw.name || 'icon').slice(0, 80), shapes };
+  }
+  Object.assign(G, { copy, point, xy, mix, pathData, shapeMarkup, exportSVG, bounds, transform, moveNode, smoothNode, splitSegment, evaluate, nearestSegment, shape, primitive, simplify, simplifyClosed, normalizeProject });
+  globalThis.IconGeometry = Object.freeze(G);
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/i18n.js b/MiniApp/Demo/icon-studio-v2/source/ui/i18n.js
new file mode 100644
index 0000000000..ca292b0967
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/i18n.js
@@ -0,0 +1,68 @@
+(() => {
+  globalThis.StudioMessages = {
+    'zh-CN': {
+      title: '图标工坊', tagline: '从像素轮廓到可编辑图标', import: '导入图片 / 工程', new: '新建画布',
+      svg: '导出 SVG', copy: '复制 SVG', project: '保存工程', name: '图标名称', layers: '图层', emptyLayers: '导入图片或在画布上绘制。',
+      tools: '绘制工具', select: '选择 V', node: '节点 A', pen: '钢笔 P', pencil: '自由绘制 B', line: '直线 L', rect: '矩形 R', ellipse: '椭圆 O',
+      undo: '撤销', redo: '重做', duplicate: '复制图层', delete: '删除', up: '上移图层', down: '下移图层',
+      templates: '线框起点', home: '首页', download: '下载', grid: '像素网格', snap: '吸附', off: '关闭',
+      zoom: '画布缩放', reference: '参考图', opacity: '参考透明度', hideRef: '显示参考图',
+      properties: '图层属性', noSelection: '选择一个图层，或使用绘制工具。', filled: '填充轮廓', stroked: '显示描边', width: '描边宽度', cap: '端点', join: '转角',
+      round: '圆形', butt: '平头', square: '方形', miter: '尖角', bevel: '斜角',
+      fit: '适配 20px 安全区', center: '居中', closePath: '闭合路径', nodeTitle: '节点编辑', smooth: '平滑节点', corner: '转为尖角', insert: '插入节点', removeNode: '删除节点',
+      traceTitle: '图片 → 矢量', contrast: '前景对比阈值', simplify: '轮廓简化', smoothing: '曲线平滑', minArea: '最小区域（像素）', trace: '描摹为新图层',
+      traceHelp: '单色轮廓描摹，保留镂空。线框图标可在参考图上重绘中线；不会自动识别“首页”等语义。',
+      preview: '实际尺寸', code: 'SVG 源码', guide: '24×24 · 默认 2px 圆角描边 · currentColor',
+      help: 'V 选择 · A 节点 · P 钢笔 · Enter 完成 · Esc 取消 · ⌘/Ctrl Z 撤销 · 方向键微调',
+      penHelp: '逐点点击，拖动创建曲线手柄；点击起点闭合，Enter 完成。',
+      ready: '导入 PNG / JPG / WebP 自动描摹，或选择工具开始绘制。',
+      tracing: '正在分析像素并描摹轮廓…', traced: '已生成可编辑路径。按 A 调整节点与手柄。', imported: '工程已载入。',
+      saved: '文件已保存。', downloaded: '已发起文件下载。', copied: 'SVG 已复制。', emptyExport: '请先绘制或描摹一个可见图层。',
+      invalidImage: '请选择有效的 PNG / JPG / WebP 图片，最大 20 MB、1600 万像素、单边 8192 像素。',
+      invalidProject: '工程格式不受支持或数据不完整。当前画布和原文件已保留。',
+      noForeground: '未找到前景，请降低对比阈值或减小最小区域。', tooComplex: '轮廓过于复杂，请提高简化或最小区域数值，或使用更简单的图片。',
+      traceFailed: '描摹失败，请换一张简单背景的单色图片。',
+      saveFailed: '保存失败，请重试或选择可写位置。', storageFailed: '自动保存不可用，请保存工程文件。', storageInvalid: '上次保存的工程无法读取，原记录已保留。可手动导入工程。',
+      copyFailed: '剪贴板不可用，请导出 SVG 文件。', unsupportedSave: '此宿主不支持保存文件，请使用独立 HTML 版本。',
+      busy: '请等待图片处理完成。', tooSmall: '拖动距离太小，请重新绘制。',
+      layer: '路径', traceLayer: '描摹', changed: '已更新。', restored: '已恢复上次的矢量工程。',
+      autosave: '自动保存矢量工程', noRasterExport: 'SVG 不包含参考图片、网格和编辑手柄。',
+      theme: '明暗', language: 'English', canvas: '矢量绘制画布', nodeX: '节点 X', nodeY: '节点 Y',
+      visible: '显示图层', layerName: '图层名称', nodeMin: '闭合路径至少需要 3 个节点，开放路径至少需要 2 个。',
+      clipping: '部分路径可能越过画布，请检查实际尺寸预览或适配安全区。', paths: '图层', nodes: '节点',
+      sampling: '按最长边 512px 采样；参考图不会写入 SVG。',
+    },
+    'en-US': {
+      title: 'Icon Studio', tagline: 'From pixels to editable UI icons', import: 'Import image / project', new: 'New canvas',
+      svg: 'Export SVG', copy: 'Copy SVG', project: 'Save project', name: 'Icon name', layers: 'Layers', emptyLayers: 'Import an image or draw on the canvas.',
+      tools: 'Drawing tools', select: 'Select V', node: 'Nodes A', pen: 'Pen P', pencil: 'Freehand B', line: 'Line L', rect: 'Rectangle R', ellipse: 'Ellipse O',
+      undo: 'Undo', redo: 'Redo', duplicate: 'Duplicate layer', delete: 'Delete', up: 'Raise layer', down: 'Lower layer',
+      templates: 'Outline starters', home: 'Home', download: 'Download', grid: 'Pixel grid', snap: 'Snap', off: 'Off',
+      zoom: 'Canvas zoom', reference: 'Reference', opacity: 'Reference opacity', hideRef: 'Show reference',
+      properties: 'Layer properties', noSelection: 'Select a layer or choose a drawing tool.', filled: 'Fill silhouette', stroked: 'Show stroke', width: 'Stroke width', cap: 'Line cap', join: 'Line join',
+      round: 'Round', butt: 'Butt', square: 'Square', miter: 'Miter', bevel: 'Bevel',
+      fit: 'Fit 20px safe area', center: 'Center', closePath: 'Close path', nodeTitle: 'Edit node', smooth: 'Smooth node', corner: 'Corner node', insert: 'Insert node', removeNode: 'Delete node',
+      traceTitle: 'Image → vector', contrast: 'Foreground contrast', simplify: 'Simplification', smoothing: 'Curve smoothing', minArea: 'Min. area (pixels)', trace: 'Trace as new layer',
+      traceHelp: 'Monochrome silhouette tracing preserves holes. Redraw centerlines over the reference for outline icons; tracing does not infer meanings such as “Home”.',
+      preview: 'Actual sizes', code: 'SVG source', guide: '24×24 · Default 2px round strokes · currentColor',
+      help: 'V select · A nodes · P pen · Enter finish · Esc cancel · ⌘/Ctrl Z undo · Arrow keys nudge',
+      penHelp: 'Click to add nodes, drag for curve handles. Click the first node to close; Enter to finish.',
+      ready: 'Import PNG / JPG / WebP to trace automatically, or choose a drawing tool.',
+      tracing: 'Analyzing pixels and tracing contours…', traced: 'Editable paths created. Press A to edit nodes and handles.', imported: 'Project loaded.',
+      saved: 'File saved.', downloaded: 'File download started.', copied: 'SVG copied.', emptyExport: 'Draw or trace a visible layer first.',
+      invalidImage: 'Choose a valid PNG / JPG / WebP: up to 20 MB, 16 megapixels, 8192 pixels per side.',
+      invalidProject: 'Unsupported or incomplete project. The current canvas and original file are preserved.',
+      noForeground: 'No foreground found. Lower contrast or minimum area.', tooComplex: 'Too many contours. Increase simplification or minimum area, or use a simpler image.',
+      traceFailed: 'Tracing failed. Try a monochrome image with a simple background.',
+      saveFailed: 'Could not save. Try again or choose a writable location.', storageFailed: 'Autosave unavailable. Save a project file.', storageInvalid: 'The saved project could not be read. Its record is preserved; import a project manually.',
+      copyFailed: 'Clipboard unavailable. Export an SVG file instead.', unsupportedSave: 'This host cannot save files. Use the standalone HTML version.',
+      busy: 'Please wait for image processing to finish.', tooSmall: 'Drag farther to draw a shape.',
+      layer: 'Path', traceLayer: 'Trace', changed: 'Updated.', restored: 'Previous vector project restored.',
+      autosave: 'Vector project autosave', noRasterExport: 'SVG excludes the reference image, grid and editing handles.',
+      theme: 'Theme', language: '中文', canvas: 'Vector drawing canvas', nodeX: 'Node X', nodeY: 'Node Y',
+      visible: 'Show layer', layerName: 'Layer name', nodeMin: 'Closed paths need at least 3 nodes; open paths need at least 2.',
+      clipping: 'Some paths may extend beyond the canvas. Check actual sizes or fit the safe area.', paths: 'layers', nodes: 'nodes',
+      sampling: 'Sampled at up to 512px on the longest side. The reference is excluded from SVG.',
+    },
+  };
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/interactions.js b/MiniApp/Demo/icon-studio-v2/source/ui/interactions.js
new file mode 100644
index 0000000000..3fff114081
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/interactions.js
@@ -0,0 +1,214 @@
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const canvas = $('canvas');
+  function location(event) {
+    const box = canvas.getBoundingClientRect();
+    return { x: (event.clientX - box.left) / box.width * 24, y: (event.clientY - box.top) / box.height * 24 };
+  }
+  const snapped = (p, disabled = false) => ({ x: S.snap(p.x, disabled), y: S.snap(p.y, disabled) });
+  function begin(event) {
+    if (event.button !== 0 || S.busy || S.saving || event.detail > 1) return;
+    event.preventDefault(); canvas.focus();
+    const raw = location(event), p = snapped(raw, event.altKey);
+    const shapeElement = event.target.closest('[data-shape]');
+    const nodeElement = event.target.closest('[data-node]');
+    const handleElement = event.target.closest('[data-handle]');
+    let gesture;
+    if (S.tool === 'select' || S.tool === 'node') {
+      if (S.tool === 'node' && handleElement && S.currentNode()) {
+        gesture = { type: 'handle', key: handleElement.dataset.handle, before: S.snapshot(), original: G.copy(S.current()), start: raw };
+      } else if (S.tool === 'node' && nodeElement && S.current()) {
+        S.node = { ci: Number(nodeElement.dataset.contour), ni: Number(nodeElement.dataset.node) };
+        gesture = { type: 'node', before: S.snapshot(), original: G.copy(S.current()), start: raw };
+      } else if (shapeElement) {
+        if (S.selected !== shapeElement.dataset.shape) { S.selected = shapeElement.dataset.shape; S.node = null; }
+        if (S.tool === 'select') gesture = { type: 'move', before: S.snapshot(), original: G.copy(S.current()), start: raw };
+      } else { S.selected = null; S.node = null; }
+    } else if (S.tool === 'pen') {
+      if (S.draft && event.target.dataset.draftNode === '0' && S.draft.contours[0].nodes.length >= 3) {
+        S.finishDraft(true); S.render(); return;
+      }
+      const draftBefore = S.draft ? G.copy(S.draft) : null;
+      if (!S.draft) S.draft = G.shape([{ closed: false, nodes: [] }]);
+      S.draft.contours[0].nodes.push(G.point(p.x, p.y));
+      gesture = { type: 'pen', start: p, draftBefore };
+    } else if (S.tool === 'pencil') {
+      S.draft = G.shape([{ closed: false, nodes: [G.point(raw.x, raw.y)] }]);
+      gesture = { type: 'pencil', points: [[raw.x, raw.y]] };
+    } else {
+      S.draft = G.primitive(S.tool, p, p);
+      gesture = { type: 'primitive', primitive: S.tool, start: p };
+    }
+    if (gesture) {
+      gesture.pointerId = event.pointerId;
+      S.gesture = gesture;
+      canvas.setPointerCapture?.(event.pointerId);
+    }
+    S.render();
+  }
+  function move(event) {
+    const gesture = S.gesture;
+    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    const raw = location(event), p = snapped(raw, event.altKey);
+    if (['move', 'node', 'handle'].includes(gesture.type)) {
+      const shape = G.copy(gesture.original);
+      if (gesture.type === 'move') {
+        G.transform(shape, 1, 1, S.snap(raw.x - gesture.start.x, event.altKey), S.snap(raw.y - gesture.start.y, event.altKey));
+      } else {
+        const n = shape.contours[S.node.ci].nodes[S.node.ni];
+        if (gesture.type === 'node') G.moveNode(n, p.x, p.y);
+        else n[gesture.key] = [p.x, p.y];
+      }
+      const index = S.doc.shapes.findIndex(s => s.id === shape.id); S.doc.shapes[index] = shape;
+    } else if (gesture.type === 'pen') {
+      const n = S.draft.contours[0].nodes.at(-1), dx = p.x - n.x, dy = p.y - n.y;
+      if (Math.hypot(dx, dy) > .08) { n.out = [p.x, p.y]; n.in = [n.x - dx, n.y - dy]; }
+    } else if (gesture.type === 'pencil') {
+      const last = gesture.points.at(-1);
+      if (Math.hypot(raw.x - last[0], raw.y - last[1]) >= .05) {
+        gesture.points.push([raw.x, raw.y]);
+        S.draft.contours[0].nodes.push(G.point(raw.x, raw.y));
+      }
+    } else if (gesture.type === 'primitive') {
+      if (event.shiftKey && gesture.primitive !== 'line') {
+        const size = Math.max(Math.abs(p.x - gesture.start.x), Math.abs(p.y - gesture.start.y));
+        p.x = gesture.start.x + size * (p.x < gesture.start.x ? -1 : 1);
+        p.y = gesture.start.y + size * (p.y < gesture.start.y ? -1 : 1);
+      }
+      S.draft = G.primitive(gesture.primitive, gesture.start, p);
+    }
+    S.renderCanvas();
+  }
+  function end(event, cancelled = false) {
+    const gesture = S.gesture;
+    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    if (!cancelled) move(event);
+    S.gesture = null;
+    if (canvas.hasPointerCapture?.(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+    if (cancelled) {
+      if (gesture.before) S.doc = gesture.before;
+      if (gesture.type === 'pen') S.draft = gesture.draftBefore;
+      else S.draft = null;
+      S.render(); return;
+    }
+    if (gesture.before) S.record(gesture.before);
+    else if (gesture.type === 'primitive') {
+      const draft = S.draft, b = G.bounds(draft); S.draft = null;
+      const valid = gesture.primitive === 'line' ? Math.hypot(b.width, b.height) >= .1 : b.width >= .1 && b.height >= .1;
+      if (valid) S.change(() => S.add(draft, S.t(gesture.primitive).replace(/\s+[A-Z]$/, '')));
+      else { S.status('tooSmall', 'warning'); S.render(); }
+    } else if (gesture.type === 'pencil') {
+      const points = G.simplify(gesture.points, .08);
+      S.draft.contours[0].nodes = points.map(([x, y]) => G.point(x, y));
+      S.draft.contours[0].nodes.forEach((_, i) => G.smoothNode(S.draft.contours[0], i, .7));
+      S.finishDraft(false);
+    } else S.render();
+  }
+  canvas.addEventListener('pointerdown', begin);
+  canvas.addEventListener('pointermove', move);
+  canvas.addEventListener('pointerup', e => end(e));
+  canvas.addEventListener('pointercancel', e => end(e, true));
+  canvas.addEventListener('dblclick', event => {
+    event.preventDefault();
+    if (S.tool === 'pen') { S.finishDraft(false); return; }
+    if (S.tool !== 'node' || !S.current() || event.target.closest('[data-node], [data-handle]')) return;
+    const p = location(event), nearest = G.nearestSegment(S.current(), p.x, p.y);
+    if (nearest && nearest.distance < 1) S.change(() => {
+      G.splitSegment(S.current().contours[nearest.contour], nearest.index, nearest.t);
+      S.node = { ci: nearest.contour, ni: nearest.index + 1 };
+    });
+  });
+  S.deleteNode = () => {
+    const node = S.currentNode(); if (!node) return;
+    const contour = S.current().contours[S.node.ci];
+    if (contour.nodes.length <= (contour.closed ? 3 : 2)) { S.status('nodeMin', 'warning'); return; }
+    S.change(() => { contour.nodes.splice(S.node.ni, 1); S.node.ni = Math.min(S.node.ni, contour.nodes.length - 1); });
+  };
+  S.deleteLayer = () => {
+    if (!S.current()) return;
+    S.change(() => { S.doc.shapes = S.doc.shapes.filter(s => s.id !== S.selected); S.selected = S.doc.shapes.at(-1)?.id || null; S.node = null; });
+  };
+  S.duplicate = () => {
+    if (!S.current()) return;
+    S.change(() => { const shape = G.copy(S.current()); G.transform(shape, 1, 1, .5, .5); S.add(shape); });
+  };
+  document.querySelectorAll('[data-tool]').forEach(button => button.addEventListener('click', () => S.setTool(button.dataset.tool)));
+  $('undo').addEventListener('click', () => S.history(false)); $('redo').addEventListener('click', () => S.history(true));
+  $('duplicate').addEventListener('click', S.duplicate); $('delete').addEventListener('click', S.deleteLayer);
+  $('delete-node').addEventListener('click', S.deleteNode);
+  $('insert-node').addEventListener('click', () => { if (S.currentNode()) S.change(() => {
+    if (G.splitSegment(S.current().contours[S.node.ci], S.node.ni)) S.node.ni++;
+  }); });
+  $('smooth').addEventListener('click', () => { if (S.currentNode()) S.change(() => G.smoothNode(S.current().contours[S.node.ci], S.node.ni)); });
+  $('corner').addEventListener('click', () => { if (S.currentNode()) S.change(() => { S.currentNode().in = null; S.currentNode().out = null; }); });
+  for (const key of ['x', 'y']) $(`node-${key}`).addEventListener('change', () => {
+    const n = S.currentNode(), value = Number($(`node-${key}`).value);
+    if (n && Number.isFinite(value) && Math.abs(value) <= 10000) S.change(() => G.moveNode(n, key === 'x' ? value : n.x, key === 'y' ? value : n.y));
+    else S.render();
+  });
+  for (const [id, key] of [['fill', 'fill'], ['stroke', 'stroke'], ['visible', 'visible']]) $(id).addEventListener('change', () => { if (S.current()) S.change(() => { S.current()[key] = $(id).checked; }); });
+  for (const key of ['cap', 'join']) $(key).addEventListener('change', () => { if (S.current()) S.change(() => { S.current()[key] = $(key).value; }); });
+  $('stroke-width').addEventListener('change', () => {
+    const value = Number($('stroke-width').value);
+    if (S.current() && value >= .1 && value <= 8) S.change(() => { S.current().width = value; }); else S.render();
+  });
+  $('layer-name').addEventListener('change', () => { if (S.current()) S.change(() => { S.current().name = $('layer-name').value.slice(0, 80) || S.t('layer'); }); });
+  $('name').addEventListener('change', () => S.change(() => { S.doc.name = $('name').value.slice(0, 80) || 'icon'; }));
+  for (const key of ['x', 'y', 'w', 'h']) $(`shape-${key}`).addEventListener('change', () => {
+    const shape = S.current(), value = Number($(`shape-${key}`).value);
+    if (!shape || !Number.isFinite(value) || Math.abs(value) > 1000 || ['w', 'h'].includes(key) && value < .1) { S.render(); return; }
+    S.change(() => {
+      const b = G.bounds(shape);
+      if (key === 'x' || key === 'y') G.transform(shape, 1, 1, key === 'x' ? value - b.x : 0, key === 'y' ? value - b.y : 0);
+      else if (b[key === 'w' ? 'width' : 'height'] > 0) G.transform(shape, key === 'w' ? value / b.width : 1, key === 'h' ? value / b.height : 1, 0, 0, [b.x, b.y]);
+    });
+  });
+  $('center').addEventListener('click', () => { if (S.current()) S.change(() => {
+    const b = G.bounds(S.current()); G.transform(S.current(), 1, 1, 12 - b.x - b.width / 2, 12 - b.y - b.height / 2);
+  }); });
+  $('fit').addEventListener('click', () => { if (S.current()) S.change(() => {
+    const shape = S.current(), b = G.bounds(shape), padding = shape.stroke ? shape.width / 2 : 0;
+    const scale = (20 - padding * 2) / (Math.max(b.width, b.height) || 1);
+    G.transform(shape, scale, scale, 0, 0, [b.x + b.width / 2, b.y + b.height / 2]);
+    const next = G.bounds(shape); G.transform(shape, 1, 1, 12 - next.x - next.width / 2, 12 - next.y - next.height / 2);
+  }); });
+  $('close-path').addEventListener('click', () => { if (S.current()) S.change(() => {
+    for (const contour of S.current().contours) if (contour.nodes.length >= 3) contour.closed = true;
+  }); });
+  for (const [id, direction] of [['raise', 1], ['lower', -1]]) $(id).addEventListener('click', () => { if (S.current()) S.change(() => {
+    const index = S.doc.shapes.findIndex(s => s.id === S.selected), next = index + direction;
+    if (next >= 0 && next < S.doc.shapes.length) [S.doc.shapes[index], S.doc.shapes[next]] = [S.doc.shapes[next], S.doc.shapes[index]];
+  }); });
+  $('grid').addEventListener('change', S.renderCanvas);
+  $('zoom').addEventListener('change', () => { canvas.setAttribute('width', $('zoom').value); canvas.setAttribute('height', $('zoom').value); });
+  $('show-reference').addEventListener('change', S.renderCanvas); $('reference-opacity').addEventListener('input', S.renderCanvas);
+  for (const key of ['contrast', 'simplify', 'smoothing', 'minArea']) $(`trace-${key}`).addEventListener('input', () => { $(`trace-${key}-value`).textContent = $(`trace-${key}`).value; });
+  document.addEventListener('keydown', event => {
+    if (event.target.matches('input, textarea, select') || event.target.isContentEditable || S.busy || S.saving) return;
+    const key = event.key.toLowerCase(), command = event.metaKey || event.ctrlKey;
+    if (command && key === 'z') { event.preventDefault(); S.history(event.shiftKey); return; }
+    if (command && key === 'y') { event.preventDefault(); S.history(true); return; }
+    if (command && key === 'd') { event.preventDefault(); S.duplicate(); return; }
+    if (command && key === 's') { event.preventDefault(); S.saveProject?.(); return; }
+    if (command || event.altKey) return;
+    if (key === 'escape') {
+      if (S.gesture?.before) S.doc = S.gesture.before;
+      S.draft = null; S.gesture = null; S.node = null; S.render(); return;
+    }
+    if (key === 'enter') { S.finishDraft(false); return; }
+    if (key === 'delete' || key === 'backspace') {
+      event.preventDefault();
+      if (S.draft) { S.draft.contours[0].nodes.pop(); if (!S.draft.contours[0].nodes.length) S.draft = null; S.render(); }
+      else if (S.tool === 'node' && S.currentNode()) S.deleteNode(); else S.deleteLayer();
+      return;
+    }
+    const tools = { v: 'select', a: 'node', p: 'pen', b: 'pencil', l: 'line', r: 'rect', o: 'ellipse' };
+    if (tools[key]) { event.preventDefault(); S.setTool(tools[key]); return; }
+    if (key.startsWith('arrow') && S.current()) {
+      event.preventDefault(); const step = event.shiftKey ? 1 : Number($('snap').value) || .1;
+      const dx = key === 'arrowleft' ? -step : key === 'arrowright' ? step : 0;
+      const dy = key === 'arrowup' ? -step : key === 'arrowdown' ? step : 0;
+      S.change(() => { const n = S.currentNode(); if (n) G.moveNode(n, n.x + dx, n.y + dy); else G.transform(S.current(), 1, 1, dx, dy); });
+    }
+  });
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/io.js b/MiniApp/Demo/icon-studio-v2/source/ui/io.js
new file mode 100644
index 0000000000..0faa55975b
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/io.js
@@ -0,0 +1,156 @@
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const storageKey = 'icon-studio-project-v1';
+  let timer, dirty = false, queued = null, writing = false, drainPromise = Promise.resolve();
+  const errorKey = (error, fallback) => Object.hasOwn(StudioMessages['en-US'], error?.message) ? error.message : fallback;
+  async function drain() {
+    writing = true;
+    try {
+      while (queued) {
+        const snapshot = queued; queued = null;
+        try {
+        if (S.host) {
+          if (!S.host.storage?.set) throw new Error('storageFailed');
+          await S.host.storage.set(storageKey, snapshot);
+        } else localStorage.setItem(storageKey, JSON.stringify(snapshot));
+        } catch { S.status('storageFailed', 'warning'); }
+      }
+    } finally { writing = false; }
+  }
+  S.flushSave = () => {
+    clearTimeout(timer); timer = null;
+    if (dirty) { queued = S.snapshot(); dirty = false; }
+    // drain() invokes the host before its first await, so pagehide does not
+    // leave a new save request waiting in a cancelled debounce timer.
+    if (queued && !writing) drainPromise = drain();
+    return drainPromise;
+  };
+  S.autosave = () => {
+    dirty = true; clearTimeout(timer);
+    timer = setTimeout(S.flushSave, 400);
+  };
+  S.restore = async () => {
+    const revision = S.revision;
+    try {
+      const saved = S.host ? await S.host.storage?.get?.(storageKey) : JSON.parse(localStorage.getItem(storageKey) || 'null');
+      if (saved == null || S.revision !== revision || S.busy || S.draft) return;
+      S.doc = G.normalizeProject(saved); S.selected = S.doc.shapes.at(-1)?.id || null;
+      S.render(); S.status('restored');
+    } catch { S.status('storageInvalid', 'warning'); }
+  };
+  async function saveFile(text, filename, extension, mime) {
+    if (S.busy || S.saving) return;
+    S.finishDraft(false);
+    S.saving = true; S.render();
+    try {
+      if (S.host) {
+        if (!S.host.dialog?.save || !S.host.fs?.writeFile) { S.status('unsupportedSave', 'error'); return; }
+        const path = await S.host.dialog.save({ title: filename, defaultPath: filename, filters: [{ name: extension.toUpperCase(), extensions: [extension] }] });
+        if (!path) return;
+        await S.host.fs.writeFile(path, text, { encoding: 'utf-8' }); S.status('saved');
+      } else {
+        const link = document.createElement('a'); link.download = filename;
+        link.href = `data:${mime};charset=utf-8,${encodeURIComponent(text)}`;
+        document.body.append(link); link.click(); link.remove(); S.status('downloaded');
+      }
+    } catch { S.status('saveFailed', 'error'); }
+    finally { S.saving = false; S.render(); }
+  }
+  const filename = () => (S.doc.name.trim().replace(/[^a-zA-Z0-9_-]+/g, '-') || 'icon').slice(0, 64);
+  S.saveProject = () => {
+    S.finishDraft(false);
+    return saveFile(JSON.stringify(S.doc, null, 2), `${filename()}.icon.json`, 'json', 'application/json');
+  };
+  S.exportSVG = () => {
+    S.finishDraft(false);
+    if (!S.doc.shapes.some(s => s.visible && (s.fill || s.stroke))) { S.status('emptyExport', 'warning'); return; }
+    return saveFile(G.exportSVG(S.doc), `${filename()}.svg`, 'svg', 'image/svg+xml');
+  };
+  S.trace = async () => {
+    if (!S.source || S.busy || S.saving) return;
+    S.finishDraft(false);
+    const job = ++S.job, revision = S.revision;
+    S.busy = true; S.render(); S.status('tracing');
+    try {
+      const output = await IconTrace.trace(S.source, {
+        contrast: Number($('trace-contrast').value), simplify: Number($('trace-simplify').value),
+        smoothing: Number($('trace-smoothing').value), minArea: Number($('trace-minArea').value),
+      }, () => job !== S.job || revision !== S.revision);
+      if (job !== S.job || revision !== S.revision) return;
+      S.busy = false;
+      S.change(() => S.add(output.shape, S.t('traceLayer')));
+      S.tool = 'node'; S.node = null; S.render(); S.status('traced');
+    } catch (error) {
+      if (job === S.job && error.message !== 'cancelled') S.status(errorKey(error, 'traceFailed'), 'error');
+    } finally { if (job === S.job) { S.busy = false; S.render(); } }
+  };
+  const readURL = file => new Promise((resolve, reject) => {
+    const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file);
+  });
+  S.load = async file => {
+    if (S.busy || S.saving) { S.status('busy'); return; }
+    if (S.draft) S.finishDraft(false);
+    if (file.size > 20 * 1024 * 1024) { S.status('invalidImage', 'error'); return; }
+    if (/\.json$/i.test(file.name)) {
+      S.busy = true; S.render();
+      try {
+        if (file.size > 4 * 1024 * 1024) throw new Error('invalidProject');
+        const next = G.normalizeProject(JSON.parse(await file.text()));
+        S.busy = false;
+        S.change(() => { S.doc = next; S.selected = next.shapes.at(-1)?.id || null; S.node = null; });
+        S.source = null; S.referenceURL = ''; S.render(); S.status('imported');
+      } catch { S.status('invalidProject', 'error'); }
+      finally { S.busy = false; S.render(); }
+      return;
+    }
+    if (!/^image\/(png|jpeg|webp)$/.test(file.type) && !(file.type === '' && /\.(png|jpe?g|webp)$/i.test(file.name))) { S.status('invalidImage', 'error'); return; }
+    const job = ++S.job;
+    S.busy = true; S.render(); S.status('tracing');
+    try {
+      const source = await readURL(file), image = new Image();
+      await new Promise((resolve, reject) => { image.onload = resolve; image.onerror = reject; image.src = source; });
+      if (job !== S.job) return;
+      const w = image.naturalWidth, h = image.naturalHeight;
+      if (!w || !h || w * h > 16000000 || w > 8192 || h > 8192) throw new Error('invalidImage');
+      const scale = Math.min(1, 512 / Math.max(w, h));
+      const buffer = document.createElement('canvas'); buffer.width = Math.max(1, Math.round(w * scale)); buffer.height = Math.max(1, Math.round(h * scale));
+      const context = buffer.getContext('2d', { willReadFrequently: true }); context.drawImage(image, 0, 0, buffer.width, buffer.height);
+      S.source = context.getImageData(0, 0, buffer.width, buffer.height);
+      S.referenceURL = buffer.toDataURL('image/png'); $('show-reference').checked = true;
+      S.busy = false; S.render(); await S.trace();
+    } catch (error) {
+      if (job === S.job) S.status(errorKey(error, 'invalidImage'), 'error');
+    } finally { if (job === S.job) { S.busy = false; S.render(); } }
+  };
+  $('import').addEventListener('click', () => $('file').click());
+  $('file').addEventListener('change', event => { const file = event.target.files?.[0]; if (file) void S.load(file); event.target.value = ''; });
+  $('export').addEventListener('click', S.exportSVG); $('project').addEventListener('click', S.saveProject); $('trace').addEventListener('click', S.trace);
+  $('copy').addEventListener('click', async () => {
+    S.finishDraft(false);
+    if (!S.doc.shapes.some(s => s.visible && (s.fill || s.stroke))) { S.status('emptyExport', 'warning'); return; }
+    const svg = G.exportSVG(S.doc);
+    try { if (S.host) await S.host.clipboard.writeText(svg); else await navigator.clipboard.writeText(svg); S.status('copied'); }
+    catch { S.status('copyFailed', 'warning'); }
+  });
+  let dragDepth = 0;
+  document.addEventListener('dragenter', event => {
+    if (!Array.from(event.dataTransfer?.types || []).includes('Files')) return;
+    event.preventDefault(); dragDepth++; document.body.classList.add('dragging');
+  });
+  document.addEventListener('dragover', event => { if (Array.from(event.dataTransfer?.types || []).includes('Files')) event.preventDefault(); });
+  document.addEventListener('dragleave', () => { dragDepth = Math.max(0, dragDepth - 1); if (!dragDepth) document.body.classList.remove('dragging'); });
+  document.addEventListener('drop', event => {
+    event.preventDefault(); dragDepth = 0; document.body.classList.remove('dragging');
+    const file = event.dataTransfer?.files?.[0]; if (file) void S.load(file);
+  });
+  document.addEventListener('paste', event => {
+    if (event.target.matches('input, textarea') || event.target.isContentEditable) return;
+    const file = Array.from(event.clipboardData?.files || []).find(f => f.type.startsWith('image/'));
+    if (file) { event.preventDefault(); void S.load(file); }
+  });
+  window.addEventListener('pagehide', () => {
+    S.job++;
+    void S.flushSave();
+  });
+  S.host?.onDeactivate?.(() => { void S.flushSave(); });
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/render.js b/MiniApp/Demo/icon-studio-v2/source/ui/render.js
new file mode 100644
index 0000000000..aee5831206
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/render.js
@@ -0,0 +1,111 @@
+(() => {
+  const S = IconStudio, G = IconGeometry, $ = S.$;
+  const ns = 'http://www.w3.org/2000/svg';
+  const node = (tag, attrs = {}) => {
+    const el = document.createElementNS(ns, tag);
+    for (const [key, value] of Object.entries(attrs)) el.setAttribute(key, value);
+    return el;
+  };
+  function field(id, value) { if (document.activeElement !== $(id)) $(id).value = value; }
+  S.localize = () => {
+    document.documentElement.lang = S.locale;
+    document.title = `${S.t('title')} V2.0.2`;
+    document.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = S.t(el.dataset.i18n); });
+    document.querySelectorAll('[data-i18n-aria]').forEach(el => { el.setAttribute('aria-label', S.t(el.dataset.i18nAria)); });
+    S.status(S.statusKey, S.tone);
+  };
+  S.renderCanvas = () => {
+    const art = $('art'); art.replaceChildren();
+    for (const shape of S.doc.shapes) {
+      if (!shape.visible) continue;
+      const group = node('g', { 'data-shape': shape.id });
+      const path = node('path', { d: G.pathData(shape), fill: shape.fill ? 'currentColor' : 'none', stroke: shape.stroke ? 'currentColor' : 'none',
+        'fill-rule': 'evenodd', 'stroke-width': shape.width, 'stroke-linecap': shape.cap, 'stroke-linejoin': shape.join, opacity: shape.opacity });
+      group.append(path, node('path', { d: G.pathData(shape), class: 'art-hit', 'pointer-events': 'stroke' })); art.append(group);
+    }
+    const draft = $('draft'); draft.replaceChildren();
+    if (S.draft) {
+      draft.append(node('path', { d: G.pathData(S.draft), fill: 'none', stroke: 'currentColor', 'stroke-width': S.draft.width, 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'pointer-events': 'none' }));
+    }
+    const handles = $('handles'); handles.replaceChildren();
+    const selected = S.current();
+    if (selected && selected.visible) {
+      const b = G.bounds(selected);
+      handles.append(node('rect', { x: b.x - .2, y: b.y - .2, width: Math.max(.4, b.width + .4), height: Math.max(.4, b.height + .4), class: 'selection-box' }));
+      if (S.tool === 'node') selected.contours.forEach((contour, ci) => {
+        contour.nodes.forEach((n, ni) => {
+          const active = S.node?.ci === ci && S.node?.ni === ni;
+          const group = node('g', { 'data-node': ni, 'data-contour': ci });
+          group.append(node('circle', { cx: n.x, cy: n.y, r: .48, class: 'node-hit' }),
+            node('circle', { cx: n.x, cy: n.y, r: active ? .21 : .15, class: `node-point${active ? ' active' : ''}`, 'pointer-events': 'none' }));
+          handles.append(group);
+        });
+      });
+      if (S.tool === 'node' && S.currentNode()) {
+        const n = S.currentNode();
+        for (const key of ['in', 'out']) if (n[key]) {
+          const [x, y] = n[key];
+          handles.append(node('line', { x1: n.x, y1: n.y, x2: x, y2: y, class: 'control-line' }));
+          const group = node('g', { 'data-handle': key });
+          group.append(node('circle', { cx: x, cy: y, r: .48, class: 'node-hit' }), node('circle', { cx: x, cy: y, r: .15, class: 'control-point', 'pointer-events': 'none' }));
+          handles.append(group);
+        }
+      }
+    }
+    if (S.draft && S.tool === 'pen') S.draft.contours[0].nodes.forEach((n, i) => {
+      handles.append(node('circle', { cx: n.x, cy: n.y, r: .19, class: 'node-point', 'data-draft-node': i }));
+    });
+    $('grid-overlay').hidden = !$('grid').checked;
+    $('grid-overlay').style.display = $('grid').checked ? '' : 'none';
+    $('reference-image').setAttribute('href', S.referenceURL);
+    $('reference-image').setAttribute('opacity', $('show-reference').checked ? $('reference-opacity').value : '0');
+    $('canvas').style.cursor = ['select', 'node'].includes(S.tool) ? 'default' : 'crosshair';
+  };
+  S.render = () => {
+    S.renderCanvas();
+    document.querySelectorAll('[data-tool]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.tool === S.tool)));
+    const selected = S.current(), disabled = S.busy || S.saving;
+    $('properties').disabled = !selected || disabled;
+    $('no-selection').hidden = Boolean(selected);
+    field('name', S.doc.name);
+    const layers = $('layers'); layers.replaceChildren();
+    if (!S.doc.shapes.length) { const empty = document.createElement('p'); empty.className = 'hint'; empty.textContent = S.t('emptyLayers'); layers.append(empty); }
+    for (const shape of [...S.doc.shapes].reverse()) {
+      const row = document.createElement('div'); row.className = `layer${shape.id === S.selected ? ' active' : ''}`;
+      const check = document.createElement('input'); check.type = 'checkbox'; check.checked = shape.visible; check.disabled = disabled;
+      check.setAttribute('aria-label', `${S.t('visible')}: ${shape.name}`);
+      check.addEventListener('change', () => S.change(() => { shape.visible = check.checked; }));
+      const button = document.createElement('button'); button.textContent = shape.name; button.disabled = disabled;
+      button.addEventListener('click', () => S.select(shape.id)); row.append(check, button); layers.append(row);
+    }
+    if (selected) {
+      const b = G.bounds(selected);
+      field('layer-name', selected.name);
+      for (const [id, value] of [['shape-x', b.x], ['shape-y', b.y], ['shape-w', b.width], ['shape-h', b.height], ['stroke-width', selected.width]]) field(id, Number(value.toFixed(3)));
+      $('fill').checked = selected.fill; $('stroke').checked = selected.stroke; $('visible').checked = selected.visible;
+      $('cap').value = selected.cap; $('join').value = selected.join;
+    }
+    const currentNode = S.currentNode();
+    $('node-properties').hidden = !currentNode;
+    if (currentNode) { field('node-x', Number(currentNode.x.toFixed(3))); field('node-y', Number(currentNode.y.toFixed(3))); }
+    for (const id of ['duplicate', 'delete', 'fit', 'center', 'close-path', 'raise', 'lower']) $(id).disabled = !selected || disabled;
+    $('undo').disabled = !S.undo.length || disabled; $('redo').disabled = !S.redo.length || disabled;
+    $('trace-controls').disabled = !S.source || disabled;
+    $('reference-controls').hidden = !S.referenceURL;
+    for (const id of ['import', 'new', 'project', 'export', 'copy', 'home', 'download-starter', 'name']) $(id).disabled = disabled;
+    document.querySelectorAll('[data-tool]').forEach(button => { button.disabled = disabled; });
+    const svg = G.exportSVG(S.doc);
+    $('code').value = svg;
+    const previews = $('previews'); previews.replaceChildren();
+    for (const size of [16, 20, 24, 32]) {
+      const sample = document.createElement('div'); sample.className = 'preview-sample';
+      const label = document.createElement('span'); label.textContent = `${size}px`;
+      const standard = document.createElement('div'); standard.className = 'preview-pair'; standard.innerHTML = G.exportSVG(S.doc, size);
+      const inverse = document.createElement('div'); inverse.className = 'preview-pair preview-inverse'; inverse.innerHTML = G.exportSVG(S.doc, size);
+      sample.append(label, standard, inverse); previews.append(sample);
+    }
+    const count = S.doc.shapes.reduce((sum, shape) => sum + shape.contours.reduce((n, c) => n + c.nodes.length, 0), 0);
+    $('node-count').textContent = `${S.doc.shapes.length} ${S.t('paths')} · ${count} ${S.t('nodes')}`;
+    $('instructions').textContent = S.t(S.tool === 'pen' ? 'penHelp' : 'help');
+  };
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/state.js b/MiniApp/Demo/icon-studio-v2/source/ui/state.js
new file mode 100644
index 0000000000..0ce29617ff
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/state.js
@@ -0,0 +1,78 @@
+(() => {
+  const G = IconGeometry;
+  const S = {
+    $: id => document.getElementById(id), host: window.app,
+    locale: /^(zh|yue)/i.test(window.app?.locale || navigator.language) ? 'zh-CN' : 'en-US',
+    doc: { schemaVersion: 1, release: '2.0.2', name: 'icon', shapes: [] },
+    selected: null, node: null, tool: 'select', draft: null, gesture: null,
+    undo: [], redo: [], revision: 0, sequence: 0, job: 0, busy: false, saving: false,
+    source: null, referenceURL: '', statusKey: 'ready', tone: '',
+  };
+  S.t = key => StudioMessages[S.locale][key] || key;
+  S.status = (key, tone = '') => {
+    S.statusKey = key; S.tone = tone;
+    S.$('status').textContent = S.t(key); S.$('status').dataset.tone = tone;
+  };
+  S.current = () => S.doc.shapes.find(s => s.id === S.selected) || null;
+  S.currentNode = () => S.node ? S.current()?.contours[S.node.ci]?.nodes[S.node.ni] : null;
+  S.nextId = () => {
+    let id;
+    do { id = `path-${++S.sequence}`; } while (S.doc.shapes.some(s => s.id === id));
+    return id;
+  };
+  S.snapshot = () => G.copy(S.doc);
+  S.record = before => {
+    if (JSON.stringify(before) === JSON.stringify(S.doc)) { S.render?.(); return true; }
+    // The editor must never save a document that its own reader cannot open.
+    try { G.normalizeProject(S.doc); }
+    catch {
+      S.doc = before;
+      if (!S.current()) S.selected = S.doc.shapes.at(-1)?.id || null;
+      S.node = null; S.render?.(); S.status('tooComplex', 'warning'); return false;
+    }
+    S.undo.push(before); if (S.undo.length > 100) S.undo.shift();
+    S.redo = []; S.revision++; S.autosave?.(); S.render?.();
+    if (S.doc.shapes.some(shape => {
+      const b = G.bounds(shape), padding = shape.stroke ? shape.width / 2 : 0;
+      return shape.visible && (b.x - padding < 0 || b.y - padding < 0 || b.x + b.width + padding > 24 || b.y + b.height + padding > 24);
+    })) S.status('clipping', 'warning');
+    return true;
+  };
+  S.change = fn => {
+    if (S.busy || S.saving) { S.status('busy'); return false; }
+    const before = S.snapshot(); fn(); return S.record(before);
+  };
+  S.add = (shape, name) => {
+    shape.id = S.nextId(); shape.name = name || shape.name;
+    S.doc.shapes.push(shape); S.selected = shape.id; S.node = null;
+  };
+  S.history = redo => {
+    if (S.busy || S.saving) return;
+    S.draft = null; S.gesture = null;
+    const from = redo ? S.redo : S.undo, to = redo ? S.undo : S.redo;
+    if (!from.length) return;
+    to.push(S.snapshot()); S.doc = from.pop();
+    if (!S.current()) S.selected = S.doc.shapes.at(-1)?.id || null;
+    S.node = null; S.revision++; S.autosave?.(); S.render(); S.status('changed');
+  };
+  S.finishDraft = closed => {
+    if (!S.draft) return;
+    const draft = S.draft; S.draft = null;
+    const contour = draft.contours[0];
+    contour.closed = Boolean(closed);
+    if (contour.nodes.length >= (closed ? 3 : 2)) S.change(() => S.add(draft, S.t('layer')));
+    else S.render?.();
+  };
+  S.setTool = tool => {
+    if (S.busy || S.saving) return;
+    if (S.draft) S.finishDraft(false);
+    S.tool = tool; S.node = null; S.render();
+    S.status(tool === 'pen' ? 'penHelp' : 'ready');
+  };
+  S.snap = (number, disabled = false) => {
+    const step = disabled ? 0 : Number(S.$('snap').value);
+    return step ? Math.round(number / step) * step : number;
+  };
+  S.select = id => { S.selected = id; S.node = null; S.render(); };
+  globalThis.IconStudio = S;
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/ui/trace.js b/MiniApp/Demo/icon-studio-v2/source/ui/trace.js
new file mode 100644
index 0000000000..592f70fa0d
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/ui/trace.js
@@ -0,0 +1,107 @@
+(() => {
+  async function trace(image, options = {}, cancelled = () => false) {
+    const { width, height, data } = image;
+    if (!Number.isInteger(width) || !Number.isInteger(height) || width < 1 || height < 1
+      || width > 512 || height > 512 || data.length !== width * height * 4) throw new Error('invalidImage');
+    const contrast = Number(options.contrast ?? 28), epsilon = Number(options.simplify ?? 1.5);
+    const minArea = Number(options.minArea ?? 6), smoothing = Number(options.smoothing ?? .7);
+    if (![contrast, epsilon, minArea, smoothing].every(Number.isFinite) || contrast < 1 || contrast > 255
+      || epsilon < 0 || epsilon > 8 || minArea < 1 || smoothing < 0 || smoothing > 1) throw new Error('invalidImage');
+    const checkpoint = async () => {
+      if (cancelled()) throw new Error('cancelled');
+      await new Promise(resolve => setTimeout(resolve, 0));
+      if (cancelled()) throw new Error('cancelled');
+    };
+    await checkpoint();
+    const border = [];
+    for (let x = 0; x < width; x++) { border.push(x * 4); if (height > 1) border.push(((height - 1) * width + x) * 4); }
+    for (let y = 1; y < height - 1; y++) { border.push(y * width * 4); if (width > 1) border.push((y * width + width - 1) * 4); }
+    const opaque = border.filter(i => data[i + 3] >= 250);
+    let transparentPixels = false;
+    for (let i = 3; i < data.length; i += 4) if (data[i] < 128) { transparentPixels = true; break; }
+    const useAlpha = transparentPixels || opaque.length < border.length * .5;
+    const median = values => values.sort((a, b) => a - b)[Math.floor(values.length / 2)] ?? 0;
+    const background = [0, 1, 2].map(c => median(opaque.map(i => data[i + c])));
+    const count = width * height;
+    const mask = new Uint8Array(count);
+    let foreground = 0;
+    for (let i = 0; i < count; i++) {
+      const p = i * 4;
+      const difference = Math.max(...background.map((v, c) => Math.abs(data[p + c] - v)));
+      if (data[p + 3] >= 128 && (useAlpha || difference >= contrast)) { mask[i] = 1; foreground++; }
+      if (i > 0 && i % 65536 === 0) await checkpoint();
+    }
+    if (!foreground) throw new Error('noForeground');
+    const seen = new Uint8Array(count), queue = new Uint32Array(count);
+    for (let i = 0; i < count; i++) {
+      if (!mask[i] || seen[i]) continue;
+      let head = 0, tail = 1; queue[0] = i; seen[i] = 1;
+      const visit = n => { if (mask[n] && !seen[n]) { seen[n] = 1; queue[tail++] = n; } };
+      while (head < tail) {
+        const n = queue[head++], x = n % width;
+        if (x > 0) visit(n - 1); if (x + 1 < width) visit(n + 1);
+        if (n >= width) visit(n - width); if (n + width < count) visit(n + width);
+        if (head % 65536 === 0) await checkpoint();
+      }
+      if (tail < minArea) for (let n = 0; n < tail; n++) mask[queue[n]] = 0;
+    }
+    await checkpoint();
+    // Directed pixel-cell boundaries form complete compound paths. At diagonal
+    // contacts prefer a right turn, keeping touching components from crossing.
+    const edges = [], outgoing = new Map(), stride = width + 1;
+    const add = (a, b, direction) => {
+      const index = edges.length;
+      edges.push({ a, b, direction, used: false });
+      if (!outgoing.has(a)) outgoing.set(a, []);
+      outgoing.get(a).push(index);
+    };
+    for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+      const n = y * width + x;
+      if (!mask[n]) continue;
+      const a = y * stride + x, b = a + 1, c = b + stride, d = a + stride;
+      if (y === 0 || !mask[n - width]) add(a, b, 0);
+      if (x === width - 1 || !mask[n + 1]) add(b, c, 1);
+      if (y === height - 1 || !mask[n + width]) add(c, d, 2);
+      if (x === 0 || !mask[n - 1]) add(d, a, 3);
+    }
+    if (edges.length > 160000) throw new Error('tooComplex');
+    await checkpoint();
+    const contours = [];
+    const scale = 24 / Math.max(width, height), dx = (24 - width * scale) / 2, dy = (24 - height * scale) / 2;
+    const priority = { 1: 0, 0: 1, 3: 2, 2: 3 };
+    let totalNodes = 0;
+    for (const first of edges) {
+      if (first.used) continue;
+      let edge = first;
+      const points = [];
+      do {
+        edge.used = true;
+        points.push([edge.a % stride, Math.floor(edge.a / stride)]);
+        if (edge.b === first.a) break;
+        const candidates = (outgoing.get(edge.b) || []).map(i => edges[i]).filter(e => !e.used);
+        candidates.sort((a, b) => priority[(a.direction - edge.direction + 4) % 4] - priority[(b.direction - edge.direction + 4) % 4]);
+        if (!candidates.length) throw new Error('traceFailed');
+        edge = candidates[0];
+      } while (points.length <= edges.length);
+      let simple = IconGeometry.simplifyClosed(points, epsilon);
+      // A tiny enclosed hole must not disappear merely because simplification
+      // would collapse its contour to a line.
+      if (simple.length < 3) simple = IconGeometry.simplifyClosed(points, 0);
+      const contour = { closed: true, nodes: simple.map(([x, y]) => IconGeometry.point(x * scale + dx, y * scale + dy)) };
+      if (smoothing) contour.nodes.forEach((node, i) => {
+        const prev = contour.nodes[(i + contour.nodes.length - 1) % contour.nodes.length], next = contour.nodes[(i + 1) % contour.nodes.length];
+        const ax = node.x - prev.x, ay = node.y - prev.y, bx = next.x - node.x, by = next.y - node.y;
+        const dot = (ax * bx + ay * by) / (Math.hypot(ax, ay) * Math.hypot(bx, by) || 1);
+        if (dot > .6) IconGeometry.smoothNode(contour, i, smoothing);
+      });
+      totalNodes += contour.nodes.length;
+      if (totalNodes > 12000 || contours.length >= 1024) throw new Error('tooComplex');
+      contours.push(contour);
+      if (contours.length % 32 === 0) await checkpoint();
+    }
+    if (!contours.length) throw new Error('noForeground');
+    await checkpoint();
+    return { shape: IconGeometry.shape(contours, 'Trace', true), nodes: totalNodes, alphaMode: useAlpha };
+  }
+  globalThis.IconTrace = Object.freeze({ trace });
+})();
diff --git a/MiniApp/Demo/icon-studio-v2/source/worker.js b/MiniApp/Demo/icon-studio-v2/source/worker.js
new file mode 100644
index 0000000000..d09681a6d7
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/source/worker.js
@@ -0,0 +1 @@
+// Pure renderer application. Node execution is disabled.
diff --git a/MiniApp/Demo/icon-studio-v2/tests/delivery.test.mjs b/MiniApp/Demo/icon-studio-v2/tests/delivery.test.mjs
new file mode 100644
index 0000000000..fe908156b4
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/tests/delivery.test.mjs
@@ -0,0 +1,22 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import test from 'node:test';
+import vm from 'node:vm';
+const read = relative => fs.readFileSync(new URL(relative, import.meta.url), 'utf8');
+
+test('standalone V2.0.2 includes executable local assets without remote dependencies', () => {
+  const html = read('../../../../output/miniapps/icon-studio-v2.0.2.html');
+  assert.match(html, /V2\.0\.2/);
+  assert.doesNotMatch(html, /<(?:script|link)[^>]+(?:src|href)\s*=\s*["']https?:/i);
+  const scripts = [...html.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)];
+  assert.equal(scripts.length, 1);
+  new vm.Script(scripts[0][1]);
+});
+
+test('both locales cover static labels, tools and statuses', () => {
+  const context = vm.createContext({}); vm.runInContext(read('../source/ui/i18n.js'), context);
+  const messages = context.StudioMessages;
+  assert.deepEqual(Object.keys(messages['zh-CN']).sort(), Object.keys(messages['en-US']).sort());
+  for (const match of read('../source/index.html').matchAll(/data-i18n(?:-aria)?="([^"]+)"/g)) for (const table of Object.values(messages)) assert.equal(typeof table[match[1]], 'string', match[1]);
+  for (const match of read('../source/ui.js').matchAll(/\b(?:status|t)\('([^']+)'/g)) for (const table of Object.values(messages)) assert.equal(typeof table[match[1]], 'string', match[1]);
+});
diff --git a/MiniApp/Demo/icon-studio-v2/tests/geometry.test.mjs b/MiniApp/Demo/icon-studio-v2/tests/geometry.test.mjs
new file mode 100644
index 0000000000..07061491a2
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/tests/geometry.test.mjs
@@ -0,0 +1,124 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import test from 'node:test';
+import vm from 'node:vm';
+
+const context = vm.createContext({ Uint8Array, Uint32Array, setTimeout });
+for (const name of ['geometry', 'trace']) vm.runInContext(fs.readFileSync(new URL(`../source/ui/${name}.js`, import.meta.url), 'utf8'), context);
+const G = context.IconGeometry, T = context.IconTrace;
+const plain = value => JSON.parse(JSON.stringify(value));
+function raster(width, height, pixel) {
+  const data = new Uint8ClampedArray(width * height * 4);
+  for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) data.set(pixel(x, y), (y * width + x) * 4);
+  return { width, height, data };
+}
+const gray = [148, 148, 148, 255], paper = [248, 248, 248, 255], transparent = [0, 0, 0, 0];
+function inside(contours, x, y) {
+  let fill = false;
+  for (const contour of contours) for (let i = 0, j = contour.nodes.length - 1; i < contour.nodes.length; j = i++) {
+    const a = contour.nodes[i], b = contour.nodes[j];
+    if ((a.y > y) !== (b.y > y) && x < (b.x - a.x) * (y - a.y) / (b.y - a.y) + a.x) fill = !fill;
+  }
+  return fill;
+}
+
+test('traces gray-on-pale-gray raster as vector silhouettes with a real hole', async () => {
+  const image = raster(16, 16, (x, y) => x >= 3 && x < 13 && y >= 3 && y < 13 && !(x >= 6 && x < 10 && y >= 6 && y < 10) ? gray : paper);
+  const result = await T.trace(image, { minArea: 1, simplify: .25, smoothing: 0 });
+  assert.equal(result.shape.fill, true); assert.equal(result.shape.stroke, false);
+  assert.equal(result.shape.contours.length, 2);
+  assert.equal(inside(result.shape.contours, 12, 12), false);
+  assert.equal(inside(result.shape.contours, 6, 6), true);
+  const svg = G.exportSVG({ name: 'logo', shapes: [result.shape] });
+  assert.match(svg, /fill-rule="evenodd"/);
+  assert.match(svg, /currentColor/);
+  assert.doesNotMatch(svg, /<image|data:|<script|<pattern|<rect/);
+});
+
+test('tight opaque ring on transparent interior uses alpha instead of erasing the whole mark', async () => {
+  const result = await T.trace(raster(8, 8, (x, y) => x === 0 || y === 0 || x === 7 || y === 7 ? [0, 0, 0, 255] : transparent), { minArea: 1, smoothing: 0 });
+  assert.equal(result.alphaMode, true);
+  assert.equal(result.shape.contours.length, 2);
+  assert.equal(inside(result.shape.contours, 12, 12), false);
+  assert.equal(inside(result.shape.contours, 1, 1), true);
+});
+
+test('diagonal contacts stay separate; evenodd fill matches every input pixel', async () => {
+  const image = raster(6, 6, (x, y) => x > 0 && x < 5 && y > 0 && y < 5 && (x + y) % 2 ? gray : transparent);
+  const result = await T.trace(image, { minArea: 1, simplify: 0, smoothing: 0 });
+  assert.equal(result.shape.contours.length, 8);
+  for (let y = 0; y < 6; y++) for (let x = 0; x < 6; x++) {
+    assert.equal(inside(result.shape.contours, (x + .5) * 4, (y + .5) * 4), image.data[(y * 6 + x) * 4 + 3] !== 0);
+  }
+});
+
+test('simplification does not silently fill a tiny enclosed hole', async () => {
+  const result = await T.trace(raster(16, 16, (x, y) => x >= 2 && x <= 13 && y >= 2 && y <= 13 && !(x === 8 && y === 8) ? gray : transparent), { minArea: 1, simplify: 4, smoothing: 0 });
+  assert.equal(result.shape.contours.length, 2);
+  assert.equal(inside(result.shape.contours, 12.75, 12.75), false);
+});
+
+test('noise filtering removes small islands without dropping main contours', async () => {
+  const result = await T.trace(raster(12, 12, (x, y) => x >= 4 && x <= 8 && y >= 4 && y <= 8 || x === 1 && y === 1 ? gray : transparent), { minArea: 3, smoothing: 0 });
+  assert.equal(result.shape.contours.length, 1);
+  assert.equal(inside(result.shape.contours, 3, 3), false);
+});
+
+test('uniform backgrounds and cancelled work return explicit failures', async () => {
+  const image = raster(4, 4, () => paper);
+  await assert.rejects(T.trace(image), /noForeground/);
+  await assert.rejects(T.trace(image, {}, () => true), /cancelled/);
+  await assert.rejects(T.trace({ width: 1, height: 1, data: [] }), /invalidImage/);
+});
+
+test('straight-line insertion lands at the clicked location', () => {
+  const shape = G.primitive('line', { x: 0, y: 0 }, { x: 24, y: 0 });
+  const nearest = G.nearestSegment(shape, 6, 0);
+  assert.equal(nearest.t, .25);
+  G.splitSegment(shape.contours[0], nearest.index, nearest.t);
+  assert.equal(shape.contours[0].nodes[1].x, 6);
+});
+
+test('de Casteljau insertion preserves the original cubic curve', () => {
+  const a = { x: 2, y: 4, in: null, out: [3, 20] }, b = { x: 20, y: 8, in: [18, 1], out: null };
+  const contour = { closed: false, nodes: [plain(a), plain(b)] };
+  const split = .35;
+  G.splitSegment(contour, 0, split);
+  for (let i = 0; i <= 100; i++) {
+    const t = i / 100;
+    const expected = G.evaluate(a, b, t);
+    const actual = t <= split ? G.evaluate(contour.nodes[0], contour.nodes[1], t / split) : G.evaluate(contour.nodes[1], contour.nodes[2], (t - split) / (1 - split));
+    assert.ok(Math.hypot(actual[0] - expected[0], actual[1] - expected[1]) < 1e-9);
+  }
+});
+
+test('moving anchors carries both handles, and transforms retain stroke weight', () => {
+  const shape = G.primitive('ellipse', { x: 2, y: 4 }, { x: 20, y: 18 });
+  const n = shape.contours[0].nodes[0], before = plain(n);
+  G.moveNode(n, n.x + 1, n.y + 2);
+  assert.deepEqual(plain(n.in), [before.in[0] + 1, before.in[1] + 2]);
+  assert.deepEqual(plain(n.out), [before.out[0] + 1, before.out[1] + 2]);
+  G.transform(shape, 2, 2, 3, 4);
+  assert.equal(shape.width, 2);
+  assert.match(G.pathData(shape), /C/);
+});
+
+test('legacy project defaults and current-project round trips preserve editable data', () => {
+  const legacy = { schemaVersion: 1, name: 'old', shapes: [{ id: 'a', fill: true, contours: [{ closed: true, nodes: [{ x: 1, y: 1 }, { x: 3, y: 1 }, { x: 2, y: 3 }] }] }] };
+  const loaded = G.normalizeProject(legacy);
+  assert.equal(loaded.release, '2.0.2'); assert.equal(loaded.shapes[0].width, 2);
+  assert.equal(loaded.shapes[0].cap, 'round'); assert.equal(loaded.shapes[0].contours[0].nodes[0].in, null);
+  assert.deepEqual(plain(G.normalizeProject(JSON.parse(JSON.stringify(loaded)))), plain(loaded));
+  assert.equal(legacy.shapes[0].width, undefined);
+});
+
+test('untrusted projects reject invalid geometry and export names without executable markup', () => {
+  assert.throws(() => G.normalizeProject({ schemaVersion: 20, shapes: [] }), /invalidProject/);
+  const shape = G.primitive('rect', { x: 2, y: 2 }, { x: 20, y: 20 }); shape.id = 'valid';
+  const project = { schemaVersion: 1, name: '\"><script>alert(1)</script>', shapes: [shape] };
+  const loaded = G.normalizeProject(project);
+  const svg = G.exportSVG(loaded);
+  assert.doesNotMatch(svg, /<script/); assert.match(svg, /&lt;script&gt;/);
+  project.shapes[0].contours[0].nodes[0].x = NaN;
+  assert.throws(() => G.normalizeProject(project), /invalidProject/);
+});
diff --git a/MiniApp/Demo/icon-studio-v2/tests/persistence.test.mjs b/MiniApp/Demo/icon-studio-v2/tests/persistence.test.mjs
new file mode 100644
index 0000000000..efabf63516
--- /dev/null
+++ b/MiniApp/Demo/icon-studio-v2/tests/persistence.test.mjs
@@ -0,0 +1,73 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import test from 'node:test';
+import vm from 'node:vm';
+
+function editor(storage = {}) {
+  const elements = new Map(), events = new Map(), timers = new Map(), writes = [];
+  let sequence = 0;
+  const element = id => {
+    if (!elements.has(id)) elements.set(id, { dataset: {}, value: '', textContent: '', addEventListener() {} });
+    return elements.get(id);
+  };
+  const window = { app: {
+    locale: 'en-US', storage: { get: async () => null, set: async (key, value) => { writes.push({ key, value }); }, ...storage },
+  }, addEventListener: (name, fn) => events.set(name, fn) };
+  const context = vm.createContext({
+    window, navigator: { language: 'en-US' },
+    document: { getElementById: element, addEventListener() {} },
+    setTimeout: fn => { const id = ++sequence; timers.set(id, fn); return id; },
+    clearTimeout: id => timers.delete(id),
+  });
+  for (const name of ['geometry', 'i18n', 'state', 'io']) vm.runInContext(fs.readFileSync(new URL(`../source/ui/${name}.js`, import.meta.url), 'utf8'), context);
+  context.IconStudio.render = () => {};
+  return { S: context.IconStudio, G: context.IconGeometry, events, timers, writes };
+}
+
+test('an edit closed inside the debounce period flushes the latest host snapshot', async () => {
+  const { S, G, events, writes, timers } = editor();
+  S.change(() => S.add(G.primitive('rect', { x: 3, y: 3 }, { x: 20, y: 20 })));
+  S.change(() => { S.doc.name = 'last edit'; });
+  assert.equal(writes.length, 0); assert.equal(timers.size, 1);
+  events.get('pagehide')();
+  assert.equal(writes.length, 1); assert.equal(writes[0].value.name, 'last edit');
+  assert.equal(timers.size, 0);
+  await S.flushSave();
+});
+
+test('overlapping host saves stay ordered and retain the newest project', async () => {
+  const calls = [], release = [];
+  const { S } = editor({ set: async (key, value) => {
+    calls.push(value.name); await new Promise(resolve => release.push(resolve));
+  } });
+  S.change(() => { S.doc.name = 'first'; }); const complete = S.flushSave();
+  S.change(() => { S.doc.name = 'second'; }); S.flushSave();
+  S.change(() => { S.doc.name = 'latest'; }); S.flushSave();
+  assert.deepEqual(calls, ['first']);
+  release.shift()(); await new Promise(resolve => setImmediate(resolve));
+  assert.deepEqual(calls, ['first', 'latest']);
+  release.shift()(); await complete;
+});
+
+test('duplicating a valid large document cannot produce an unreadable saved document', () => {
+  const { S, G, writes, timers } = editor();
+  const nodes = Array.from({ length: 10001 }, (_, i) => ({ x: i % 24, y: Math.floor(i / 24) % 24 }));
+  S.doc = G.normalizeProject({ schemaVersion: 1, name: 'large', shapes: [{ id: 'large', contours: [{ closed: false, nodes }] }] });
+  S.selected = 'large';
+  const before = JSON.stringify(S.doc);
+  const accepted = S.change(() => S.add(G.copy(S.current())));
+  assert.equal(accepted, false);
+  assert.equal(JSON.stringify(S.doc), before);
+  assert.equal(S.statusKey, 'tooComplex');
+  assert.equal(S.undo.length, 0); assert.equal(timers.size, 0); assert.equal(writes.length, 0);
+  assert.doesNotThrow(() => G.normalizeProject(S.snapshot()));
+});
+
+test('unreadable stored projects remain untouched instead of being reset', async () => {
+  const future = { schemaVersion: 99, shapes: [{ preserved: 'user data' }] };
+  const { S, writes } = editor({ get: async () => future });
+  const before = JSON.stringify(S.doc);
+  await S.restore();
+  assert.equal(S.statusKey, 'storageInvalid'); assert.equal(JSON.stringify(S.doc), before);
+  assert.equal(future.shapes[0].preserved, 'user data'); assert.equal(writes.length, 0);
+});
diff --git a/scripts/frontend-color-surface-registry.json b/scripts/frontend-color-surface-registry.json
index a850c94745..687ff7e05b 100644
--- a/scripts/frontend-color-surface-registry.json
+++ b/scripts/frontend-color-surface-registry.json
@@ -405,6 +405,41 @@
         ]
       }
     },
+    {
+      "id": "miniapp-background-remover",
+      "label": "Background Remover MiniApp",
+      "kind": "miniapp",
+      "owner": "MiniApp public appearance contract",
+      "root": "MiniApp/Demo/background-remover",
+      "audit": {
+        "engine": "miniapp",
+        "generatedBundles": [
+          {
+            "output": "source/ui.js",
+            "inputs": ["source/ui/core.js", "source/ui/i18n.js", "source/ui/main.js"]
+          }
+        ]
+      }
+    },
+    {
+      "id": "miniapp-icon-studio-v2",
+      "label": "Icon Studio V2.0.2 MiniApp",
+      "kind": "miniapp",
+      "owner": "MiniApp public appearance contract",
+      "root": "MiniApp/Demo/icon-studio-v2",
+      "audit": {
+        "engine": "miniapp",
+        "generatedBundles": [
+          {
+            "output": "source/ui.js",
+            "inputs": [
+              "source/ui/geometry.js", "source/ui/trace.js", "source/ui/i18n.js", "source/ui/state.js",
+              "source/ui/render.js", "source/ui/interactions.js", "source/ui/io.js", "source/ui/boot.js"
+            ]
+          }
+        ]
+      }
+    },
     {
       "id": "miniapp-icon-design-system",
       "label": "Icon Design System MiniApp",
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx
index eec787102c..c60adaa803 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx
@@ -65,6 +65,7 @@ vi.mock('@/features/ssh-remote', () => ({
 }));
 
 import MainNav from './MainNav';
+import { useWorkspaceSessionViewStore } from './workspaceSessionView';
 
 describe('project creation entry points', () => {
   let root: Root;
@@ -129,6 +130,16 @@ describe('project creation entry points', () => {
     resetDeviceSurfaceForTest();
   });
 
+  it.each([true, false])('reveals project groups only after successful creation (success=%s)', async succeeded => {
+    useWorkspaceSessionViewStore.getState().setGrouping('all');
+    state.createProject.mockResolvedValueOnce(succeeded);
+    state.pickDirectory.mockResolvedValueOnce('/srv/project');
+    await act(async () => window.dispatchEvent(new Event('nav:new-project')));
+    await click('actions.add');
+    await click('newProject.create');
+    expect(useWorkspaceSessionViewStore.getState().grouping).toBe(succeeded ? 'grouped' : 'all');
+  });
+
   it.each(['sidebar', 'global'] as const)('%s opens the full source picker and adds a WSL folder', async entry => {
     if (entry === 'sidebar') {
       await act(async () => document.querySelector<HTMLButtonElement>('[data-testid="nav-workspace-add-btn"]')!.click());
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index 81d6295da9..44900edf09 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -43,6 +43,7 @@ import type { WorkspaceConnectionTarget } from '@/features/ssh-remote/types';
 import { openGlobalSearch } from '@/app/global-search/globalSearchStore';
 import { activateProductAction } from '@/app/global-search/productActionActivator';
 import { createProject, type ProjectDraft, type ProjectFolder } from '@/app/services/createProject';
+import { useWorkspaceSessionViewStore } from './workspaceSessionView';
 import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
 import { useNurseryStore } from '@/app/scenes/profile/nurseryStore';
 import { RetainedMountBoundary } from '@/shared/presence';
@@ -143,20 +144,27 @@ const MainNav: React.FC = () => {
     });
   }, [handleSelectRemoteHost]);
 
-  const handleConfirmProject = useCallback((draft: ProjectDraft) => createProject(draft, async folder => {
-    const remote = sshRemoteRef.current;
-    if (folder.remote?.connectionId !== remote.connectionId) {
-      throw new Error(t('newProject.remoteConnectionChanged'));
-    }
-    if (!(await remote.openWorkspace(folder.path))) {
-      // A cancelled rebind returns to this draft, not the provider's standalone picker.
-      remote.setShowFileBrowser(false);
-      return null;
-    }
-    const workspace = workspaceManager.getState().currentWorkspace;
-    if (!workspace) throw new Error(t('newProject.errorCreateFailed'));
-    return workspace;
-  }), [t]);
+  const handleConfirmProject = useCallback(async (draft: ProjectDraft) => {
+    const scope = getActiveSurfaceScope();
+    const succeeded = await createProject(draft, async folder => {
+      const remote = sshRemoteRef.current;
+      if (folder.remote?.connectionId !== remote.connectionId) {
+        throw new Error(t('newProject.remoteConnectionChanged'));
+      }
+      if (!(await remote.openWorkspace(folder.path))) {
+        // A cancelled rebind returns to this draft, not the provider's standalone picker.
+        remote.setShowFileBrowser(false);
+        return null;
+      }
+      const workspace = workspaceManager.getState().currentWorkspace;
+      if (!workspace) throw new Error(t('newProject.errorCreateFailed'));
+      return workspace;
+    });
+    scope.assertCurrent('reveal created project');
+    // The flat session view has no row for a new project without sessions.
+    if (succeeded) useWorkspaceSessionViewStore.getState().setGrouping('grouped');
+    return succeeded;
+  }, [t]);
 
   const closeWorkspaceDialog = useCallback(() => {
     setWorkspaceDialogOpen(false);
diff --git a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.test.tsx b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.test.tsx
index f77ee906d2..efc9b20f19 100644
--- a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.test.tsx
+++ b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.test.tsx
@@ -4,7 +4,8 @@ import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { NewProjectDialog } from './NewProjectDialog';
 import { activateSurface, resetDeviceSurfaceForTest, surfaceIdForDevice } from '@/infrastructure/peer-device/deviceSurface';
-import { ProjectDirectoryUnavailableError } from '@/app/utils/projectDraft';
+import { AssistantProjectFolderError, ProjectDirectoryUnavailableError } from '@/app/utils/projectDraft';
+import { globalAPI, type WorkspaceInfo } from '@/infrastructure/api/service-api/GlobalAPI';
 import type { WorkspaceSourceOption } from '@/features/ssh-remote/useWorkspaceSourceOptions';
 import { PeerDeviceContext, type PeerDeviceContextValue } from '@/infrastructure/peer-device/peerDeviceContextState';
 
@@ -57,6 +58,7 @@ describe('NewProjectDialog composition', () => {
 
   beforeEach(() => {
     vi.resetAllMocks();
+    vi.spyOn(globalAPI, 'getRecentWorkspaces').mockResolvedValue([]);
     sourceOptions.length = 0;
     for (const key of Object.keys(optionsBySource)) delete optionsBySource[key];
     for (const source of ['ssh', 'wsl', 'localDocker', 'remoteDocker']) {
@@ -210,6 +212,41 @@ describe('NewProjectDialog composition', () => {
     expect(pick).not.toHaveBeenCalled();
   });
 
+  const recentWorkspace = (id: string, extra: Partial<WorkspaceInfo> = {}): WorkspaceInfo => ({
+    id, name: id, rootPath: `/work/${id}`, workspaceKind: 'normal', workspaceType: 'singleProject',
+    languages: [], tags: [], openedAt: '2026-01-01', lastAccessed: '2026-01-01', ...extra,
+  });
+
+  it('shows five newest unique host workspaces as capsules and adds the chosen folder without browsing', async () => {
+    vi.mocked(globalAPI.getRecentWorkspaces).mockResolvedValue([
+      recentWorkspace('old'),
+      ...Array.from({ length: 6 }, (_, index) => recentWorkspace(`project-${index}`, { lastAccessed: `2026-02-0${index + 1}` })),
+      recentWorkspace('duplicate', { rootPath: '/work/project-5/', lastAccessed: '2026-01-01' }),
+      recentWorkspace('assistant', { workspaceKind: 'assistant' }),
+      recentWorkspace('remote', { workspaceKind: 'remote' }),
+      recentWorkspace('container', { connectionId: 'docker' }),
+      recentWorkspace('ssh', { sshHost: 'build.test' }),
+    ]);
+    await render({ onPickRemoteFolder: vi.fn() });
+    const row = document.querySelector('[data-openbitfun-part="sourceField"]')!;
+    expect([...row.querySelectorAll('[data-workspace-choice]')].map(item => item.getAttribute('data-workspace-choice')))
+      .toEqual(['project-5', 'project-4', 'project-3', 'project-2', 'project-1']);
+    expect(row.querySelector('.workspace-source-selector__device')).toBeNull();
+    await click('project-5');
+    expect(pickDirectory).not.toHaveBeenCalled();
+    await click('newProject.create');
+    expect(confirm).toHaveBeenCalledWith({ name: '', folders: [{ path: '/work/project-5' }] });
+  });
+
+  it('ignores recent workspaces returned after switching devices', async () => {
+    let resolve!: (workspaces: WorkspaceInfo[]) => void;
+    vi.mocked(globalAPI.getRecentWorkspaces).mockReturnValue(new Promise(done => { resolve = done; }));
+    await render({ onPickRemoteFolder: vi.fn() });
+    activateSurface(surfaceIdForDevice('peer'));
+    await act(async () => resolve([recentWorkspace('controller-private')]));
+    expect(document.querySelector('[data-workspace-choice="controller-private"]')).toBeNull();
+  });
+
   it('shows the device name below the current-computer header without repeating generic hints', async () => {
     await render({ onPickRemoteFolder: vi.fn() });
     const row = document.querySelectorAll('[data-openbitfun-part="sourceField"]')[0];
@@ -368,6 +405,20 @@ describe('NewProjectDialog composition', () => {
     expect(confirm).not.toHaveBeenCalled();
   });
 
+  it('explains an assistant source conflict and keeps the folder removable for retry', async () => {
+    confirm.mockRejectedValueOnce(new AssistantProjectFolderError());
+    await render();
+    await add('/srv/assistant');
+    await click('newProject.create');
+    expect(close).not.toHaveBeenCalled();
+    expect(document.querySelector('[role="alert"]')?.textContent).toContain('newProject.assistantFolderUnavailable');
+    act(() => document.querySelector<HTMLButtonElement>('button[aria-label="newProject.removeFolder"]')!.click());
+    enterName('example');
+    await click('newProject.create');
+    expect(confirm).toHaveBeenLastCalledWith({ name: 'example', folders: [] });
+    expect(close).toHaveBeenCalledOnce();
+  });
+
   it('explains an unavailable host directory and leaves the name editable', async () => {
     confirm.mockRejectedValue(new ProjectDirectoryUnavailableError());
     await render();
diff --git a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.tsx b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.tsx
index 8044c6284a..87dfa3bb2a 100644
--- a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.tsx
+++ b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.tsx
@@ -7,12 +7,13 @@ import { FolderPlus, Server } from 'lucide-react';
 import React, { useState, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { globalAPI, type WorkspaceInfo } from '@/infrastructure/api/service-api/GlobalAPI';
 import type { WorkspaceConnectionTarget } from '@/features/ssh-remote/types';
 import { WorkspaceSourceSelector } from '@/features/ssh-remote/WorkspaceSourceSelector';
 import { WorkspaceChoiceCapsules } from '@/features/ssh-remote/WorkspaceChoiceCapsules';
 import { useWorkspaceSourceOptions, workspacePresetHost, type WorkspaceConnectionPreset, type WorkspaceSourceOption } from '@/features/ssh-remote/useWorkspaceSourceOptions';
 import { workspaceSourceCoordinates, type WorkspaceSource } from '@/features/ssh-remote/workspaceSource';
-import { DEFAULT_PROJECT_SUBDIRECTORY, ProjectDirectoryUnavailableError, projectFolderKey, projectFolderName, type ProjectDraft, type ProjectFolder } from '@/app/utils/projectDraft';
+import { AssistantProjectFolderError, DEFAULT_PROJECT_SUBDIRECTORY, ProjectDirectoryUnavailableError, projectFolderKey, projectFolderName, type ProjectDraft, type ProjectFolder } from '@/app/utils/projectDraft';
 import { createLogger } from '@/shared/utils/logger';
 import { ProjectFolderItem, ProjectFolderList } from '@/app/components/ProjectFolderList/ProjectFolderList';
 import './NewProjectDialog.scss';
@@ -36,6 +37,8 @@ export const NewProjectDialog: React.FC<NewProjectDialogProps> = ({
 }) => {
   const { t } = useI18n('common');
   const [folders, setFolders] = useState<ProjectFolder[]>([]);
+  const [recentWorkspaces, setRecentWorkspaces] = useState<WorkspaceInfo[]>([]);
+  const [recentError, setRecentError] = useState('');
   const [projectName, setProjectName] = useState('');
   const [source, setSource] = useState<WorkspaceSource>('host');
   const [selectedOption, setSelectedOption] = useState<string>();
@@ -98,6 +101,33 @@ export const NewProjectDialog: React.FC<NewProjectDialogProps> = ({
     else assistantChoiceRef.current?.focus();
   }, [isOpen, step]);
 
+  useEffect(() => {
+    if (!isOpen || step !== 'project' || !onPickRemoteFolder) return;
+    const scope = getActiveSurfaceScope();
+    let cancelled = false;
+    setRecentWorkspaces([]);
+    setRecentError('');
+    void globalAPI.getRecentWorkspaces().then(workspaces => {
+      if (cancelled || !scope.isCurrent()) return;
+      const paths = new Set<string>();
+      setRecentWorkspaces(workspaces
+        .filter(workspace => workspace.workspaceKind.toLowerCase() === 'normal'
+          && !workspace.connectionId && (!workspace.sshHost || workspace.sshHost === 'localhost') && workspace.rootPath)
+        .sort((a, b) => (Date.parse(b.lastAccessed) || 0) - (Date.parse(a.lastAccessed) || 0))
+        .filter(workspace => {
+          const key = projectFolderKey({ path: workspace.rootPath });
+          if (paths.has(key)) return false;
+          paths.add(key);
+          return true;
+        }).slice(0, 5));
+    }).catch(cause => {
+      if (cancelled || !scope.isCurrent()) return;
+      log.error('Failed to load recent project workspaces', cause);
+      setRecentError(cause instanceof Error ? cause.message : String(cause));
+    });
+    return () => { cancelled = true; };
+  }, [isOpen, step, onPickRemoteFolder]);
+
   const changeStep = (next: typeof step) => {
     if (busy || submissionPending.current) return;
     setError('');
@@ -175,6 +205,7 @@ export const NewProjectDialog: React.FC<NewProjectDialogProps> = ({
       log.error('Failed to submit project setup', error);
       setError(error instanceof ProjectDirectoryUnavailableError
         ? t('newProject.defaultDirectoryUnavailable')
+        : error instanceof AssistantProjectFolderError ? t('newProject.assistantFolderUnavailable')
         : error instanceof Error ? error.message : t('newProject.errorCreateFailed'));
     } finally {
       submissionPending.current = false;
@@ -319,9 +350,23 @@ export const NewProjectDialog: React.FC<NewProjectDialogProps> = ({
               {onPickRemoteFolder && (
                 <div className="new-project-dialog__field" data-openbitfun-component="new-project-dialog" data-openbitfun-part="field">
                   <WorkspaceSourceSelector value={source} disabled={busy || hasFolders} showEnvironment={showEnvironment}
+                    showCurrentDevice={source !== 'host' || recentWorkspaces.length === 0}
                     locationOptions={location === 'other' ? optionChoices(hostOptions, 'ssh', selectedHostOption, value => {
                       setSelectedHostOption(value); setSelectedOption(undefined);
-                    }) : undefined}
+                    }) : source === 'host' ? <>
+                      {recentWorkspaces.length > 0 && <WorkspaceChoiceCapsules label={t('workspaceSource.availableOptions')}
+                        choices={recentWorkspaces.map(workspace => ({ id: workspace.id, label: workspace.name || projectFolderName(workspace.rootPath), description: workspace.rootPath }))}
+                        value={recentWorkspaces.find(workspace => folders.some(folder => projectFolderKey(folder) === projectFolderKey({ path: workspace.rootPath })))?.id}
+                        disabled={busy || hasFolders} onValueChange={id => {
+                          if (busy || hasFolders) return;
+                          try {
+                            formSurface.current.assertCurrent('select recent project workspace');
+                            const workspace = recentWorkspaces.find(item => item.id === id);
+                            if (workspace) { setFolders([{ path: workspace.rootPath }]); setError(''); }
+                          } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)); }
+                        }} />}
+                      {recentError && <span className="new-project-dialog__source-status" role="alert">{recentError}</span>}
+                    </> : undefined}
                     environmentOptions={source !== 'host' && source !== 'ssh' ? optionChoices(environmentOptions, source, selectedOption, setSelectedOption) : undefined}
                     locationActions={location === 'other' ? optionActions(hostOptions, 'ssh') : undefined}
                     environmentActions={source !== 'host' && source !== 'ssh' ? optionActions(environmentOptions, source) : undefined}
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts
index 01f34b8827..71290e0f1b 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts
@@ -300,6 +300,30 @@ describe('ecosystem compatibility scene presentation contract', () => {
     expect(scene).not.toContain('ecosystem-compatibility__import-action-placeholder');
   });
 
+  it('preserves design-system alert insets and consistent dialog spacing', () => {
+    const styles = source('./EcosystemCompatibilityScene.scss');
+    const block = (name: string) => styles.slice(styles.indexOf(`&__${name} {`)).split('\n  }')[0];
+
+    expect(block('notice')).not.toMatch(/(?:padding|border|background|font):/);
+    expect(block('batch-status')).toContain('var(--openbitfun-overlay-dialog-content-padding-lg)');
+    expect(block('content-expanded')).toContain('padding: 0 var(--openbitfun-space-4) var(--openbitfun-space-4)');
+    expect(block('import-action')).toContain('flex-wrap: wrap');
+    expect(block('metadata')).toContain('align-items: baseline');
+    expect(block('metadata')).toContain('margin: 0');
+    expect(block('content-detail')).not.toContain('margin-block-end:');
+  });
+
+  it('uses heading and action slots for every import dialog header', () => {
+    for (const file of ['ExternalAgentContent.tsx', 'EcosystemPets.tsx', 'EcosystemCompatibilityScene.tsx']) {
+      const headers = [...source(`./${file}`).matchAll(/<DialogHeader>([\s\S]*?)<\/DialogHeader>/g)];
+      expect(headers.length).toBeGreaterThan(0);
+      for (const [, header] of headers) {
+        expect(header).toContain('<DialogHeading>');
+        expect(header).toContain('<DialogHeaderActions>');
+      }
+    }
+  });
+
   it('lets the page inherit the surrounding scene surface', () => {
     const styles = source('./EcosystemCompatibilityScene.scss');
 
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
index 451457c916..1c4dac5dad 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
@@ -478,7 +478,7 @@
 
   &__import-action {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     gap: var(--openbitfun-space-2);
     align-items: center;
     justify-content: flex-end;
@@ -835,6 +835,10 @@
     object-fit: contain;
   }
 
+  &__content-expanded {
+    padding: 0 var(--openbitfun-space-4) var(--openbitfun-space-4);
+  }
+
   &__account-panel {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -925,10 +929,6 @@
       overflow-wrap: anywhere;
     }
 
-    dd {
-      margin-inline-start: 0;
-      margin-block-end: var(--openbitfun-space-3);
-    }
   }
 }
 
@@ -951,7 +951,7 @@
 
   &__batch-status {
     flex: 0 0 auto;
-    padding: 0 var(--openbitfun-space-6) var(--openbitfun-space-4);
+    padding: 0 var(--openbitfun-overlay-dialog-content-padding-lg) var(--openbitfun-space-4);
     font-size: var(--openbitfun-type-body-sm-font-size);
     line-height: var(--openbitfun-type-body-sm-line-height);
     overflow-wrap: anywhere;
@@ -1042,29 +1042,22 @@
 
   &__metadata {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
+    align-items: baseline;
     gap: var(--openbitfun-space-2) var(--openbitfun-space-4);
+
+    > dt,
+    > dd {
+      min-inline-size: 0;
+      margin: 0;
+    }
   }
 
-  // Preserve the existing paragraph layout while Alert owns announcements.
+  // Alert owns its surface, inset, typography and message layout.
   &__notice {
-    display: block;
-    margin: 1em 0;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    color: inherit;
-    background: transparent;
-    font: inherit;
-    letter-spacing: inherit;
-
-    > [data-openbitfun-part='content'] {
-      display: block;
-
-      > [data-openbitfun-part='message'] {
-        color: inherit;
-      }
-    }
+    flex-shrink: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
 
     &.ecosystem-compatibility__discovery-error {
       margin: 0;
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemPets.tsx b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemPets.tsx
index 3ec858e9d1..619d756d9d 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemPets.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemPets.tsx
@@ -140,8 +140,11 @@ export default function EcosystemPets({ supported, refreshVersion, open, onOpenC
         </ScrollArea>
       </DialogBody>
     </Dialog>
-    <Dialog open={supported && !!review} onOpenChange={(open) => { if (!open && !busy) setReview(null); }}>
-      <DialogHeader><DialogTitle>{t('content.pets.reviewTitle')}</DialogTitle></DialogHeader>
+    <Dialog open={supported && !!review} onOpenChange={(open) => { if (!open && !busy) setReview(null); }} closeOnEscape={!busy} closeOnPointerOutside={!busy}>
+      <DialogHeader>
+        <DialogHeading><DialogTitle>{t('content.pets.reviewTitle')}</DialogTitle></DialogHeading>
+        <DialogHeaderActions>{!busy ? <DialogClose /> : null}</DialogHeaderActions>
+      </DialogHeader>
       <DialogBody>{review && supported ? <div className="ecosystem-compatibility__content-detail">
         <img className="ecosystem-compatibility__pet-preview" src={review.previewDataUrl} alt={review.pet.displayName} />
         <strong>{review.pet.displayName}</strong><p>{t(review.builtinId ? 'content.pets.builtinSource' : 'content.pets.customSource')}</p><p>{review.pet.packagePath}</p><p>{t('content.pets.reviewDescription')}</p>
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx b/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx
index 4e92a1b5b3..a65fe08c30 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx
@@ -722,7 +722,7 @@ export default function ExternalAgentContent({ scopeKey, actionsRef, onActionSta
         </> : null}
       </Dialog>
       <Dialog className="ecosystem-compatibility__batch-dialog" open={batchUndo !== null} onOpenChange={(open) => { if (!open && !busy) { setBatchUndo(null); setNotice(null); } }} size="lg" closeOnPointerOutside={!busy}>
-        <DialogHeader><DialogHeading><DialogTitle>{t(batchUndoResults ? busy ? 'content.batchUndoing' : 'content.batchUndoResults' : 'content.batchUndoTitle')}</DialogTitle></DialogHeading>{!busy ? <DialogClose /> : null}</DialogHeader>
+        <DialogHeader><DialogHeading><DialogTitle>{t(batchUndoResults ? busy ? 'content.batchUndoing' : 'content.batchUndoResults' : 'content.batchUndoTitle')}</DialogTitle></DialogHeading><DialogHeaderActions>{!busy ? <DialogClose /> : null}</DialogHeaderActions></DialogHeader>
         <EcosystemBatchLayout entries={batchUndo ?? []} getKind={(entry) => entry.review.kind} busy={busy} processed={batchUndoResults?.length}
           summary={batchUndoResults ? t('content.batchUndoSummary', {
             removed: formatNumber(batchUndoResults.filter((result) => result.status === 'removed').length),
@@ -744,7 +744,7 @@ export default function ExternalAgentContent({ scopeKey, actionsRef, onActionSta
         </DialogFooter>
       </Dialog>
       <Dialog className="ecosystem-compatibility__batch-dialog" open={batch !== null} onOpenChange={(open) => { if (!open && !busy) { setBatch(null); setNotice(null); } }} size="lg" closeOnPointerOutside={!busy}>
-        <DialogHeader><DialogHeading><DialogTitle>{t(batchResults ? busy ? 'content.batchImporting' : 'content.batchResults' : 'content.batchTitle')}</DialogTitle></DialogHeading>{!busy ? <DialogClose /> : null}</DialogHeader>
+        <DialogHeader><DialogHeading><DialogTitle>{t(batchResults ? busy ? 'content.batchImporting' : 'content.batchResults' : 'content.batchTitle')}</DialogTitle></DialogHeading><DialogHeaderActions>{!busy ? <DialogClose /> : null}</DialogHeaderActions></DialogHeader>
         <EcosystemBatchLayout entries={batch ?? []} getKind={(entry) => entry.kind} busy={busy} processed={batchResults?.length}
           summary={batchResults ? t('content.batchResultSummary', {
             imported: formatNumber(batchResults.filter((result) => result.status === 'imported').length),
@@ -772,7 +772,7 @@ export default function ExternalAgentContent({ scopeKey, actionsRef, onActionSta
         </DialogFooter>
       </Dialog>
       <Dialog open={undo !== null} onOpenChange={(open) => { if (!open && !busy) { setUndo(null); setNotice(null); } }} size="md" closeOnPointerOutside={!busy}>
-        <DialogHeader><DialogHeading><DialogTitle>{t('content.undoTitle')}</DialogTitle></DialogHeading>{!busy ? <DialogClose /> : null}</DialogHeader>
+        <DialogHeader><DialogHeading><DialogTitle>{t('content.undoTitle')}</DialogTitle></DialogHeading><DialogHeaderActions>{!busy ? <DialogClose /> : null}</DialogHeaderActions></DialogHeader>
         <DialogBody>
           {undo ? <div className="ecosystem-compatibility__content-detail">
             <strong className="ecosystem-compatibility__detail-name">{undo.item.name}</strong><p className="ecosystem-compatibility__feedback">{t('content.undoWarning')}</p>
@@ -786,7 +786,7 @@ export default function ExternalAgentContent({ scopeKey, actionsRef, onActionSta
         </DialogFooter>
       </Dialog>
       <Dialog open={viewed !== null} onOpenChange={(open) => { if (!open && !busy) { reviewSequence.current += 1; setReview(null); setDetail(null); setNotice(null); } }} size="lg" closeOnPointerOutside={!busy}>
-        <DialogHeader><DialogHeading><DialogTitle>{review ? t('content.confirmTitle') : viewed?.name}</DialogTitle></DialogHeading>{!busy ? <DialogClose /> : null}</DialogHeader>
+        <DialogHeader><DialogHeading><DialogTitle>{review ? t('content.confirmTitle') : viewed?.name}</DialogTitle></DialogHeading><DialogHeaderActions>{!busy ? <DialogClose /> : null}</DialogHeaderActions></DialogHeader>
         <DialogBody>
           {viewed ? <div className="ecosystem-compatibility__content-detail">
             <div className="ecosystem-compatibility__detail-heading"><strong className="ecosystem-compatibility__detail-name">{viewed.name}</strong><StatusPill tone="neutral">{runtime.spec.name} · {t(`capabilities.${viewed.kind}`)}</StatusPill></div>
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx
index b569cac7a4..2d0c711a9d 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx
@@ -83,6 +83,79 @@ describe('ModelSettingsPage loading and provider actions', () => {
     vi.restoreAllMocks();
   });
 
+  it.each([false, true])('shows host accounts on the page without importing a model (account slots: %s)', async slotsSupported => {
+    const account = {
+      provider: 'codex' as const, connected: true, account: 'shared@example.invalid',
+      display_label: 'Codex', suggested_format: 'openai',
+      suggested_base_url: 'https://example.test/v1', suggested_model: 'fixture-model', api_offerings: [],
+    };
+    vi.mocked(aiApi.listSubscriptionAccounts).mockResolvedValue([account]);
+    vi.spyOn(aiApi, 'listSubscriptionAccountInstances').mockResolvedValue(slotsSupported ? [
+      { account_id: 'codex', is_default: true, account, enabled: true },
+      { account_id: 'codex:second-slot', is_default: false, account, enabled: false },
+    ] : []);
+    const update = vi.spyOn(configManager, 'updateConfig');
+    await act(async () => root.render(<ModelSettingsPage />));
+    const summary = container.querySelector('[data-testid="settings-subscription-services"]')!;
+    expect(summary.textContent).toContain('shared@example.invalid');
+    expect(summary.closest('.openbitfun-config-page-row')?.textContent).toContain(copy('acquisition.subscriptions'));
+    expect(summary.querySelector('ul')?.getAttribute('aria-label')).toBe(copy('acquisition.subscriptions'));
+    expect(summary.querySelectorAll('[data-account-id]')).toHaveLength(slotsSupported ? 2 : 1);
+    if (slotsSupported) expect(summary.textContent).toContain(copy('subscriptionAuth.pool.disabled'));
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+    expect(update).not.toHaveBeenCalled();
+    await act(async () => summary.querySelector<HTMLButtonElement>('button')!.click());
+    expect(document.querySelector('[role="dialog"]')?.textContent).toContain('shared@example.invalid');
+    expect(update).not.toHaveBeenCalled();
+  });
+
+  it.each(['subscription', 'subscription_pool'] as const)('merges host accounts with configured services without duplicating a %s account', async type => {
+    const account = { provider: 'codex' as const, connected: true, account: 'shared@example.invalid',
+      display_label: 'Codex', suggested_format: 'openai', suggested_base_url: 'https://example.test/v1', suggested_model: 'fixture-model', api_offerings: [] };
+    vi.mocked(aiApi.listSubscriptionAccounts).mockResolvedValue([account]);
+    vi.spyOn(aiApi, 'listSubscriptionAccountInstances').mockResolvedValue([
+      { account_id: 'codex', is_default: true, account, enabled: true },
+      { account_id: 'codex:second-slot', is_default: false, account, enabled: true },
+    ]);
+    const configured: AIModelConfig = { ...model, auth: type === 'subscription'
+      ? { type, provider: 'codex' }
+      : { type, provider: 'codex', accounts: ['codex'], revision: 0 } };
+    const values: Record<string, unknown> = {
+      'ai.models': [configured], 'ai.default_models': { primary: model.id },
+      'ai.proxy': { enabled: false, url: '', username: '', password: '' },
+      'ai.stream_idle_timeout_secs': 120, 'ai.stream_ttft_timeout_secs': 60,
+    };
+    vi.spyOn(configManager, 'hasCachedConfig').mockImplementation(path => path in values);
+    vi.spyOn(configManager, 'getCachedConfig').mockImplementation(<T,>(path: string) => values[path] as T);
+    await act(async () => root.render(<ModelSettingsPage />));
+    const summary = container.querySelector('[data-testid="settings-subscription-services"]')!;
+    expect(summary.querySelectorAll('li')).toHaveLength(2);
+    expect(summary.querySelector('[data-account-id="codex"]')).toBeNull();
+    expect(summary.querySelector('[data-account-id="codex:second-slot"]')).not.toBeNull();
+    expect(summary.querySelector(`button[aria-label="${copy('actions.deleteProvider')}: ${model.name}"]`)).not.toBeNull();
+  });
+
+  it('refreshes host accounts on focus and ignores older reads without discarding accounts on failure', async () => {
+    const account = { provider: 'codex' as const, connected: true, account: 'first@example.invalid',
+      display_label: 'Codex', suggested_format: 'openai', suggested_base_url: 'https://example.test/v1', suggested_model: 'fixture-model', api_offerings: [] };
+    const list = vi.mocked(aiApi.listSubscriptionAccounts).mockResolvedValue([account]);
+    vi.spyOn(aiApi, 'listSubscriptionAccountInstances').mockResolvedValue([]);
+    await act(async () => root.render(<ModelSettingsPage />));
+    const summary = () => container.querySelector('[data-testid="settings-subscription-services"]')!;
+    expect(summary().textContent).toContain(account.account);
+    const old = deferred();
+    list.mockImplementationOnce(() => old.promise as never).mockResolvedValueOnce([{ ...account, account: 'new@example.invalid' }]);
+    await act(async () => { window.dispatchEvent(new Event('focus')); });
+    await act(async () => { window.dispatchEvent(new Event('focus')); });
+    expect(summary().textContent).toContain('new@example.invalid');
+    await act(async () => old.resolve([account]));
+    expect(summary().textContent).not.toContain(account.account);
+    list.mockRejectedValueOnce(new Error('Host account read unavailable'));
+    await act(async () => { window.dispatchEvent(new Event('focus')); });
+    expect(summary().textContent).toContain('new@example.invalid');
+    expect(summary().textContent).toContain(copy('acquisition.loadFailed'));
+  });
+
   it('renders a warm model pool immediately without starting a read that could overwrite edits', () => {
     const values: Record<string, unknown> = {
       'ai.models': [model], 'ai.default_models': { primary: model.id },
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.presentation.test.ts
index 8f1b1e4cae..5159d3f4c4 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.presentation.test.ts
@@ -27,6 +27,38 @@ describe('ModelSettingsPage presentation', () => {
     expect(source.match(/required=\{apiKeyRequired\}/g)).toHaveLength(2);
   });
 
+  it('does not add a second background around the editor account selection and quota', () => {
+    const start = source.indexOf('data-testid="settings-model-account-pool"');
+    const accountPool = source.slice(start, source.indexOf('</FieldGroup>', start));
+
+    expect(start).toBeGreaterThan(-1);
+    expect(accountPool).toContain('<FieldGroup appearance="plain">');
+    expect(accountPool).toContain('settings-model-account-pool-item');
+    expect(accountPool).toContain('<SubscriptionQuotaPanel');
+    expect(accountPool).toContain('<Checkbox');
+    expect(accountPool).not.toContain('<input');
+    expect(accountPool).toContain('account-pool-entry');
+    expect(accountPool).toContain('accountLabel={accountLabel} headerLeading={accountSelection} headerActions={orderActions}');
+    expect(accountPool).toContain("state !== 'connected'");
+    expect(styles).not.toMatch(/&__account-pool-entry\s*{\s*display: grid;/);
+    expect(styles).toMatch(/&__account-pool-choice\s*{\s*flex: none;\s*align-self: center;/);
+    const poolRow = source.slice(start, source.indexOf('const renderSubscriptionAccountRow', start));
+    expect(poolRow).not.toContain('variant="text"');
+    expect(poolRow).not.toContain('subscriptionAuth.pool.singleHint');
+    expect(poolRow).toContain('{selectedAccounts.length > 1 && (');
+  });
+
+  it('keeps inline quota values on the label baseline without nested card surfaces', () => {
+    const quotaStyles = readFileSync(fileURLToPath(new URL('./SubscriptionQuotaPanel.module.scss', import.meta.url)), 'utf8');
+    const compact = quotaStyles.slice(quotaStyles.indexOf('.compact {'), quotaStyles.indexOf('@container'));
+    expect(compact).toContain('align-items: baseline');
+    expect(compact).toContain('background: transparent');
+    expect(compact).toContain('border: 0');
+    expect(compact).toContain('grid-column: 1 / -1');
+    expect(compact).toContain('var(--openbitfun-type-label-md-font-size)');
+    expect(styles).toMatch(/&__account-pool-item\s*{[\s\S]*?flex-wrap: wrap;[\s\S]*?align-items: center;/);
+  });
+
   it('preserves the intrinsic width of design-system switches in edit rows', () => {
     expect(styles.match(/> :not\(\[data-openbitfun-component='switch'\]\)/g)).toHaveLength(2);
     expect(styles).not.toMatch(/> \* \{\s*min-width: 0;\s*width: 100%/);
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.scss b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.scss
index 0a42d61dec..7931bb3abb 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.scss
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.scss
@@ -50,6 +50,17 @@
     list-style: none;
   }
 
+  &__subscription-summary {
+    display: grid;
+    gap: var(--openbitfun-space-3);
+    min-inline-size: 0;
+    inline-size: 100%;
+
+    > .openbitfun-model-settings__import-summary {
+      flex-wrap: wrap;
+    }
+  }
+
   &__import-item {
     display: inline-flex;
     min-width: 0;
@@ -1399,23 +1410,56 @@
     width: 100%;
   }
 
+  &__account-pool-entry {
+    min-inline-size: 0;
+    padding-block: var(--openbitfun-space-2);
+
+    & + & {
+      border-block-start: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+      margin-block-start: var(--openbitfun-space-2);
+      padding-block-start: var(--openbitfun-space-4);
+    }
+  }
+
+  &__account-pool > &__subscription-account-actions {
+    flex-wrap: wrap;
+    gap: var(--openbitfun-space-3);
+  }
+
   &__account-pool-item {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--openbitfun-space-2);
-    min-width: 0;
-    min-height: 32px;
+    min-inline-size: 0;
+    min-block-size: var(--openbitfun-control-height-sm);
+
+    > [data-openbitfun-component='status-pill'] {
+      flex: none;
+      max-inline-size: 100%;
+    }
   }
 
   &__account-pool-choice {
+    flex: none;
+    align-self: center;
+  }
+
+  &__account-pool-content {
+    min-inline-size: 0;
+  }
+
+  &__account-pool-label {
     display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: var(--openbitfun-space-2);
-    min-width: 0;
+    min-inline-size: 0;
     cursor: pointer;
   }
 
+  &__account-pool-item > &__account-pool-label {
+    flex: 1 1 12rem;
+    min-inline-size: 0;
+  }
+
   &__channel-route-index {
     flex: none;
     color: var(--openbitfun-color-content-secondary);
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
index 414596c434..3fc51b6f51 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
@@ -113,6 +113,7 @@ import {
   Card,
   CardFooter,
   CardHeader,
+  Checkbox,
   Combobox,
   ConfirmDialog,
   Dialog,
@@ -429,6 +430,7 @@ function getPoolProviderKey(model: AIModelConfigType): string {
 }
 
 const ModelSettingsPage: React.FC = () => {
+  const accountSelectionId = React.useId();
   const { t, i18n } = useI18n('settings/models');
   const { t: tDefault } = useI18n('settings/default-model');
   const { t: tComponents } = useI18n('components');
@@ -609,6 +611,10 @@ const ModelSettingsPage: React.FC = () => {
     () => accountDataCurrent ? storedAccountInstances : [],
     [accountDataCurrent, storedAccountInstances],
   );
+  const availableSubscriptionAccounts = useMemo(
+    () => managedSubscriptionAccounts(subscriptionAccounts, accountInstances),
+    [subscriptionAccounts, accountInstances],
+  );
   const [quotaRefreshVersions, setQuotaRefreshVersions] = useState<Partial<Record<SubscriptionProvider, number>>>({});
   const canQuerySubscriptionQuota = canQuerySubscriptionQuotaOnSurface(
     Boolean(peerDevice?.peerMode.active), peerDevice?.currentPeerCapabilities ?? null,
@@ -841,20 +847,23 @@ const ModelSettingsPage: React.FC = () => {
     return unsubscribeCatalog;
   }, [loadConfig, loadProxyConfig, loadStreamTimeouts, loadModelCatalog, loadModelsDevStatus, modelDiscoverySurface, modelSeed, proxySeed, timeoutSeed]);
 
+  const subscriptionAccountsReadRef = React.useRef(0);
   const refreshSubscriptionAccounts = useCallback(async (forceQuota = false) => {
+    const requestId = ++subscriptionAccountsReadRef.current;
     const scope = getActiveSurfaceScope();
+    const isCurrent = () => scope.isCurrent() && requestId === subscriptionAccountsReadRef.current;
     setIsLoadingSubscriptions(true);
     setSubscriptionLoadError(false);
     try {
       const items = await aiApi.listSubscriptionAccounts();
-      if (!scope.isCurrent()) return;
+      if (!isCurrent()) return;
       // Older hosts lack account slots; the editor then keeps the single
       // default-account row instead of offering a pool it cannot save.
       const instances = await aiApi.listSubscriptionAccountInstances().catch((error) => {
         log.warn('list_subscription_account_instances failed', { error: String(error) });
         return [] as SubscriptionAccountInstance[];
       });
-      if (!scope.isCurrent()) return;
+      if (!isCurrent()) return;
       setSubscriptionAccounts(items);
       setAccountInstances(instances);
       setAccountDataKey(scope.key('subscription-accounts'));
@@ -869,16 +878,22 @@ const ModelSettingsPage: React.FC = () => {
         }));
       }
     } catch (e) {
-      if (!scope.isCurrent()) return;
+      if (!isCurrent()) return;
       setSubscriptionLoadError(true);
       log.warn('list_subscription_accounts failed', { error: String(e) });
     } finally {
-      if (scope.isCurrent()) setIsLoadingSubscriptions(false);
+      if (isCurrent()) setIsLoadingSubscriptions(false);
     }
   }, []);
 
   useEffect(() => {
-    refreshSubscriptionAccounts();
+    const refresh = () => { void refreshSubscriptionAccounts(); };
+    refresh();
+    window.addEventListener('focus', refresh);
+    return () => {
+      window.removeEventListener('focus', refresh);
+      subscriptionAccountsReadRef.current += 1;
+    };
   }, [refreshSubscriptionAccounts, accountSurface]);
 
   useEffect(() => {
@@ -2586,6 +2601,9 @@ const ModelSettingsPage: React.FC = () => {
 
   const apiProviderGroups = providerGroups.filter(group => !subscriptionProviderOf(group.models[0].auth));
   const subscriptionProviderGroups = providerGroups.filter(group => !!subscriptionProviderOf(group.models[0].auth));
+  const unconfiguredSubscriptionAccounts = availableSubscriptionAccounts.filter(({ account, accountId }) => (
+    !modelsUsingSubscriptionAccount(aiModels, account.provider, accountId).length
+  ));
 
   const toggleProviderGroup = (groupKey: string) => {
     setExpandedProviderGroupKeys(previous => {
@@ -3396,7 +3414,7 @@ const ModelSettingsPage: React.FC = () => {
         <div className="openbitfun-model-settings__connection-row openbitfun-model-settings__connection-row--single openbitfun-model-settings__subscription-account-row">
           <ConfigPageRow label={t('subscriptionAuth.pool.label')} align="start" wide>
             <div className="openbitfun-model-settings__account-pool" data-testid="settings-model-account-pool">
-              <FieldGroup>
+              <FieldGroup appearance="plain">
                 {ordered.map(entry => {
                   const selectedIndex = selectedAccounts.indexOf(entry.account_id);
                   const checked = selectedIndex >= 0;
@@ -3409,55 +3427,64 @@ const ModelSettingsPage: React.FC = () => {
                     : state === 'missing'
                       ? t('subscriptionAuth.pool.missing')
                       : subscriptionStatusLabels[state];
+                  const accountName = instance ? instanceLabel(instance) : entry.account_id;
+                  const checkboxId = `${accountSelectionId}-${entry.account_id}`;
+                  const accountLabel = <label htmlFor={checkboxId} className="openbitfun-model-settings__account-pool-label">
+                    <OverflowText className="openbitfun-model-settings__subscription-account-name">{accountName}</OverflowText>
+                  </label>;
+                  const orderActions = checked && selectedAccounts.length > 1 ? (
+                    <ToolbarGroup>
+                      <IconButton
+                        size="xs"
+                        variant="quiet"
+                        aria-label={t('subscriptionAuth.pool.moveUp')}
+                        icon={<Icon name="arrow-up" size="sm" />}
+                        disabled={selectedIndex === 0}
+                        onClick={() => setSelectedAccounts(moveItem(selectedAccounts, selectedIndex, -1))}
+                      />
+                      <IconButton
+                        size="xs"
+                        variant="quiet"
+                        aria-label={t('subscriptionAuth.pool.moveDown')}
+                        icon={<Icon name="arrow-down" size="sm" />}
+                        disabled={selectedIndex === selectedAccounts.length - 1}
+                        onClick={() => setSelectedAccounts(moveItem(selectedAccounts, selectedIndex, 1))}
+                      />
+                    </ToolbarGroup>
+                  ) : null;
+                  const accountSelection = (
+                    <Checkbox
+                      className="openbitfun-model-settings__account-pool-choice"
+                      id={checkboxId}
+                      size="sm"
+                      aria-label={accountName}
+                      checked={checked}
+                      disabled={isEditorSaving || (checked && selectedAccounts.length === 1)}
+                      onChange={(event) => setSelectedAccounts(event.target.checked
+                        ? [...selectedAccounts, entry.account_id]
+                        : selectedAccounts.filter(id => id !== entry.account_id))}
+                    />
+                  );
                   return (
-                    <React.Fragment key={entry.account_id}>
-                    <div
-                      className="openbitfun-model-settings__account-pool-item"
-                      data-testid="settings-model-account-pool-item"
-                    >
-                      <label className="openbitfun-model-settings__account-pool-choice">
-                        <input
-                          type="checkbox"
-                          checked={checked}
-                          disabled={isEditorSaving || (checked && selectedAccounts.length === 1)}
-                          onChange={(event) => setSelectedAccounts(event.target.checked
-                            ? [...selectedAccounts, entry.account_id]
-                            : selectedAccounts.filter(id => id !== entry.account_id))}
-                        />
-                        <OverflowText className="openbitfun-model-settings__subscription-account-name">
-                          {instance ? instanceLabel(instance) : entry.account_id}
-                        </OverflowText>
-                      </label>
-                      <StatusPill tone={state === 'connected' ? 'success' : 'warning'}>{stateLabel}</StatusPill>
-                      {checked && selectedAccounts.length > 1 && (
-                        <ToolbarGroup>
-                          <IconButton
-                            size="xs"
-                            variant="quiet"
-                            aria-label={t('subscriptionAuth.pool.moveUp')}
-                            icon={<Icon name="arrow-up" size="sm" />}
-                            disabled={selectedIndex === 0}
-                            onClick={() => setSelectedAccounts(moveItem(selectedAccounts, selectedIndex, -1))}
-                          />
-                          <IconButton
-                            size="xs"
-                            variant="quiet"
-                            aria-label={t('subscriptionAuth.pool.moveDown')}
-                            icon={<Icon name="arrow-down" size="sm" />}
-                            disabled={selectedIndex === selectedAccounts.length - 1}
-                            onClick={() => setSelectedAccounts(moveItem(selectedAccounts, selectedIndex, 1))}
-                          />
-                        </ToolbarGroup>
-                      )}
+                    <div key={entry.account_id} className="openbitfun-model-settings__account-pool-entry" data-testid="settings-model-account-pool-item">
+                      <div className="openbitfun-model-settings__account-pool-content">
+                        {checked && instance?.enabled && instance.account.connected ? (
+                          <SubscriptionQuotaPanel provider={instance.account.provider} accountId={instance.account_id}
+                            identity={`${instance.upstream_account_id || ''}:${instance.account.expires_at || ''}`}
+                            active={isEditing && checked && !managingSubscriptionProvider}
+                            supported={canQuerySubscriptionQuota && (instance.account.provider !== 'grok' || canQueryGrokQuotaOnSurface(Boolean(peerDevice?.peerMode.active), peerDevice?.currentPeerCapabilities ?? null))}
+                            refreshVersion={quotaRefreshVersions[instance.account.provider]} compact
+                            accountLabel={accountLabel} headerLeading={accountSelection} headerActions={orderActions} />
+                        ) : (
+                          <div className="openbitfun-model-settings__account-pool-item">
+                            {accountSelection}
+                            {accountLabel}
+                            {state !== 'connected' && <StatusPill tone="warning">{stateLabel}</StatusPill>}
+                            {orderActions}
+                          </div>
+                        )}
+                      </div>
                     </div>
-                    {checked && instance?.enabled && instance.account.connected && (
-                      <SubscriptionQuotaPanel provider={instance.account.provider} accountId={instance.account_id}
-                        identity={`${instance.upstream_account_id || ''}:${instance.account.expires_at || ''}`}
-                        active={isEditing && checked && !managingSubscriptionProvider}
-                        supported={canQuerySubscriptionQuota && (instance.account.provider !== 'grok' || canQueryGrokQuotaOnSurface(Boolean(peerDevice?.peerMode.active), peerDevice?.currentPeerCapabilities ?? null))}
-                        refreshVersion={quotaRefreshVersions[instance.account.provider]} compact />
-                    )}
-                    </React.Fragment>
                   );
                 })}
               </FieldGroup>
@@ -3465,6 +3492,7 @@ const ModelSettingsPage: React.FC = () => {
                 <Button
                   size="sm"
                   variant="outline"
+                  leadingIcon={<Icon name="plus" size="sm" />}
                   disabled={!!loggingInProvider}
                   data-testid="settings-model-account-pool-add"
                   onClick={() => {
@@ -3488,9 +3516,11 @@ const ModelSettingsPage: React.FC = () => {
               </div>
             </div>
           </ConfigPageRow>
-          <div className="openbitfun-model-settings__subscription-account-hint" aria-live="polite">
-            {t(selectedAccounts.length > 1 ? 'subscriptionAuth.pool.rotationHint' : 'subscriptionAuth.pool.singleHint')}
-          </div>
+          {selectedAccounts.length > 1 && (
+            <div className="openbitfun-model-settings__subscription-account-hint" aria-live="polite">
+              {t('subscriptionAuth.pool.rotationHint')}
+            </div>
+          )}
         </div>
       );
     };
@@ -4643,34 +4673,54 @@ const ModelSettingsPage: React.FC = () => {
               </div>
             )}
           >
-            {!modelConfigReady ? pendingConfigSummary : subscriptionProviderGroups.length > 0 ? (
-              <ul className="openbitfun-model-settings__import-summary" aria-label={t('acquisition.subscriptions')}>
-                {subscriptionProviderGroups.map(group => (
-                  <li key={group.key} className="openbitfun-model-settings__import-item">
-                    <Capsule size="sm" action={(
-                      <Tooltip content={t('actions.deleteProvider')} trigger="hover-focus">
-                        <IconButton
-                          className="openbitfun-model-settings__source-pill-delete"
-                          aria-label={`${t('actions.deleteProvider')}: ${group.providerName}`}
-                          size="xs"
-                          shape="circle"
-                          variant="quiet"
-                          tone="danger"
-                          onClick={() => void requestProviderDelete(group)}
-                          icon={<Icon name="delete" size="xs" />}
-                        />
-                      </Tooltip>
-                    )}>
-                      <Button size="sm" variant="outline" className="openbitfun-model-settings__source-pill"
-                        aria-label={t('acquisition.configureProvider', { provider: group.providerName })}
-                        onClick={() => handleEditProvider(group.models[0])}>
-                        {group.providerName}
+            <div className="openbitfun-model-settings__subscription-summary" data-testid="settings-subscription-services">
+              {subscriptionLoadError && (
+                <ConfigRetryState message={t('acquisition.loadFailed')} retryLabel={t('messages.retry')}
+                  loading={isLoadingSubscriptions} onRetry={() => void refreshSubscriptionAccounts()} />
+              )}
+              {subscriptionProviderGroups.length > 0 || unconfiguredSubscriptionAccounts.length > 0 ? (
+                <ul className="openbitfun-model-settings__import-summary" aria-label={t('acquisition.subscriptions')}>
+                  {subscriptionProviderGroups.map(group => (
+                    <li key={group.key} className="openbitfun-model-settings__import-item">
+                      <Capsule size="sm" action={(
+                        <Tooltip content={t('actions.deleteProvider')} trigger="hover-focus">
+                          <IconButton
+                            className="openbitfun-model-settings__source-pill-delete"
+                            aria-label={`${t('actions.deleteProvider')}: ${group.providerName}`}
+                            size="xs"
+                            shape="circle"
+                            variant="quiet"
+                            tone="danger"
+                            onClick={() => void requestProviderDelete(group)}
+                            icon={<Icon name="delete" size="xs" />}
+                          />
+                        </Tooltip>
+                      )}>
+                        <Button size="sm" variant="outline" className="openbitfun-model-settings__source-pill"
+                          aria-label={t('acquisition.configureProvider', { provider: group.providerName })}
+                          onClick={() => handleEditProvider(group.models[0])}>
+                          {group.providerName}
+                        </Button>
+                      </Capsule>
+                    </li>
+                  ))}
+                  {unconfiguredSubscriptionAccounts.map(({ account, accountId, enabled }) => (
+                    <li key={`${account.provider}:${accountId}`} className="openbitfun-model-settings__import-item" data-account-id={accountId}>
+                      <Button size="sm" variant="outline" onClick={() => setShowSubscriptionManager(true)}>
+                        {subscriptionName(account)} · {account.account || t('subscriptionAuth.accountIdentityUnavailable')}
+                        {accountId !== account.provider ? ` · ${t('subscriptionAuth.accountMarker', { marker: accountId.slice(-8) })}` : ''}
+                        {!enabled ? ` · ${t('subscriptionAuth.pool.disabled')}`
+                          : account.vault_unavailable ? ` · ${t('subscriptionAuth.accountState.vaultUnavailable')}`
+                            : account.reauthentication_required ? ` · ${t('subscriptionAuth.accountState.reauthenticationRequired')}`
+                              : !account.connected ? ` · ${t('subscriptionAuth.notSignedIn')}` : ''}
                       </Button>
-                    </Capsule>
-                  </li>
-                ))}
-              </ul>
-            ) : <span className="openbitfun-model-settings__pool-caption">{t('acquisition.noneImported')}</span>}
+                    </li>
+                  ))}
+                </ul>
+              ) : !modelConfigReady ? pendingConfigSummary
+                : isLoadingSubscriptions ? <ConfigLoadingState label={t('subscriptionAuth.loadingAccount')} variant="list" />
+                  : !subscriptionLoadError && <span className="openbitfun-model-settings__pool-caption">{t('acquisition.noneImported')}</span>}
+            </div>
           </ConfigPageRow>
         </ConfigPageSection>
 
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.module.scss b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.module.scss
index 591db0dea7..b4aabb2d48 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.module.scss
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.module.scss
@@ -8,7 +8,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.compact { margin: var(--openbitfun-space-2) 0; }
 .header, .title, .actions, .meterHeading, .footer {
   display: flex;
   align-items: center;
@@ -17,7 +16,6 @@
 .header { justify-content: space-between; gap: var(--openbitfun-space-3); min-block-size: var(--openbitfun-space-6); }
 .title { flex-wrap: wrap; min-inline-size: 0; color: var(--openbitfun-color-content-muted); }
 .title > strong { font-size: var(--openbitfun-type-meta-font-size); font-weight: var(--openbitfun-type-label-md-font-weight); }
-.plan { color: var(--openbitfun-color-content-secondary); font-weight: var(--openbitfun-type-label-selected-font-weight); overflow-wrap: anywhere; }
 .actions { flex-shrink: 0; }
 .meters, .skeletons {
   display: grid;
@@ -26,30 +24,31 @@
   margin-block-start: var(--openbitfun-space-2);
 }
 .meter {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+  align-items: baseline;
+  gap: var(--openbitfun-space-2) var(--openbitfun-space-3);
   min-inline-size: 0;
-  padding: var(--openbitfun-space-3) var(--openbitfun-space-4);
-  border: 1px solid var(--openbitfun-color-border-subtle);
-  border-radius: var(--openbitfun-radius-base);
-  background: var(--openbitfun-color-surface-subtle);
+  padding-block: var(--openbitfun-space-2);
 }
+.meter > .track, .meter > .meterDetails { grid-column: 1 / -1; }
 .meterHeading { color: var(--openbitfun-color-content-secondary); font-weight: var(--openbitfun-type-label-selected-font-weight); overflow-wrap: anywhere; }
 .value {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: var(--openbitfun-space-1);
-  margin-block: var(--openbitfun-space-2) var(--openbitfun-space-3);
+  justify-content: flex-end;
+  margin: 0;
 }
 .value > strong {
   min-inline-size: 0;
   overflow-wrap: anywhere;
-  font-family: var(--openbitfun-type-heading-compact-page-font-family);
-  font-size: var(--openbitfun-type-heading-compact-page-font-size);
-  line-height: var(--openbitfun-type-heading-compact-page-line-height);
-  font-weight: var(--openbitfun-type-heading-compact-page-font-weight);
-  letter-spacing: var(--openbitfun-type-heading-compact-page-letter-spacing);
+  font-family: var(--openbitfun-type-label-lg-font-family);
+  font-size: var(--openbitfun-type-label-lg-font-size);
+  line-height: var(--openbitfun-type-label-lg-line-height);
+  font-weight: var(--openbitfun-type-label-selected-font-weight);
+  letter-spacing: var(--openbitfun-type-label-lg-letter-spacing);
 }
 .unit, .remainingLabel { font-size: var(--openbitfun-type-meta-font-size); font-weight: var(--openbitfun-type-label-md-font-weight); color: var(--openbitfun-color-content-muted); }
 .remainingLabel { margin-inline-start: auto; }
@@ -117,6 +116,44 @@
 .skeleton > span:nth-child(2) { block-size: var(--openbitfun-space-5); inline-size: 55%; }
 .skeleton > span:last-child { block-size: var(--openbitfun-space-1); inline-size: 100%; }
 
+// Inline editor summaries share the form surface, not nested quota cards.
+.compact {
+  margin: 0;
+
+  .header { min-block-size: var(--openbitfun-control-height-sm); }
+  .title { flex: 1; }
+  .accountLabel { min-inline-size: 0; max-inline-size: 100%; }
+  .title > [data-openbitfun-component='status-pill'] { flex: none; max-inline-size: 100%; }
+  .meters { grid-template-columns: minmax(0, 1fr); }
+
+  .meter {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+    align-items: baseline;
+    gap: var(--openbitfun-space-2) var(--openbitfun-space-3);
+    padding: var(--openbitfun-space-2) 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .meterHeading { font-weight: var(--openbitfun-type-body-sm-font-weight); }
+  .value { justify-content: flex-end; margin: 0; }
+  .value > strong {
+    font-family: var(--openbitfun-type-label-md-font-family);
+    font-size: var(--openbitfun-type-label-md-font-size);
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
+    line-height: var(--openbitfun-type-label-md-line-height);
+    letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
+  }
+  .remainingLabel { margin-inline-start: var(--openbitfun-space-1); }
+  .track, .meterDetails { grid-column: 1 / -1; }
+  .meterDetails { flex-direction: row; flex-wrap: wrap; padding: 0; gap: var(--openbitfun-space-1) var(--openbitfun-space-3); }
+  .meterDetails:empty { display: none; }
+  .secondaryMeters { margin-block-start: var(--openbitfun-space-2); }
+  .skeleton { border: 0; padding: var(--openbitfun-space-2) 0; }
+}
+
 @container (max-width: 300px) {
   .header { align-items: flex-start; }
   .meter[data-secondary] { grid-template-columns: minmax(0, 1fr); }
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.test.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.test.tsx
index 6eb840c1e8..205cc51630 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.test.tsx
@@ -17,11 +17,12 @@ vi.mock('@/infrastructure/i18n', () => ({
   i18nService: { formatNumber: (value: number, options?: { style?: string }) => options?.style === 'percent' ? `${Math.round(value * 1000) / 10}%` : String(value), formatDate: (value: Date) => value.toISOString() },
 }));
 vi.mock('@openbitfun/ui', () => ({
+  Card: ({ children }: React.PropsWithChildren) => <div data-openbitfun-component="card">{children}</div>,
   Button: ({ children, onClick, disabled }: React.ButtonHTMLAttributes<HTMLButtonElement>) => <button onClick={onClick} disabled={disabled}>{children}</button>,
   IconButton: ({ icon, loading: _loading, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { icon: React.ReactNode; loading?: boolean }) => <button {...props}>{icon}</button>,
   Icon: () => <svg aria-hidden="true" />,
   Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  StatusPill: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+  StatusPill: ({ children }: { children: React.ReactNode }) => <span data-openbitfun-component="status-pill">{children}</span>,
 }));
 let container: HTMLDivElement;
 let root: Root;
@@ -34,17 +35,64 @@ beforeEach(() => {
 afterEach(() => act(() => root.unmount()));
 
 it('shows precise remaining credits with accessible progress, plan and reset time', () => {
-  observation.value = { account_id: 'zcode', provider: 'zcode', state: 'known', plan: 'Pro', valid_until: Date.now() / 1000 + 60, windows: [],
-    display: { version: 1, meters: [{ id: 'credits', used: 125, limit: 1000, remaining: 875, unit: 'credits', used_percent: 12.5, resets_at: 1800000000 }] } };
+  observation.value = { account_id: 'zcode', provider: 'zcode', state: 'known', plan: 'Pro', observed_at: 1700000000, valid_until: Date.now() / 1000 + 60, windows: [],
+    display: { version: 1, expires_at: 1800000000, meters: [{ id: 'credits', used: 125, limit: 1000, remaining: 875, unit: 'credits', used_percent: 12.5, resets_at: 1800000000 }] } };
   render();
   expect(container.textContent).toContain('875');
   expect(container.textContent).toContain('125 used of 1000');
   expect(container.textContent).toContain('Pro');
   expect(container.textContent).toContain('Resets');
+  const card = container.querySelector('[data-openbitfun-component="card"]')!;
+  expect(container.querySelectorAll('[data-openbitfun-component="card"]')).toHaveLength(1);
+  expect(card.querySelector('[data-openbitfun-part="quotaHeader"] [data-openbitfun-component="status-pill"]')?.textContent).toBe('Pro');
+  expect(card.querySelector('[data-openbitfun-part="quotaMeter"]')).not.toBeNull();
+  expect(card.querySelector('[data-openbitfun-part="quotaFooter"] time')).not.toBeNull();
   expect(container.querySelector('[role="progressbar"]')?.getAttribute('aria-valuenow')).toBe('87.5');
   act(() => container.querySelector('button')!.click());
   expect(observation.refresh).toHaveBeenCalledOnce();
 });
+it('keeps the editor summary concise without losing quota meaning or refresh', () => {
+  observation.value = { account_id: 'codex', provider: 'codex', state: 'known', plan: 'Pro', windows: [], observed_at: 1700000000, valid_until: Date.now() / 1000 + 60,
+    display: { version: 1, meters: [{ id: 'weekly', duration_seconds: 604800, used_percent: 25, resets_at: 1800000000 }] } };
+  act(() => root.render(<SubscriptionQuotaPanel provider="codex" accountId="slot-a" identity="fixture" active supported compact />));
+  expect(container.querySelector('section')?.getAttribute('aria-label')).toBe(copy.quota.title);
+  expect(container.querySelector('[data-openbitfun-component="card"]')).toBeNull();
+  expect(container.querySelector('[data-openbitfun-part="quotaHeader"]')?.textContent).toBe('Pro');
+  expect(container.querySelector('[data-openbitfun-part="quotaValue"]')?.textContent).toBe('75%');
+  expect(container.querySelector('[data-openbitfun-part="quotaValue"]')?.getAttribute('aria-label')).toContain('Weekly');
+  expect(container.querySelector('[role="progressbar"]')?.getAttribute('aria-valuenow')).toBe('75');
+  expect(container.textContent).toContain('Resets');
+  expect(container.querySelector('[data-openbitfun-part="quotaFooter"]')).toBeNull();
+  act(() => container.querySelector('button')!.click());
+  expect(observation.refresh).toHaveBeenCalledOnce();
+  render();
+  expect(container.querySelector('[data-openbitfun-part="quotaHeader"]')?.textContent).toContain(copy.quota.title);
+  expect(container.querySelector('[data-openbitfun-part="quotaFooter"]')).toBeNull();
+  expect(container.textContent).not.toContain('Updated');
+});
+
+it('combines the account, plan badge and account-scoped refresh in one header', () => {
+  observation.value = { account_id: 'slot-a', provider: 'codex', state: 'known', plan: 'Pro', windows: [], valid_until: Date.now() / 1000 + 60,
+    display: { version: 1, meters: [{ id: 'weekly', duration_seconds: 604800, used_percent: 25 }] } };
+  act(() => root.render(<SubscriptionQuotaPanel provider="codex" accountId="slot-a" identity="fixture" active supported compact
+    accountLabel={<span>account@example.invalid</span>} headerLeading={<input type="checkbox" aria-label="Select account" />}
+    headerActions={<button>Move up</button>} />));
+  const header = container.querySelector('[data-openbitfun-part="quotaHeader"]')!;
+  expect(header.textContent).toContain('account@example.invalid');
+  expect(header.querySelector('input[type="checkbox"]')?.parentElement).toBe(header);
+  expect(header.querySelector('[data-openbitfun-part="quotaMeter"]')).toBeNull();
+  expect(header.querySelector('[data-openbitfun-component="status-pill"]')?.textContent).toBe('Pro');
+  expect(header.textContent).not.toContain(copy.quota.title);
+  expect(header.querySelectorAll('button')).toHaveLength(2);
+  act(() => (header.querySelector(`button[aria-label="${copy.quota.refresh}"]`) as HTMLButtonElement).click());
+  expect(observation.refresh).toHaveBeenCalledOnce();
+  observation.unsupportedHost = true;
+  act(() => root.render(<SubscriptionQuotaPanel provider="codex" accountId="slot-a" identity="fixture" active supported compact accountLabel="account@example.invalid" />));
+  expect(container.textContent).toContain('account@example.invalid');
+  expect(container.textContent).toContain('This host does not support');
+  expect(container.querySelector('button')).toBeNull();
+});
+
 it('keeps old values visibly stale after failure and distinguishes unknown from unlimited', () => {
   observation.failed = true;
   observation.value = { account_id: 'zcode', provider: 'zcode', state: 'query_failed', windows: [], observed_at: 1000,
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.tsx
index f21454f3bc..10f1915f74 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionQuotaPanel.tsx
@@ -1,8 +1,9 @@
+import type { ReactNode } from 'react';
 import type { SubscriptionQuotaMeter } from '@/infrastructure/api/service-api/AIApi';
 import type { SubscriptionProvider } from '@/infrastructure/config/types';
 import { useSubscriptionQuota } from '@/infrastructure/config/hooks/useSubscriptionQuota';
 import { i18nService, useI18n } from '@/infrastructure/i18n';
-import { Button, Icon, IconButton, StatusPill, Tooltip } from '@openbitfun/ui';
+import { Button, Card, Icon, IconButton, StatusPill, Tooltip } from '@openbitfun/ui';
 import { finiteQuota, quotaIsStale, quotaMeters, remainingPercent } from './subscriptionQuotaPresentation';
 import styles from './SubscriptionQuotaPanel.module.scss';
 import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
@@ -16,9 +17,12 @@ interface Props {
   refreshVersion?: number;
   compact?: boolean;
   modelId?: string;
+  accountLabel?: ReactNode;
+  headerLeading?: ReactNode;
+  headerActions?: ReactNode;
 }
 
-export function SubscriptionQuotaPanel({ provider, accountId = provider, identity, active, supported, refreshVersion, compact, modelId }: Props) {
+export function SubscriptionQuotaPanel({ provider, accountId = provider, identity, active, supported, refreshVersion, compact, modelId, accountLabel, headerLeading, headerActions }: Props) {
   const { t } = useI18n('settings/models');
   const query = useSubscriptionQuota(provider, accountId, active, supported, identity, refreshVersion, modelId);
   const snapshot = query.value;
@@ -64,10 +68,10 @@ export function SubscriptionQuotaPanel({ provider, accountId = provider, identit
     return (
       <div className={styles.meter} data-openbitfun-component="model-settings" data-openbitfun-part="quotaMeter" key={meter.id} data-tone={tone} data-secondary={meter.secondary || undefined}>
         <div className={styles.meterHeading}><span>{name}</span></div>
-        <div className={styles.value} data-openbitfun-component="model-settings" data-openbitfun-part="quotaValue">
+        <div className={styles.value} data-openbitfun-component="model-settings" data-openbitfun-part="quotaValue" aria-label={compact ? t('quota.remainingFor', { name }) : undefined}>
           <strong>{meter.unlimited ? t('quota.unlimited') : left !== undefined ? number(left) : remaining !== undefined ? percent(remaining) : t('quota.noValue')}</strong>
           {!meter.unlimited && left !== undefined && unit && <span className={styles.unit}>{unit}</span>}
-          {!meter.unlimited && (left !== undefined || remaining !== undefined) && <span className={styles.remainingLabel}>{t('quota.remaining')}</span>}
+          {!compact && !meter.unlimited && (left !== undefined || remaining !== undefined) && <span className={styles.remainingLabel}>{t('quota.remaining')}</span>}
         </div>
         {remaining !== undefined && <div className={styles.track} data-openbitfun-component="model-settings" data-openbitfun-part="quotaTrack" role="progressbar" aria-label={t('quota.remainingFor', { name })}
           aria-valuemin={0} aria-valuemax={100} aria-valuenow={remaining} aria-valuetext={percent(remaining)}
@@ -85,18 +89,19 @@ export function SubscriptionQuotaPanel({ provider, accountId = provider, identit
     );
   };
   const initialLoading = query.loading && !snapshot && !query.failed && !query.unsupportedHost;
-  return (
-    <section className={`${styles.quota} ${compact ? styles.compact : ''}`} aria-label={t('quota.title')}
-      data-openbitfun-component="model-settings" data-openbitfun-part="subscriptionQuota"
-      aria-busy={query.loading} data-testid="subscription-quota" data-provider={provider} data-state={initialLoading ? 'loading' : snapshot?.state || 'unknown'}>
+  const content = (
+    <>
       <div className={styles.header} data-openbitfun-component="model-settings" data-openbitfun-part="quotaHeader">
+        {headerLeading}
         <div className={styles.title}>
-          <strong>{t('quota.title')}</strong>
-          {snapshot?.plan && <span className={styles.plan}>{snapshot.plan}</span>}
+          {accountLabel ? <span className={styles.accountLabel}>{accountLabel}</span>
+            : (!compact || (!snapshot?.plan && !meters.length)) && <strong>{t('quota.title')}</strong>}
+          {snapshot?.plan && <StatusPill tone="neutral">{snapshot.plan}</StatusPill>}
           {stale && meters.length > 0 && <StatusPill tone="warning">{t('quota.stale')}</StatusPill>}
         </div>
         <div className={styles.actions}>
-          {provider === 'opencode' && <Button size="xs" variant="text"
+          {headerActions}
+          {provider === 'opencode' && <Button size="xs" variant="outline"
             trailingIcon={<Icon name="arrow-up-right" size="xs" />}
             onClick={() => void systemAPI.openExternal('https://opencode.ai/console')}>
             {t('quota.openConsole')}
@@ -125,10 +130,16 @@ export function SubscriptionQuotaPanel({ provider, accountId = provider, identit
         {meters.filter(meter => meter.secondary).map(renderMeter)}
       </div>}
       {snapshot?.unlimited_credits && <p className={styles.notice}>{t('quota.unlimitedCredits')}</p>}
-      {snapshot && (date(snapshot.observed_at) || (snapshot.display?.version === 1 && date(snapshot.display.expires_at))) && <footer className={styles.footer} data-openbitfun-component="model-settings" data-openbitfun-part="quotaFooter">
-        {date(snapshot.observed_at) && <time dateTime={new Date(snapshot.observed_at! * 1000).toISOString()}>{t('quota.updatedAt', { time: date(snapshot.observed_at) })}</time>}
-        {snapshot.display?.version === 1 && date(snapshot.display.expires_at) && <time dateTime={new Date(snapshot.display.expires_at! * 1000).toISOString()}>{t('quota.planUntil', { time: date(snapshot.display.expires_at) })}</time>}
+      {snapshot?.display?.version === 1 && date(snapshot.display.expires_at) && <footer className={styles.footer} data-openbitfun-component="model-settings" data-openbitfun-part="quotaFooter">
+        <time dateTime={new Date(snapshot.display.expires_at! * 1000).toISOString()}>{t('quota.planUntil', { time: date(snapshot.display.expires_at) })}</time>
       </footer>}
+    </>
+  );
+  return (
+    <section className={`${styles.quota} ${compact ? styles.compact : ''}`} aria-label={t('quota.title')}
+      data-openbitfun-component="model-settings" data-openbitfun-part="subscriptionQuota"
+      aria-busy={query.loading} data-testid="subscription-quota" data-provider={provider} data-state={initialLoading ? 'loading' : snapshot?.state || 'unknown'}>
+      {compact ? content : <Card appearance="subtle" padding="sm">{content}</Card>}
     </section>
   );
 }
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.test.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.test.tsx
index 657426cfbe..171035d3e4 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.test.tsx
@@ -14,6 +14,10 @@ it('keeps one service heading and separate exact-slot rows for identical account
   act(() => root.render(<SubscriptionServiceGroup title="Codex · 2 accounts" actions={<Button onClick={add}>Add account</Button>}>
     <SubscriptionAccountList accounts={accounts} renderAccount={item => <button onClick={() => select(item.accountId)}>{item.account.account}</button>} />
   </SubscriptionServiceGroup>));
+  const service = container.querySelector('[data-openbitfun-part="subscriptionService"]')!;
+  expect(service.querySelector('[data-openbitfun-component="card"]')).toBeNull();
+  expect(service.querySelector('[data-openbitfun-part="header"]')?.parentElement).toBe(service);
+  expect(service.querySelector('[role="list"]')?.parentElement).toBe(service);
   expect(container.querySelectorAll('h3')).toHaveLength(1);
   expect([...container.querySelectorAll('[role="listitem"]')].map(row => row.getAttribute('data-account-id'))).toEqual(['slot-a','slot-b']);
   act(() => (container.querySelector('[data-account-id="slot-b"] button') as HTMLButtonElement).click());
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.tsx
index b19a9cf347..c1eeae89e7 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SubscriptionServiceGroup.tsx
@@ -1,24 +1,22 @@
 import styles from './SubscriptionServiceGroup.module.scss';
 import type { ManagedSubscriptionAccount } from './subscriptionServices';
 import type { ReactNode } from 'react';
-import { Card, CardHeader } from '@openbitfun/ui';
+import { CardHeader } from '@openbitfun/ui';
 
 /** One product heading followed by independent account rows. */
 export function SubscriptionServiceGroup({ title, description, actions, children, testId = 'settings-subscription-service' }: {
   title: string; description?: string; actions?: ReactNode; children: ReactNode; testId?: string;
 }) {
   return <div className={styles.group} data-testid={testId} data-openbitfun-component="model-settings" data-openbitfun-part="subscriptionService">
-    <Card appearance="subtle" clip>
-      <CardHeader
-        className={styles.header}
-        align="center"
-        padding="md"
-        title={<h3 className={styles.title}>{title}</h3>}
-        description={description}
-        actions={actions}
-      />
-      {children}
-    </Card>
+    <CardHeader
+      className={styles.header}
+      align="center"
+      padding="md"
+      title={<h3 className={styles.title}>{title}</h3>}
+      description={description}
+      actions={actions}
+    />
+    {children}
   </div>;
 }
 
diff --git a/src/web-ui/src/app/services/createProject.test.ts b/src/web-ui/src/app/services/createProject.test.ts
index 1601db901f..ccfd46456e 100644
--- a/src/web-ui/src/app/services/createProject.test.ts
+++ b/src/web-ui/src/app/services/createProject.test.ts
@@ -29,6 +29,16 @@ describe('project composition', () => {
     expect(updateWorkspaceInfo).not.toHaveBeenCalled();
   });
 
+  it.each([false, true])('rejects an assistant root instead of renaming it or reporting project success (remote=%s)', async remote => {
+    openWorkspace.mockResolvedValue(record({ workspaceKind: 'assistant' }));
+    const openRemote = vi.fn().mockResolvedValue(record({ workspaceKind: 'assistant' }));
+    const folder = { path: '/srv/assistant', ...(remote ? { remote: { connectionId: 'ssh-1', connectionName: 'Host' } } : {}) };
+    await expect(createProject({ name: 'New project', folders: [folder] }, openRemote))
+      .rejects.toMatchObject({ name: 'AssistantProjectFolderError' });
+    expect(updateWorkspaceInfo).not.toHaveBeenCalled();
+    expect(createDirectory).not.toHaveBeenCalled();
+  });
+
   it('persists a unified name and associated folders together without discarding old associations', async () => {
     openWorkspace.mockResolvedValue(record({ relatedPaths: [{ path: '/srv/docs', description: 'Docs' }] }));
     await createProject({ name: '  Product  ', folders: [
diff --git a/src/web-ui/src/app/services/createProject.ts b/src/web-ui/src/app/services/createProject.ts
index a9ed4e6805..b061c10c05 100644
--- a/src/web-ui/src/app/services/createProject.ts
+++ b/src/web-ui/src/app/services/createProject.ts
@@ -4,7 +4,7 @@ import { workspaceManager } from '@/infrastructure/services/business/workspaceMa
 import { sshApi } from '@/features/ssh-remote/sshApi';
 import type { WorkspaceInfo } from '@/shared/types';
 
-import { defaultProjectDirectory, projectFolderKey, type ProjectDraft, type ProjectFolder } from '../utils/projectDraft';
+import { AssistantProjectFolderError, defaultProjectDirectory, projectFolderKey, type ProjectDraft, type ProjectFolder } from '../utils/projectDraft';
 export type { ProjectDraft, ProjectFolder } from '../utils/projectDraft';
 
 /** Persist one workspace with a primary root and the remaining associated folders. */
@@ -54,6 +54,9 @@ export async function createProject(
     if (!workspace) return false;
   }
   surface.assertCurrent('configure project');
+  // Opening a reserved assistant root returns the assistant, not a new project.
+  // Do not report success or rename/attach folders to that identity.
+  if (workspace.workspaceKind === 'assistant') throw new AssistantProjectFolderError();
 
   // Keep existing associations when a previously registered primary root is reused.
   const relatedPaths = [...(workspace.relatedPaths ?? [])];
diff --git a/src/web-ui/src/app/utils/projectDraft.ts b/src/web-ui/src/app/utils/projectDraft.ts
index 9c26e0092c..112667d760 100644
--- a/src/web-ui/src/app/utils/projectDraft.ts
+++ b/src/web-ui/src/app/utils/projectDraft.ts
@@ -10,6 +10,13 @@ export interface ProjectDraft {
   remote?: ProjectFolder['remote'];
 }
 
+export class AssistantProjectFolderError extends Error {
+  constructor() {
+    super('The selected folder belongs to an assistant workspace. Select a project folder instead.');
+    this.name = 'AssistantProjectFolderError';
+  }
+}
+
 export class ProjectDirectoryUnavailableError extends Error {
   constructor() {
     super('The target host did not provide an absolute home directory.');
diff --git a/src/web-ui/src/features/ssh-remote/WorkspaceSourceSelector.tsx b/src/web-ui/src/features/ssh-remote/WorkspaceSourceSelector.tsx
index e25e451d2d..624d33dd5e 100644
--- a/src/web-ui/src/features/ssh-remote/WorkspaceSourceSelector.tsx
+++ b/src/web-ui/src/features/ssh-remote/WorkspaceSourceSelector.tsx
@@ -18,6 +18,7 @@ interface WorkspaceSourceSelectorProps {
   /** Connection-only surfaces cannot open the host's ordinary directory picker. */
   allowHostDirectory?: boolean;
   locationOptions?: ReactNode;
+  showCurrentDevice?: boolean;
   environmentOptions?: ReactNode;
   locationActions?: ReactNode;
   environmentActions?: ReactNode;
@@ -25,7 +26,7 @@ interface WorkspaceSourceSelectorProps {
 }
 
 export function WorkspaceSourceSelector({
-  value, onValueChange, disabled, allowHostDirectory = true, locationOptions, environmentOptions, locationActions, environmentActions, showEnvironment = true,
+  value, onValueChange, disabled, allowHostDirectory = true, locationOptions, environmentOptions, locationActions, environmentActions, showEnvironment = true, showCurrentDevice = true,
 }: WorkspaceSourceSelectorProps) {
   const { t } = useI18n('common');
   const peer = usePeerDeviceModeOptional();
@@ -69,7 +70,7 @@ export function WorkspaceSourceSelector({
         }} />
       {locationActions && <div className="workspace-source-selector__actions">{locationActions}</div>}
       </div>
-      {location === 'current' && <div className="workspace-source-selector__device" role="status"
+      {location === 'current' && showCurrentDevice && <div className="workspace-source-selector__device" role="status"
         data-openbitfun-component="ssh-remote" data-openbitfun-part="sourceHint">
         {deviceName && <DeviceSystemGlyph size="sm" device={{ kind: deviceKind === 'cli' ? 'execution-host' : 'desktop', name: deviceName, os: deviceOs ?? undefined, hostKind: deviceKind === 'cli' ? 'cli' : 'desktop' }} />}
         <OverflowText>{deviceName || (deviceNameFailed ? t('workspaceSource.deviceNameUnavailable') : '')}</OverflowText>
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index e6ef99f71d..83b7d7d3e0 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -828,6 +828,7 @@
     "emptyProjectHint": "Save on the current device:",
     "invalidDirectoryName": "Use a single folder name without slashes, . or ..",
     "sameHostRequired": "Project folders must be on the same host.",
+    "assistantFolderUnavailable": "This folder belongs to an assistant workspace and cannot be added as a project. Select a different folder, or remove it and enter a name to create a new project.",
     "remoteUnavailable": "Remote folder selection is unavailable here.",
     "remoteConnectionChanged": "The remote connection changed. Select the project folders again.",
     "defaultDirectoryUnavailable": "The target device did not provide its home directory. Update or reconnect to the device and try again.",
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index 0d6a5cf281..989d3672c1 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -828,6 +828,7 @@
     "emptyProjectHint": "保存到当前设备：",
     "invalidDirectoryName": "请输入单个文件夹名称，不能包含斜杠，也不能为 . 或 ..",
     "sameHostRequired": "同一项目的文件夹必须位于同一台主机。",
+    "assistantFolderUnavailable": "此文件夹属于助理工作区，不能添加为项目。请选择其他文件夹，或移除此文件夹并输入名称以创建新项目。",
     "remoteUnavailable": "当前界面不支持选择远程文件夹。",
     "remoteConnectionChanged": "远程连接已改变，请重新选择项目文件夹。",
     "defaultDirectoryUnavailable": "目标设备未提供用户目录，请更新或重新连接该设备后重试。",
diff --git a/src/web-ui/src/locales/zh-TW/common.json b/src/web-ui/src/locales/zh-TW/common.json
index 8faa1df36c..55b481eadf 100644
--- a/src/web-ui/src/locales/zh-TW/common.json
+++ b/src/web-ui/src/locales/zh-TW/common.json
@@ -828,6 +828,7 @@
     "emptyProjectHint": "儲存至目前裝置：",
     "invalidDirectoryName": "請輸入單一資料夾名稱，不可包含斜線，也不可為 . 或 ..",
     "sameHostRequired": "同一專案的資料夾必須位於同一台主機。",
+    "assistantFolderUnavailable": "此資料夾屬於助理工作區，無法新增為專案。請選擇其他資料夾，或移除此資料夾並輸入名稱以建立新專案。",
     "remoteUnavailable": "目前介面不支援選擇遠端資料夾。",
     "remoteConnectionChanged": "遠端連線已變更，請重新選擇專案資料夾。",
     "defaultDirectoryUnavailable": "目標裝置未提供使用者目錄，請更新或重新連線至該裝置後重試。",