diff --git a/.factory/mcp.json b/.factory/mcp.json
index e69de29b..29585572 100644
--- a/.factory/mcp.json
+++ b/.factory/mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": ["-y", "shadcn@latest", "mcp"]
+    }
+  }
+}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7888459b..643fbdf2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -42,10 +42,10 @@ jobs:
           pnpm install --frozen-lockfile
           
           if [ "${{ steps.changes.outputs.code }}" == "true" ]; then
-            # 运行所有测试：单元测试 + Storybook 组件测试 + E2E 测试 + 主题检查
-            TASKS="typecheck:run build i18n:run theme:run test:run test:storybook e2e:ci e2e:ci:mock e2e:ci:real"
+            # 运行所有测试：lint + 单元测试 + Storybook 组件测试 + E2E 测试 + 主题检查
+            TASKS="lint:run typecheck:run build i18n:run theme:run test:run test:storybook e2e:audit e2e:ci e2e:ci:mock e2e:ci:real"
           else
-            TASKS="typecheck:run build i18n:run theme:run test:run test:storybook"
+            TASKS="lint:run typecheck:run build i18n:run theme:run test:run test:storybook"
           fi
           
           # Run turbo and capture output, pipefail ensures we get turbo's exit code
@@ -115,10 +115,10 @@ jobs:
           E2E_TEST_MNEMONIC: ${{ secrets.E2E_TEST_MNEMONIC }}
         run: |
           if [ "${{ steps.changes.outputs.code }}" == "true" ]; then
-            # 运行所有测试：单元测试 + Storybook 组件测试 + E2E 测试 + 主题检查
-            pnpm turbo run typecheck:run build i18n:run theme:run test:run test:storybook e2e:ci e2e:ci:mock e2e:ci:real
+            # 运行所有测试：lint + 单元测试 + Storybook 组件测试 + E2E 测试 + 主题检查
+            pnpm turbo run lint:run typecheck:run build i18n:run theme:run test:run test:storybook e2e:audit e2e:ci e2e:ci:mock e2e:ci:real
           else
-            pnpm turbo run typecheck:run build i18n:run theme:run test:run test:storybook
+            pnpm turbo run lint:run typecheck:run build i18n:run theme:run test:run test:storybook
           fi
 
   checks-standard:
diff --git a/.gitignore b/.gitignore
index 49af91d8..923d15b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,17 +1,17 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
-/dists
-/dist-web
-/dist-dweb
-/tmp
-/.tmp
-/.chat
-/out-tsc
-/release
+dist/
+dists/
+dist-web/
+dist-dweb/
+tmp/
+.tmp/
+.chat/
+out-tsc/
+release/
 /gh-pages
-/storybook-static
+storybook-static/
 /docs/por
 
 # VitePress
@@ -57,12 +57,17 @@ migrations.json
 Thumbs.db
 
 # Playwright
-/e2e/test-results/
-/e2e/report/
-/playwright-report/
+e2e/test-results/
+e2e/report/
+playwright-report/
 /blob-report/
-/playwright/.cache/
+playwright/.cache/
+# Miniapps test results
+**/test-results/
 # 注意: e2e/__screenshots__/ 基线截图需要提交到 git
+
+# Temporary demo files
+demo-*.html
 # Ignore CCCC runtime domain (Ephemeral mode)
 /.cccc/**
 
diff --git "a/docs/white-book/00-\345\277\205\350\257\273/best-practices.md" "b/docs/white-book/00-\345\277\205\350\257\273/best-practices.md"
index 9a697ce4..5d56b5eb 100644
--- "a/docs/white-book/00-\345\277\205\350\257\273/best-practices.md"
+++ "b/docs/white-book/00-\345\277\205\350\257\273/best-practices.md"
@@ -19,3 +19,9 @@
 - ❌ password/Password（宽泛含义） → ✅ walletLock（钱包锁）/ twoStepSecret（安全密码）/ payPassword（支付密码）等具体命名
 - 圆形元素必须使用 aspect-square 标记，与 w-*/h-*/size-* 不冲突，是规范要求
 - 组件尺寸属性要考虑响应式布局，如 lg 尺寸应包含 @xs:w-12 等容器查询断点
+- ❌ JS scroll 事件监听 → ✅ CSS scroll-driven animations（animation-timeline: scroll()）
+- 滚动驱动动画使用 `scroll-timeline: --name block` 定义 + `animation-timeline: --name` 绑定
+- 跨层级绑定使用 `timeline-scope: --name` 在公共祖先上声明
+- 紧凑头部效果使用 `animation-range: 0 80px` 限制动画范围
+- ⚠️ scroll-driven animations 是渐进增强：初始状态必须是可用的（如 opacity-0），不支持时保持初始状态
+- E2E 截图变更后运行 `pnpm e2e:audit` 检查残留截图，详见白皮书 08-测试篇/03-Playwright配置/e2e-best-practices
diff --git "a/docs/white-book/08-\346\265\213\350\257\225\347\257\207/01-\346\265\213\350\257\225\347\255\226\347\225\245/index.md" "b/docs/white-book/08-\346\265\213\350\257\225\347\257\207/01-\346\265\213\350\257\225\347\255\226\347\225\245/index.md"
index b9d620aa..d5dc451f 100644
--- "a/docs/white-book/08-\346\265\213\350\257\225\347\257\207/01-\346\265\213\350\257\225\347\255\226\347\225\245/index.md"
+++ "b/docs/white-book/08-\346\265\213\350\257\225\347\257\207/01-\346\265\213\350\257\225\347\255\226\347\225\245/index.md"
@@ -4,7 +4,39 @@
 
 ---
 
-## 23.1 测试分层
+## 23.1 测试环境的本质区别
+
+**Storybook v10 的核心价值：与 Vitest 深度融合，为组件测试提供真实浏览器环境。**
+
+| 环境 | 技术栈 | 特点 | 适用场景 |
+|-----|-------|------|---------|
+| **jsdom/happy-dom** | Vitest 单元测试 | 虚拟 DOM，快速但非真实浏览器 | 纯逻辑、算法、工具函数 |
+| **真实浏览器 (Storybook)** | Storybook + Vitest | 真实渲染、真实 CSS、真实事件 | 组件渲染、复杂交互、样式验证 |
+| **真实浏览器 (E2E)** | Playwright | 完整应用实例 | 端到端用户流程 |
+
+### 为什么需要三层测试？
+
+```
+jsdom/happy-dom 的局限性：
+- 不支持真实 CSS 计算（layout、动画）
+- 不支持某些 Web API（ResizeObserver、IntersectionObserver 需 polyfill）
+- 事件模型与真实浏览器有差异
+
+Storybook 组件测试的价值：
+- 在真实 Chromium 中渲染组件
+- 验证 CSS 样式、动画、响应式布局
+- 测试真实的用户交互（点击、输入、手势）
+- 每个 Story 自动成为冒烟测试
+
+E2E 与组件测试的区别：
+- E2E 测试完整应用流程（页面导航、状态持久化）
+- 组件测试聚焦单个组件的隔离行为
+- 组件测试更快、更稳定、更容易定位问题
+```
+
+---
+
+## 23.2 测试分层
 
 | 层级 | 工具 | 测试内容 | 运行频率 |
 |-----|------|---------|---------|
@@ -14,7 +46,7 @@
 
 ---
 
-## 23.2 测试命令
+## 23.3 测试命令
 
 ```bash
 pnpm test              # 单元测试 (*.test.ts)
@@ -25,7 +57,7 @@ pnpm test:coverage     # 单元测试 + 覆盖率报告
 
 ---
 
-## 23.3 Storybook + Vitest 集成
+## 23.4 Storybook + Vitest 集成
 
 项目使用 `@storybook/addon-vitest` 将 Stories 作为测试用例运行。
 
@@ -93,7 +125,7 @@ export const Interactive: Story = {
 
 ---
 
-## 23.4 覆盖率目标
+## 23.5 覆盖率目标
 
 | 类型 | 目标 |
 |-----|------|
@@ -104,7 +136,7 @@ export const Interactive: Story = {
 
 ---
 
-## 23.5 测试优先级
+## 23.6 测试优先级
 
 | 优先级 | 测试内容 |
 |-------|---------|
@@ -115,7 +147,7 @@ export const Interactive: Story = {
 
 ---
 
-## 23.6 测试命名规范
+## 23.7 测试命名规范
 
 ```typescript
 describe('WalletStore', () => {
@@ -129,7 +161,7 @@ describe('WalletStore', () => {
 
 ---
 
-## 23.7 CI 集成
+## 23.8 CI 集成
 
 CI 流水线运行以下测试：
 
diff --git "a/docs/white-book/08-\346\265\213\350\257\225\347\257\207/03-Playwright\351\205\215\347\275\256/e2e-best-practices.md" "b/docs/white-book/08-\346\265\213\350\257\225\347\257\207/03-Playwright\351\205\215\347\275\256/e2e-best-practices.md"
index a88f9a33..07ec1d8c 100644
--- "a/docs/white-book/08-\346\265\213\350\257\225\347\257\207/03-Playwright\351\205\215\347\275\256/e2e-best-practices.md"
+++ "b/docs/white-book/08-\346\265\213\350\257\225\347\257\207/03-Playwright\351\205\215\347\275\256/e2e-best-practices.md"
@@ -291,3 +291,50 @@ await page.click('[data-testid="submit-button"]')
 4. 更新测试代码使用新的 testid
 5. 本地运行测试确认通过
 6. 更新 testid 文档列表
+
+---
+
+## 截图审计
+
+### 残留截图检测
+
+项目使用 `@biochain/e2e-tools` 检测残留截图（不再被测试引用的截图文件）。
+
+```bash
+# 主应用
+pnpm e2e:audit         # 检查所有项目
+pnpm e2e:audit:run     # 仅检查主应用
+
+# miniapps
+cd miniapps/forge && pnpm e2e:audit
+cd miniapps/teleport && pnpm e2e:audit
+```
+
+### 工作原理
+
+1. 扫描 `e2e/*.spec.ts` 文件
+2. 提取所有 `toHaveScreenshot('name.png')` 调用
+3. 对比 `e2e/__screenshots__/` 目录中的实际文件
+4. 报告未被引用的残留截图
+
+### 处理残留截图
+
+```bash
+# 查看残留截图
+pnpm e2e:audit:run
+
+# 自动删除残留截图
+bunx @biochain/e2e-tools audit --fix
+```
+
+### CI 集成
+
+`--strict` 模式下发现残留截图会导致 exit code 1，用于 CI 流程中阻止合并。
+
+### 常见场景
+
+| 场景 | 处理方式 |
+|------|---------|
+| 删除了测试用例 | 运行 `--fix` 删除对应截图 |
+| 重命名了截图 | 删除旧截图或更新测试代码 |
+| 截图未被引用 | 检查是否遗漏 `toHaveScreenshot` 调用 |
diff --git "a/docs/white-book/10-\347\224\237\346\200\201\347\257\207/01-\346\236\266\346\236\204\350\256\276\350\256\241.md" "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/01-\346\236\266\346\236\204\350\256\276\350\256\241.md"
new file mode 100644
index 00000000..771f5166
--- /dev/null
+++ "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/01-\346\236\266\346\236\204\350\256\276\350\256\241.md"
@@ -0,0 +1,132 @@
+# 架构设计
+
+## 系统架构
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      KeyApp (Host)                          │
+│  ┌─────────────┐  ┌──────────────┐  ┌───────────────────┐  │
+│  │ EcosystemTab│  │ BioProvider  │  │ MiniappRegistry   │  │
+│  │ (生态 Tab)  │  │ (Server SDK) │  │ (订阅管理)        │  │
+│  └──────┬──────┘  └──────┬───────┘  └─────────┬─────────┘  │
+│         │                │                     │            │
+│         ▼                ▼                     ▼            │
+│  ┌─────────────────────────────────────────────────────────┐│
+│  │              PostMessage Bridge                         ││
+│  │   (双向通信: request/response + events)                 ││
+│  └─────────────────────────────────────────────────────────┘│
+└────────────────────────────────────────────────────────────┘
+                             │ iframe sandbox
+┌────────────────────────────┼────────────────────────────────┐
+│                    MiniApp (Client)                         │
+│  ┌─────────────────────────┴───────────────────────────────┐│
+│  │              @biochain/bio-sdk                      ││
+│  │   window.bio = { request, on, off, ... }                ││
+│  └─────────────────────────────────────────────────────────┘│
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 通信协议
+
+### 请求消息
+
+```typescript
+interface RequestMessage {
+  type: 'bio_request'
+  id: string              // 唯一请求 ID
+  method: string          // 方法名 (bio_requestAccounts, bio_signMessage, ...)
+  params?: unknown[]      // 参数
+}
+```
+
+### 响应消息
+
+```typescript
+interface ResponseMessage {
+  type: 'bio_response'
+  id: string              // 对应请求 ID
+  success: boolean        // 是否成功
+  result?: unknown        // 成功时的结果
+  error?: {               // 失败时的错误
+    code: number
+    message: string
+    data?: unknown
+  }
+}
+```
+
+### 事件消息
+
+```typescript
+interface EventMessage {
+  type: 'bio_event'
+  event: string           // 事件名
+  args: unknown[]         // 事件参数
+}
+```
+
+## 安全模型
+
+### iframe 沙箱
+
+```html
+<iframe
+  sandbox="allow-scripts allow-forms allow-same-origin"
+  src="/miniapps/xxx/"
+/>
+```
+
+- `allow-scripts`: 允许执行脚本
+- `allow-forms`: 允许提交表单
+- `allow-same-origin`: 允许同源请求（必需，用于 postMessage）
+- 不允许: `allow-top-navigation`, `allow-popups`
+
+### 权限控制
+
+小程序需要在 manifest 中声明所需权限：
+
+```json
+{
+  "permissions": ["bio_requestAccounts", "bio_signMessage"]
+}
+```
+
+用户首次使用时需要确认权限授予。
+
+### AppId 约束（防盗用/防覆盖）
+
+小程序的 `appId` 必须采用“反向域名”命名（与官网域名保持相对一致）：
+
+- 官网：`my-app.domain.com` → `appId`: `com.domain.my-app`
+
+该约束的目的：
+- 避免第三方抢注/覆盖同名 appId
+- 为未来的签名校验、可信声明提供稳定标识
+
+## 与 DWEB 的兼容
+
+Bio Provider 设计为可插拔的，未来可以支持 DWEB 环境：
+
+```typescript
+interface ProviderTransport {
+  send(message: unknown): void
+  onMessage(handler: (message: unknown) => void): void
+}
+
+// iframe 实现
+class IframeTransport implements ProviderTransport { ... }
+
+// DWEB 实现 (未来)
+class DwebTransport implements ProviderTransport { ... }
+```
+
+## 导航同步（自维护）
+
+为了稳定支持包含 `.` 的 `appId`（以及未来升级到 Navigation API），我们需要自维护一份 Stackflow 的 history-sync 插件：
+
+- 代码位置：`packages/plugin-navigation-sync/`
+- 关键改进：
+  - 使用 `urlpattern-polyfill`（URLPattern）替代已停更的 `url-pattern`
+  - 逐步去除 `react18-use` 依赖（能用 React 原生能力就不额外引包）
+
+> 该插件属于“基础设施”，变更应通过 OpenSpec 管理，避免破坏性升级。
diff --git "a/docs/white-book/10-\347\224\237\346\200\201\347\257\207/02-BioSDK\345\274\200\345\217\221\346\214\207\345\215\227.md" "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/02-BioSDK\345\274\200\345\217\221\346\214\207\345\215\227.md"
new file mode 100644
index 00000000..9dfc247d
--- /dev/null
+++ "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/02-BioSDK\345\274\200\345\217\221\346\214\207\345\215\227.md"
@@ -0,0 +1,242 @@
+# BioSDK 开发指南
+
+## 安装
+
+```bash
+npm install @biochain/bio-sdk
+# 或
+pnpm add @biochain/bio-sdk
+```
+
+## 快速开始
+
+```typescript
+import '@biochain/bio-sdk'
+
+// window.bio 现在可用
+async function connect() {
+  const accounts = await window.bio.request({
+    method: 'bio_requestAccounts'
+  })
+  console.log('Connected accounts:', accounts)
+}
+```
+
+## API 参考
+
+### request(args)
+
+发起请求到钱包。
+
+```typescript
+const result = await window.bio.request<T>({
+  method: string,
+  params?: unknown[]
+})
+```
+
+### on(event, handler) / off(event, handler)
+
+订阅/取消订阅事件。
+
+```typescript
+window.bio.on('accountsChanged', (accounts) => {
+  console.log('Accounts changed:', accounts)
+})
+```
+
+## 方法列表
+
+### 钱包连接
+
+#### bio_requestAccounts
+
+请求连接钱包，显示授权 UI。
+
+```typescript
+const accounts = await window.bio.request<BioAccount[]>({
+  method: 'bio_requestAccounts'
+})
+// [{ address: '...', chain: 'bfmeta', name: 'My Wallet' }]
+```
+
+#### bio_accounts
+
+获取已连接的账户（无 UI）。
+
+```typescript
+const accounts = await window.bio.request<BioAccount[]>({
+  method: 'bio_accounts'
+})
+```
+
+### 地址选择
+
+#### bio_selectAccount
+
+显示账户选择器。
+
+```typescript
+const account = await window.bio.request<BioAccount>({
+  method: 'bio_selectAccount',
+  params: [{ chain: 'ethereum' }]  // 可选：限制链类型
+})
+```
+
+#### bio_pickWallet
+
+选择另一个钱包地址（用于转账目标）。
+
+```typescript
+const target = await window.bio.request<BioAccount>({
+  method: 'bio_pickWallet',
+  params: [{
+    chain: 'bfmeta',
+    exclude: currentAddress  // 排除当前地址
+  }]
+})
+```
+
+### 签名
+
+#### bio_signMessage
+
+签名消息。
+
+```typescript
+const signature = await window.bio.request<string>({
+  method: 'bio_signMessage',
+  params: [{
+    message: 'Hello, Bio!',
+    address: '...'
+  }]
+})
+```
+
+### 转账
+
+#### bio_sendTransaction
+
+发起转账。
+
+```typescript
+const result = await window.bio.request<{ txHash: string }>({
+  method: 'bio_sendTransaction',
+  params: [{
+    from: '...',
+    to: '...',
+    amount: '1.0',
+    chain: 'bfmeta',
+    asset: 'BFM'  // 可选，默认原生资产
+  }]
+})
+```
+
+### 交易流水线（必须）
+
+对于更复杂的业务（例如：后端广播、合约调用、多步签名），需要将“创建交易 / 签名交易 / 广播交易”拆开：
+
+1) `bio_createTransaction`：根据参数构造 **Unsigned Transaction**
+2) `bio_signTransaction`：对 Unsigned Transaction 做签名，得到 **Signed Transaction**
+3) 广播：可由 KeyApp（`bio_sendTransaction`）或 DApp 自己/后端负责（未来可扩展 `bio_sendRawTransaction`）
+
+#### bio_createTransaction
+
+创建未签名交易（不做签名、不做广播）。
+
+```typescript
+type BioUnsignedTransaction = {
+  chain: string
+  data: unknown
+}
+
+const unsignedTx = await window.bio.request<BioUnsignedTransaction>({
+  method: 'bio_createTransaction',
+  params: [{
+    from: '0x...',
+    to: '0x...',
+    amount: '0.01',
+    chain: 'ethereum'
+  }]
+})
+```
+
+#### bio_signTransaction
+
+对未签名交易进行签名（需要用户确认 + 钱包锁验证）。
+
+```typescript
+type BioSignedTransaction = {
+  chain: string
+  raw: string // 链特定的 raw tx（例如 EVM 的 RLP hex）
+  signature?: string
+}
+
+const signedTx = await window.bio.request<BioSignedTransaction>({
+  method: 'bio_signTransaction',
+  params: [{
+    from: '0x...',
+    chain: 'ethereum',
+    unsignedTx
+  }]
+})
+```
+
+## 事件
+
+### accountsChanged
+
+账户变更时触发。
+
+```typescript
+window.bio.on('accountsChanged', (accounts: BioAccount[]) => {
+  // 更新 UI
+})
+```
+
+### chainChanged
+
+链切换时触发。
+
+```typescript
+window.bio.on('chainChanged', (chainId: string) => {
+  // 刷新数据
+})
+```
+
+### connect / disconnect
+
+连接状态变更。
+
+```typescript
+window.bio.on('connect', ({ chainId }) => {
+  console.log('Connected to', chainId)
+})
+
+window.bio.on('disconnect', ({ code, message }) => {
+  console.log('Disconnected:', message)
+})
+```
+
+## 错误码
+
+| 代码 | 名称 | 说明 |
+|------|------|------|
+| 4001 | USER_REJECTED | 用户拒绝 |
+| 4100 | UNAUTHORIZED | 未授权 |
+| 4200 | UNSUPPORTED_METHOD | 不支持的方法 |
+| 4900 | DISCONNECTED | 断开连接 |
+| -32602 | INVALID_PARAMS | 无效参数 |
+| -32603 | INTERNAL_ERROR | 内部错误 |
+
+## TypeScript 支持
+
+```typescript
+import type { BioAccount, BioProvider } from '@biochain/bio-sdk'
+
+declare global {
+  interface Window {
+    bio?: BioProvider
+  }
+}
+```
diff --git "a/docs/white-book/10-\347\224\237\346\200\201\347\257\207/03-\345\260\217\347\250\213\345\272\217\345\274\200\345\217\221.md" "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/03-\345\260\217\347\250\213\345\272\217\345\274\200\345\217\221.md"
new file mode 100644
index 00000000..7f6e748d
--- /dev/null
+++ "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/03-\345\260\217\347\250\213\345\272\217\345\274\200\345\217\221.md"
@@ -0,0 +1,179 @@
+# 小程序开发
+
+## 项目结构
+
+```
+miniapps/my-app/
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+├── index.html
+└── src/
+    ├── main.tsx
+    └── App.tsx
+```
+
+## 创建新小程序
+
+### 1. 初始化项目
+
+```bash
+mkdir miniapps/my-app
+cd miniapps/my-app
+pnpm init
+```
+
+### 2. 安装依赖
+
+```bash
+pnpm add @biochain/bio-sdk react react-dom
+pnpm add -D @vitejs/plugin-react typescript vite
+```
+
+### 3. 配置 Vite
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/miniapps/my-app/',  // 重要：设置正确的 base path
+  build: {
+    outDir: resolve(__dirname, '../../public/miniapps/my-app'),
+    emptyOutDir: true,
+  },
+})
+```
+
+### 4. 入口文件
+
+```tsx
+// src/main.tsx
+import '@biochain/bio-sdk'  // 注入 window.bio
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(<App />)
+```
+
+### 5. 应用代码
+
+```tsx
+// src/App.tsx
+import { useState } from 'react'
+import type { BioAccount } from '@biochain/bio-sdk'
+
+export default function App() {
+  const [account, setAccount] = useState<BioAccount | null>(null)
+
+  const connect = async () => {
+    const accounts = await window.bio!.request<BioAccount[]>({
+      method: 'bio_requestAccounts'
+    })
+    setAccount(accounts[0] ?? null)
+  }
+
+  return (
+    <div>
+      {account ? (
+        <p>已连接: {account.address}</p>
+      ) : (
+        <button onClick={connect}>连接钱包</button>
+      )}
+    </div>
+  )
+}
+```
+
+## 构建与部署
+
+```bash
+# 开发
+pnpm dev
+
+# 构建到 public/miniapps/
+pnpm build
+```
+
+## 注册小程序
+
+### AppId 命名规范（必须）
+
+`appId` 必须采用“**反向域名**”命名，以避免 appId 被盗取/覆盖：
+
+- 若应用官网为 `my-app.domain.com`，则 `appId` 必须是 `com.domain.my-app`
+- 示例：`https://teleport.dweb.xin` → `xin.dweb.teleport`
+
+> 这是平台级安全约束：一旦应用发布，`appId` 不应随意变更。
+
+### 注册表来源
+
+KeyApp 通过 **Vite 插件**在开发/构建时自动生成并提供 `GET /ecosystem.json`：
+- Dev：Vite middleware 动态生成（方便本地调试）
+- Build：构建产物中生成静态 `ecosystem.json`（用于发布/离线）
+
+因此内置小程序注册信息应写在 `miniapps/<app>/manifest.json` 中，而不是手动维护 `public/ecosystem.json`。
+
+```json
+{
+  "apps": [
+    {
+      "id": "my-app",
+      "name": "我的小程序",
+      "description": "...",
+      "icon": "/miniapps/my-app/icon.svg",
+      "url": "/miniapps/my-app/",
+      "version": "0.1.0",
+      "permissions": ["bio_requestAccounts"],
+      "chains": ["bfmeta"]
+    }
+  ]
+}
+```
+
+## 最佳实践
+
+### 1. 处理未初始化状态
+
+```typescript
+if (!window.bio) {
+  // 显示错误或等待
+  return <div>请在 KeyApp 中打开</div>
+}
+```
+
+### 2. 错误处理
+
+```typescript
+try {
+  await window.bio.request({ method: 'bio_signMessage', params: [...] })
+} catch (error) {
+  if (error.code === 4001) {
+    // 用户拒绝
+  }
+}
+```
+
+### 3. 响应式设计
+
+小程序运行在 iframe 中，需要适配移动端和 WebView：
+
+```css
+body {
+  min-height: 100vh;
+  touch-action: manipulation;
+}
+```
+
+### 4. 最小权限原则
+
+只请求必要的权限：
+
+```json
+{
+  "permissions": ["bio_requestAccounts"]  // 只声明需要的
+}
+```
diff --git "a/docs/white-book/10-\347\224\237\346\200\201\347\257\207/04-\350\256\242\351\230\205\347\263\273\347\273\237.md" "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/04-\350\256\242\351\230\205\347\263\273\347\273\237.md"
new file mode 100644
index 00000000..07a5a953
--- /dev/null
+++ "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/04-\350\256\242\351\230\205\347\263\273\347\273\237.md"
@@ -0,0 +1,199 @@
+# 订阅系统
+
+## 概述
+
+订阅系统允许用户添加多个“小程序可信源”，将不同来源的小程序聚合展示在“生态”页面。
+
+本系统的设计参考 **SSR 的订阅原理**：
+- **配置在本地**：用户在设置页维护可信源列表（可启用/禁用多个 URL）。
+- **数据可缓存**：客户端会在本地缓存订阅源数据（用于离线与快速启动）。
+- **可增量刷新**：优先使用 ETag/Last-Modified 等机制减少流量；必要时强制刷新。
+
+> 当前版本先实现“可信源 + 本地缓存 + 基础聚合”，后续逐步增强评分、精选、搜索等能力。
+
+## 订阅源格式
+
+```typescript
+interface EcosystemSource {
+  name: string           // 源名称
+  version: string        // 版本
+  updated: string        // 更新时间 (ISO 8601)
+  icon?: string          // 源图标（可选）
+  search?: {             // 可选：远程搜索能力（用于搜索订阅列表以外的应用）
+    urlTemplate: string  // 搜索 URL 模板（固定 GET），使用 %s 替换 query
+  }
+  apps: MiniappManifest[]
+}
+
+interface MiniappManifest {
+  id: string             // 唯一标识
+  name: string           // 显示名称
+  description: string    // 描述
+  icon: string           // 图标 URL
+  url: string            // 入口 URL
+  version: string        // 版本
+  author?: string        // 作者
+  permissions?: string[] // 需要的权限
+  chains?: string[]      // 支持的链
+  officialScore?: number // 推荐分（官方评分，0-100，可选）
+  communityScore?: number// 热门分（社区评分，0-100，可选）
+}
+
+interface EcosystemSearchResponse {
+  version: string
+  data: MiniappManifest[]
+}
+```
+
+## 示例
+
+```json
+{
+  "name": "Bio 官方生态",
+  "version": "1.0.0",
+  "updated": "2024-12-27",
+  "icon": "/logo.svg",
+  "search": {
+    "urlTemplate": "https://example.com/ecosystem/search?q=%s"
+  },
+  "apps": [
+    {
+      "id": "teleport",
+      "name": "一键传送",
+      "description": "跨钱包资产转移",
+      "icon": "/miniapps/teleport/icon.svg",
+      "url": "/miniapps/teleport/",
+      "version": "0.1.0",
+      "permissions": ["bio_requestAccounts", "bio_signMessage"],
+      "chains": ["bfmeta", "bfchainv2"],
+      "officialScore": 90,
+      "communityScore": 80
+    }
+  ]
+}
+```
+
+## 可信源管理
+
+### 添加订阅
+
+1. 打开设置 → 小程序可信源
+2. 输入订阅 URL
+3. 确认添加
+
+### 订阅验证
+
+- 检查 HTTPS
+- 验证 JSON 格式
+- 检查必要字段
+
+### 安全考虑
+
+- 只允许 HTTPS 源（本地开发除外）
+- 显示源来源标识
+- 用户需确认权限
+
+## 本地缓存（SSR 订阅原理）
+
+为了让“生态”页具备良好的启动性能与离线可用性，订阅源数据需要缓存到本地：
+
+- **缓存介质**：优先使用 IndexedDB（容量更大，结构化更友好）。
+- **缓存粒度**：按 source URL 缓存整份 `EcosystemSource`（包含 apps 列表）。
+- **刷新策略**：
+  - 默认刷新：携带 `If-None-Match`（ETag）请求；`304` 时复用缓存。
+  - 强制刷新：忽略 ETag，重新拉取并覆盖缓存。
+
+> 关键原则：**设置页只管理“可信源配置”**；“订阅内容/评分/精选/搜索”由订阅服务层统一计算并缓存（避免 UI 各处自己拼逻辑，DRY）。
+
+## 展示策略：部分列出 + 评分精选
+
+当前“订阅源”聚合不应直接“全量列出”。推荐采用**部分列出**：
+
+- **推荐分（官方评分）**：`officialScore`（0-100）
+- **热门分（社区评分）**：`communityScore`（0-100）
+- **综合分（精选）**：按“日期动态权重”计算（见下）
+
+“精选”列表按 `featuredScore` 降序取 Top N；“推荐/热门”按各自评分取 Top N。
+
+### 日期动态权重（官方/社区）
+
+为避免长期固定权重导致的“推荐固化”，综合分可按日期进行动态加权：
+
+- Day 1：`15 / 85`
+- Day 2：`30 / 70`
+- 每天在“官方权重”基础上 `+15` 并对 `100` 取模循环：
+  - `15, 30, 45, 60, 75, 90, 5, 20, 35, ...`
+
+定义：
+
+- `officialWeightPct = (officialWeightPct + 15) % 100`（初始值可为 `0`）
+- `communityWeightPct = 100 - officialWeightPct`
+- `featuredScore = (officialScore * officialWeightPct + communityScore * communityWeightPct) / 100`
+
+## 搜索：订阅列表以外的应用
+
+除了在本地缓存的 apps 内搜索（快速、离线可用），还需要支持**远程搜索**：
+
+- 每个订阅源可以提供 `search.urlTemplate`（固定 GET），用于查询“订阅列表以外”的应用（例如官方全站搜索）。
+  - 配置方式类似浏览器搜索引擎：`https://example.com/search?q=%s`
+  - Host 侧需要对 query 做 URL 编码后替换 `%s`
+- Host 侧提供统一的搜索函数：
+  - 先本地搜索（cached apps）
+  - 再并行调用启用源的 `search.urlTemplate`（如果存在）
+  - 合并去重后返回（按相关性/评分排序）
+
+远程搜索响应建议使用带版本的结构，保证协议升级时的兼容性：
+
+```typescript
+type EcosystemSearchResponse = {
+  version: string
+  data: MiniappManifest[]
+}
+```
+
+> 远程搜索属于“增强能力”，但接口定义应尽早固定，避免后续破坏性变更（OCP）。
+
+## 存储结构
+
+```typescript
+interface EcosystemStore {
+  sources: {
+    url: string          // 订阅 URL
+    name: string         // 源名称
+    lastUpdated: string  // 最后更新时间
+    enabled: boolean     // 是否启用
+  }[]
+  permissions: {
+    appId: string        // 小程序 ID
+    granted: string[]    // 已授权的权限
+  }[]
+}
+```
+
+## API
+
+```typescript
+// 加载订阅源
+async function loadSource(url: string): Promise<EcosystemSource>
+
+// 刷新所有源
+async function refreshSources(): Promise<void>
+
+// 获取所有小程序
+async function getAllApps(): Promise<MiniappManifest[]>
+
+// 获取精选应用（综合分 Top N）
+async function getFeaturedApps(limit: number): Promise<MiniappManifest[]>
+
+// 本地搜索（订阅缓存内）
+async function searchCachedApps(query: string): Promise<MiniappManifest[]>
+
+// 远程搜索（订阅列表以外）
+async function searchRemoteApps(query: string): Promise<MiniappManifest[]>
+
+// 检查权限
+function hasPermission(appId: string, permission: string): boolean
+
+// 授予权限
+function grantPermissions(appId: string, permissions: string[]): void
+```
diff --git "a/docs/white-book/10-\347\224\237\346\200\201\347\257\207/05-\345\256\236\347\216\260\347\212\266\346\200\201.md" "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/05-\345\256\236\347\216\260\347\212\266\346\200\201.md"
new file mode 100644
index 00000000..abc76b4e
--- /dev/null
+++ "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/05-\345\256\236\347\216\260\347\212\266\346\200\201.md"
@@ -0,0 +1,138 @@
+# 实现状态
+
+## 已完成
+
+### Phase 1: 基础设施 ✅
+
+| 组件 | 路径 | 状态 |
+|------|------|------|
+| Monorepo 配置 | `pnpm-workspace.yaml` | ✅ 完成 |
+| Bio SDK 包 | `packages/bio-sdk/` | ✅ 完成 |
+| 一键传送小程序 | `miniapps/teleport/` | ✅ 完成 |
+| 锻造小程序 | `miniapps/forge/` | ✅ 完成 |
+| 订阅源配置 | `public/ecosystem.json` | ✅ 完成 |
+
+### Phase 2: Host Provider ✅
+
+| 组件 | 路径 | 状态 |
+|------|------|------|
+| 类型定义 | `src/services/ecosystem/types.ts` | ✅ 完成 |
+| PostMessage Bridge | `src/services/ecosystem/bridge.ts` | ✅ 完成 |
+| Wallet Handlers | `src/services/ecosystem/handlers/wallet.ts` | ✅ 完成 |
+| Signing Handlers | `src/services/ecosystem/handlers/signing.ts` | ✅ 完成 |
+| Transfer Handlers | `src/services/ecosystem/handlers/transfer.ts` | ✅ 完成 |
+| Registry | `src/services/ecosystem/registry.ts` | ✅ 完成 |
+| Provider Entry | `src/services/ecosystem/provider.ts` | ✅ 完成 |
+
+### Phase 3: UI 集成 ✅
+
+| 组件 | 路径 | 状态 |
+|------|------|------|
+| EcosystemTab | `src/stackflow/activities/tabs/EcosystemTab.tsx` | ✅ 完成 |
+| MiniappActivity | `src/stackflow/activities/MiniappActivity.tsx` | ✅ 完成 |
+| MiniappPage | `src/pages/ecosystem/miniapp.tsx` | ✅ 完成 |
+| TabBar 更新 | `src/stackflow/components/TabBar.tsx` | ✅ 完成 |
+| 路由注册 | `src/stackflow/stackflow.ts` | ✅ 完成 |
+
+### 测试 ✅
+
+| 测试文件 | 覆盖内容 |
+|----------|----------|
+| `types.test.ts` | 错误码、响应构造函数 |
+| `bridge.test.ts` | Handler 注册、iframe 绑定、事件发送 |
+| `registry.test.ts` | 源管理、刷新、应用查询 |
+
+### Phase 4: UI 对话框 ✅
+
+| 组件 | 路径 | 状态 |
+|------|------|------|
+| AccountPickerJob | `src/stackflow/activities/sheets/AccountPickerJob.tsx` | ✅ 完成 |
+| SigningConfirmJob | `src/stackflow/activities/sheets/SigningConfirmJob.tsx` | ✅ 完成 |
+| PermissionRequestJob | `src/stackflow/activities/sheets/PermissionRequestJob.tsx` | ✅ 完成 |
+| MiniappPage 回调注册 | `src/pages/ecosystem/miniapp.tsx` | ✅ 完成 |
+
+### Phase 5: 权限与架构 ✅
+
+| 组件 | 路径 | 状态 |
+|------|------|------|
+| EcosystemStore | `src/stores/ecosystem.ts` | ✅ 完成 |
+| 权限控制模块 | `src/services/ecosystem/permissions.ts` | ✅ 完成 |
+| Bridge 权限检查 | `src/services/ecosystem/bridge.ts` | ✅ 完成 |
+| HandlerContext | `src/services/ecosystem/handlers/context.ts` | ✅ 完成 |
+| Handler 重构 | `src/services/ecosystem/handlers/*.ts` | ✅ 完成 |
+
+### Phase 6: 功能完善 ✅
+
+| 组件 | 路径 | 状态 |
+|------|------|------|
+| MiniappTransferConfirmJob | `src/stackflow/activities/sheets/MiniappTransferConfirmJob.tsx` | ✅ 完成 |
+| SettingsSourcesActivity | `src/stackflow/activities/SettingsSourcesActivity.tsx` | ✅ 完成 |
+| 设置页入口 | `src/pages/settings/index.tsx` | ✅ 完成 |
+
+## 待完成
+
+### Phase 7: 后续优化
+
+- [ ] 实际签名服务集成（需要钱包解锁流程）
+- [ ] 实际转账服务集成
+- [ ] 订阅系统 v2：本地缓存（IndexedDB + ETag）
+- [ ] 订阅系统 v2：评分模型（official/community/featured）+ 部分列出策略
+- [ ] 订阅系统 v2：搜索接口（订阅列表以外的应用）
+- [ ] 交易流水线：createTransaction + signTransaction（不可省略）
+- [ ] AppId 命名规范（反向域名）校验与迁移策略
+- [ ] 自维护导航同步插件：`packages/plugin-navigation-sync`（URLPattern polyfill）
+
+### Phase 8: 小程序完善
+
+- [ ] 一键传送后端 API 集成
+- [ ] 锻造后端 API 集成
+- [ ] E2E 测试
+
+### Phase 9: DWEB 集成
+
+- [ ] Transport 抽象层
+- [ ] DWEB 适配器
+
+## 构建命令
+
+```bash
+# SDK
+pnpm sdk:build           # 构建 SDK
+pnpm sdk:dev             # 监听模式
+
+# 小程序
+pnpm miniapps:build      # 构建所有小程序
+pnpm miniapps:dev:teleport   # 开发一键传送
+pnpm miniapps:dev:forge      # 开发锻造
+
+# 测试
+pnpm test -- --testPathPattern=ecosystem
+```
+
+## 目录结构
+
+```
+packages/
+└── bio-sdk/                 # @biochain/bio-sdk
+    ├── src/
+    │   ├── index.ts         # 入口，注入 window.bio
+    │   ├── types.ts         # 类型定义
+    │   ├── provider.ts      # BioProvider 实现
+    │   └── events.ts        # 事件发射器
+    └── dist/                # 构建输出
+
+miniapps/
+├── teleport/                # 一键传送
+└── forge/                   # 锻造
+
+src/services/ecosystem/
+├── types.ts                 # Host 端类型
+├── bridge.ts                # PostMessage 通信
+├── provider.ts              # Provider 初始化
+├── registry.ts              # 小程序注册表
+├── handlers/
+│   ├── wallet.ts            # 钱包方法
+│   ├── signing.ts           # 签名方法
+│   └── transfer.ts          # 转账方法
+└── __tests__/               # 单元测试
+```
diff --git "a/docs/white-book/10-\347\224\237\346\200\201\347\257\207/index.md" "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/index.md"
new file mode 100644
index 00000000..9cdf2885
--- /dev/null
+++ "b/docs/white-book/10-\347\224\237\346\200\201\347\257\207/index.md"
@@ -0,0 +1,24 @@
+# Bio 生态系统
+
+> 本章节介绍 Bio 小程序生态系统的架构设计和开发指南。
+
+## 概述
+
+Bio 生态是一个基于 iframe 的小程序平台，为第三方开发者提供类似 Web3 DApp 的开发体验。小程序通过 `window.bio` SDK 与 KeyApp 钱包进行通信。
+
+## 核心组件
+
+| 组件 | 路径 | 说明 |
+|------|------|------|
+| Bio SDK | `packages/bio-sdk/` | 小程序客户端 SDK |
+| Provider | `src/services/ecosystem/` | KeyApp 宿主端服务 |
+| 小程序 | `miniapps/` | 内置小程序 |
+| 订阅源 | `public/ecosystem.json` | 小程序注册表 |
+
+## 目录
+
+- [01-架构设计](./01-架构设计.md)
+- [02-BioSDK开发指南](./02-BioSDK开发指南.md)
+- [03-小程序开发](./03-小程序开发.md)
+- [04-订阅系统](./04-订阅系统.md)
+- [05-实现状态](./05-实现状态.md)
diff --git a/docs/white-book/index.md b/docs/white-book/index.md
index 1767286b..c6d8e393 100644
--- a/docs/white-book/index.md
+++ b/docs/white-book/index.md
@@ -118,6 +118,18 @@
 | [03 数据迁移](./09-部署篇/03-数据迁移/) | 版本化存储、迁移策略、向后兼容 |
 | [04 监控告警](./09-部署篇/04-监控告警/) | 埋点规范、性能监控、告警规则 |
 
+### [第十篇：生态篇](./10-生态篇/)
+
+定义产品的「小程序生态系统」。
+
+| 章节 | 内容 |
+|-----|------|
+| [01 架构设计](./10-生态篇/01-架构设计.md) | 系统架构、通信协议、安全模型 |
+| [02 BioSDK开发指南](./10-生态篇/02-BioSDK开发指南.md) | API 参考、方法列表、事件 |
+| [03 小程序开发](./10-生态篇/03-小程序开发.md) | 项目结构、构建部署、最佳实践 |
+| [04 订阅系统](./10-生态篇/04-订阅系统.md) | 源格式、可信源管理 |
+| [05 实现状态](./10-生态篇/05-实现状态.md) | 完成进度、待办事项 |
+
 ### [附录](./附录/)
 
 | 附录 | 内容 |
diff --git a/e2e/__screenshots__/Desktop-Chrome/authorize.mock.spec.ts/authorize-wallet-selector-main.png b/e2e/__screenshots__/Desktop-Chrome/authorize.mock.spec.ts/authorize-wallet-selector-main.png
new file mode 100644
index 00000000..78701eda
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/authorize.mock.spec.ts/authorize-wallet-selector-main.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/01-home-with-ecosystem-tab.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/01-home-with-ecosystem-tab.png
new file mode 100644
index 00000000..fd65bb11
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/01-home-with-ecosystem-tab.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02-ecosystem-tab-content.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02-ecosystem-tab-content.png
new file mode 100644
index 00000000..562bff0b
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02-ecosystem-tab-content.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02b-ecosystem-my-tab.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02b-ecosystem-my-tab.png
new file mode 100644
index 00000000..b4126d54
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02b-ecosystem-my-tab.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02c-ecosystem-context-menu.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02c-ecosystem-context-menu.png
new file mode 100644
index 00000000..d980cc48
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02c-ecosystem-context-menu.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02d-context-menu-open.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02d-context-menu-open.png
new file mode 100644
index 00000000..54e94e53
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02d-context-menu-open.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02e-context-menu-detail.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02e-context-menu-detail.png
new file mode 100644
index 00000000..be6f24d8
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02e-context-menu-detail.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02f-context-menu-remove.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02f-context-menu-remove.png
new file mode 100644
index 00000000..6b3508a5
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/02f-context-menu-remove.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/03-wallet-picker.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/03-wallet-picker.png
new file mode 100644
index 00000000..77d9f385
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/03-wallet-picker.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/04-signing-confirm.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/04-signing-confirm.png
new file mode 100644
index 00000000..537119df
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/04-signing-confirm.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/05-signing-wallet-lock.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/05-signing-wallet-lock.png
new file mode 100644
index 00000000..2c24e843
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/05-signing-wallet-lock.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/06-transfer-confirm.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/06-transfer-confirm.png
new file mode 100644
index 00000000..7eae99aa
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/06-transfer-confirm.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/07-trusted-sources.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/07-trusted-sources.png
new file mode 100644
index 00000000..8031b888
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/07-trusted-sources.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/08-multi-wallet-picker.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/08-multi-wallet-picker.png
new file mode 100644
index 00000000..3bcf14a3
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/08-multi-wallet-picker.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/09-ethereum-only-picker.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/09-ethereum-only-picker.png
new file mode 100644
index 00000000..2adf59b2
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/09-ethereum-only-picker.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/10-long-message-signing.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/10-long-message-signing.png
new file mode 100644
index 00000000..b7c545ea
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/10-long-message-signing.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/11-large-amount-transfer.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/11-large-amount-transfer.png
new file mode 100644
index 00000000..70dfd57d
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/11-large-amount-transfer.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/12-small-amount-transfer.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/12-small-amount-transfer.png
new file mode 100644
index 00000000..e9abdb27
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/12-small-amount-transfer.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/13-permission-request.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/13-permission-request.png
new file mode 100644
index 00000000..c39fc70a
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/13-permission-request.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/14-empty-wallet-picker.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/14-empty-wallet-picker.png
new file mode 100644
index 00000000..f34811a4
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/14-empty-wallet-picker.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/15-hex-data-warning.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/15-hex-data-warning.png
new file mode 100644
index 00000000..1bc39282
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/15-hex-data-warning.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/16-miniapp-detail.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/16-miniapp-detail.png
new file mode 100644
index 00000000..80a4354b
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/16-miniapp-detail.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/17-miniapp-detail-permissions.png b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/17-miniapp-detail-permissions.png
new file mode 100644
index 00000000..2701a5e2
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/ecosystem-miniapp.mock.spec.ts/17-miniapp-detail-permissions.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-01-connect.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-01-connect.png
new file mode 100644
index 00000000..69af7595
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-01-connect.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-02-connect-dark.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-02-connect-dark.png
new file mode 100644
index 00000000..69af7595
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-02-connect-dark.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-03-green-theme.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-03-green-theme.png
new file mode 100644
index 00000000..69af7595
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-03-green-theme.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-04-dark-purple-theme.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-04-dark-purple-theme.png
new file mode 100644
index 00000000..45ff96c5
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/forge-04-dark-purple-theme.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-01-connect.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-01-connect.png
new file mode 100644
index 00000000..ba2b7204
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-01-connect.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-02-connect-dark.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-02-connect-dark.png
new file mode 100644
index 00000000..ba2b7204
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-02-connect-dark.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-03-connect-blue-theme.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-03-connect-blue-theme.png
new file mode 100644
index 00000000..ba2b7204
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-03-connect-blue-theme.png differ
diff --git a/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-04-green-theme.png b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-04-green-theme.png
new file mode 100644
index 00000000..5059f7a6
Binary files /dev/null and b/e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts/teleport-04-green-theme.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/authorize.mock.spec.ts/authorize-wallet-selector-main.png b/e2e/__screenshots__/Mobile-Chrome/authorize.mock.spec.ts/authorize-wallet-selector-main.png
new file mode 100644
index 00000000..558ec23d
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/authorize.mock.spec.ts/authorize-wallet-selector-main.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/01-home-with-ecosystem-tab.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/01-home-with-ecosystem-tab.png
new file mode 100644
index 00000000..2ab47f33
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/01-home-with-ecosystem-tab.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02-ecosystem-tab-content.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02-ecosystem-tab-content.png
new file mode 100644
index 00000000..1c145e9c
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02-ecosystem-tab-content.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02b-ecosystem-my-tab.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02b-ecosystem-my-tab.png
new file mode 100644
index 00000000..b870f232
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02b-ecosystem-my-tab.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02c-ecosystem-context-menu.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02c-ecosystem-context-menu.png
new file mode 100644
index 00000000..f6e9b22e
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02c-ecosystem-context-menu.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02d-context-menu-open.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02d-context-menu-open.png
new file mode 100644
index 00000000..63617773
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02d-context-menu-open.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02e-context-menu-detail.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02e-context-menu-detail.png
new file mode 100644
index 00000000..024fbd4c
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02e-context-menu-detail.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02f-context-menu-remove.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02f-context-menu-remove.png
new file mode 100644
index 00000000..e138c2b6
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/02f-context-menu-remove.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/03-wallet-picker.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/03-wallet-picker.png
new file mode 100644
index 00000000..70905aa9
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/03-wallet-picker.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/04-signing-confirm.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/04-signing-confirm.png
new file mode 100644
index 00000000..07850121
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/04-signing-confirm.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/05-signing-wallet-lock.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/05-signing-wallet-lock.png
new file mode 100644
index 00000000..f602f1b7
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/05-signing-wallet-lock.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/06-transfer-confirm.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/06-transfer-confirm.png
new file mode 100644
index 00000000..ab34954f
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/06-transfer-confirm.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/07-trusted-sources.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/07-trusted-sources.png
new file mode 100644
index 00000000..50b8d2ad
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/07-trusted-sources.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/08-multi-wallet-picker.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/08-multi-wallet-picker.png
new file mode 100644
index 00000000..4e35b346
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/08-multi-wallet-picker.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/09-ethereum-only-picker.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/09-ethereum-only-picker.png
new file mode 100644
index 00000000..e8edcd54
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/09-ethereum-only-picker.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/10-long-message-signing.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/10-long-message-signing.png
new file mode 100644
index 00000000..341021a3
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/10-long-message-signing.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/11-large-amount-transfer.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/11-large-amount-transfer.png
new file mode 100644
index 00000000..13f53f31
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/11-large-amount-transfer.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/12-small-amount-transfer.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/12-small-amount-transfer.png
new file mode 100644
index 00000000..ab87cc55
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/12-small-amount-transfer.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/13-permission-request.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/13-permission-request.png
new file mode 100644
index 00000000..97d752be
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/13-permission-request.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/14-empty-wallet-picker.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/14-empty-wallet-picker.png
new file mode 100644
index 00000000..683df1b9
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/14-empty-wallet-picker.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/15-hex-data-warning.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/15-hex-data-warning.png
new file mode 100644
index 00000000..63eca1f2
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/15-hex-data-warning.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/16-miniapp-detail.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/16-miniapp-detail.png
new file mode 100644
index 00000000..b121378c
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/16-miniapp-detail.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/17-miniapp-detail-permissions.png b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/17-miniapp-detail-permissions.png
new file mode 100644
index 00000000..0fae1a77
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/ecosystem-miniapp.mock.spec.ts/17-miniapp-detail-permissions.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-01-connect.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-01-connect.png
new file mode 100644
index 00000000..69af7595
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-01-connect.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-02-connect-dark.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-02-connect-dark.png
new file mode 100644
index 00000000..69af7595
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-02-connect-dark.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-03-green-theme.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-03-green-theme.png
new file mode 100644
index 00000000..69af7595
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-03-green-theme.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-04-dark-purple-theme.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-04-dark-purple-theme.png
new file mode 100644
index 00000000..69af7595
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/forge-04-dark-purple-theme.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-01-connect.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-01-connect.png
new file mode 100644
index 00000000..ba2b7204
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-01-connect.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-02-connect-dark.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-02-connect-dark.png
new file mode 100644
index 00000000..ba2b7204
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-02-connect-dark.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-03-connect-blue-theme.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-03-connect-blue-theme.png
new file mode 100644
index 00000000..ba2b7204
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-03-connect-blue-theme.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-04-green-theme.png b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-04-green-theme.png
new file mode 100644
index 00000000..ba2b7204
Binary files /dev/null and b/e2e/__screenshots__/Mobile-Chrome/miniapp-ui.mock.spec.ts/teleport-04-green-theme.png differ
diff --git a/e2e/__screenshots__/Mobile-Chrome/wallet-create.spec.ts/import-01-mnemonic-input.png b/e2e/__screenshots__/Mobile-Chrome/wallet-create.spec.ts/import-01-mnemonic-input.png
deleted file mode 100644
index 8cf58c37..00000000
Binary files a/e2e/__screenshots__/Mobile-Chrome/wallet-create.spec.ts/import-01-mnemonic-input.png and /dev/null differ
diff --git a/e2e/ecosystem-miniapp.mock.spec.ts b/e2e/ecosystem-miniapp.mock.spec.ts
new file mode 100644
index 00000000..4a924306
--- /dev/null
+++ b/e2e/ecosystem-miniapp.mock.spec.ts
@@ -0,0 +1,725 @@
+import { test, expect } from '@playwright/test'
+
+/**
+ * Bio 小程序生态 E2E 截图测试
+ *
+ * 测试用户故事并生成截图验证 UI 正确性
+ */
+
+const TEST_WALLET_DATA = {
+  wallets: [
+    {
+      id: 'test-wallet-1',
+      name: '测试钱包',
+      keyType: 'mnemonic',
+      address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      chain: 'bfmeta',
+      chainAddresses: [
+        {
+          chain: 'bfmeta',
+          address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+          tokens: [
+            { id: 'bfmeta:BFM', symbol: 'BFM', name: 'BFM', balance: '100.0', fiatValue: 100, change24h: 0, decimals: 8, chain: 'bfmeta' },
+          ],
+        },
+        {
+          chain: 'ethereum',
+          address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+          tokens: [
+            { id: 'ethereum:ETH', symbol: 'ETH', name: 'Ethereum', balance: '10.0', fiatValue: 30000, change24h: 0, decimals: 18, chain: 'ethereum' },
+          ],
+        },
+      ],
+      encryptedMnemonic: {
+        ciphertext: 'bWVzc2FnZSB0ZXN0',
+        iv: 'aXYtdGVzdA==',
+        salt: 'c2FsdC10ZXN0',
+        iterations: 100000,
+      },
+      createdAt: 1700000000000,
+      themeHue: 200,
+      tokens: [],
+    },
+  ],
+  currentWalletId: 'test-wallet-1',
+  selectedChain: 'bfmeta',
+  chainPreferences: {},
+  isLoading: false,
+  isInitialized: true,
+}
+
+const TEST_ECOSYSTEM_DATA = {
+  sources: [
+    {
+      url: 'https://localhost:11174/ecosystem.json',
+      name: '本地测试源',
+      enabled: true,
+      lastUpdated: Date.now(),
+    },
+  ],
+  permissions: [],
+}
+
+async function injectTestData(page: import('@playwright/test').Page) {
+  await page.addInitScript((data) => {
+    localStorage.clear()
+    localStorage.setItem('bfm_wallets', JSON.stringify(data.wallet))
+    localStorage.setItem('bfm_ecosystem', JSON.stringify(data.ecosystem))
+  }, { wallet: TEST_WALLET_DATA, ecosystem: TEST_ECOSYSTEM_DATA })
+}
+
+test.describe('生态 Tab 截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('首页 - 生态 Tab 可见', async ({ page }) => {
+    await page.goto('/#/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+    
+    await expect(page).toHaveScreenshot('01-home-with-ecosystem-tab.png')
+  })
+
+  test('生态页面 - 发现 Tab', async ({ page }) => {
+    await page.goto('/#/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 点击生态 Tab (底部导航栏中间的按钮)
+    const ecosystemTab = page.getByTestId('tab-ecosystem')
+    await ecosystemTab.click()
+    await page.waitForTimeout(500)
+
+    await expect(page).toHaveScreenshot('02-ecosystem-tab-content.png')
+  })
+
+  test('生态页面 - 我的 Tab', async ({ page }) => {
+    // 先添加一些"我的应用"数据
+    await page.addInitScript(() => {
+      localStorage.setItem('ecosystem_my_apps', JSON.stringify([
+        { appId: 'xin.dweb.teleport', installedAt: Date.now() - 3600000, lastUsedAt: Date.now() - 1800000 },
+        { appId: 'xin.dweb.forge', installedAt: Date.now() - 7200000, lastUsedAt: Date.now() - 3600000 },
+      ]))
+    })
+    
+    await page.goto('/#/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 点击生态 Tab
+    const ecosystemTab = page.getByTestId('tab-ecosystem')
+    await ecosystemTab.click()
+    await page.waitForTimeout(500)
+
+    // 点击"我的" Tab
+    const myTab = page.locator('button:has-text("我的")')
+    await myTab.click()
+    await page.waitForTimeout(500)
+
+    await expect(page).toHaveScreenshot('02b-ecosystem-my-tab.png')
+  })
+
+  test('生态页面 - 长按菜单', async ({ page }) => {
+    // 添加"我的应用"数据
+    await page.addInitScript(() => {
+      localStorage.setItem('ecosystem_my_apps', JSON.stringify([
+        { appId: 'xin.dweb.teleport', installedAt: Date.now() - 3600000, lastUsedAt: Date.now() - 1800000 },
+        { appId: 'xin.dweb.forge', installedAt: Date.now() - 7200000, lastUsedAt: Date.now() - 3600000 },
+      ]))
+    })
+    
+    await page.goto('/#/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 点击生态 Tab
+    const ecosystemTab = page.getByTestId('tab-ecosystem')
+    await ecosystemTab.click()
+    await page.waitForTimeout(500)
+
+    // 点击"我的" Tab
+    const myTab = page.locator('button:has-text("我的")')
+    await myTab.click()
+    await page.waitForTimeout(500)
+
+    // 右键点击第一个应用图标触发 Context Menu
+    const firstAppIcon = page.locator('[data-testid="ios-app-icon-xin.dweb.teleport"]')
+    await firstAppIcon.click({ button: 'right' })
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('02c-ecosystem-context-menu.png')
+  })
+
+  test('长按菜单 - 点击打开', async ({ page }) => {
+    // 添加"我的应用"数据
+    await page.addInitScript(() => {
+      localStorage.setItem('ecosystem_my_apps', JSON.stringify([
+        { appId: 'xin.dweb.teleport', installedAt: Date.now() - 3600000, lastUsedAt: Date.now() - 1800000 },
+      ]))
+    })
+    
+    await page.goto('/#/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 进入生态 - 我的
+    await page.getByTestId('tab-ecosystem').click()
+    await page.waitForTimeout(300)
+    await page.locator('button:has-text("我的")').click()
+    await page.waitForTimeout(300)
+
+    // 右键菜单 -> 打开
+    await page.locator('[data-testid="ios-app-icon-xin.dweb.teleport"]').click({ button: 'right' })
+    await page.waitForTimeout(200)
+    await page.locator('button:has-text("打开")').click()
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('02d-context-menu-open.png')
+  })
+
+  test('长按菜单 - 点击详情', async ({ page }) => {
+    // 添加"我的应用"数据
+    await page.addInitScript(() => {
+      localStorage.setItem('ecosystem_my_apps', JSON.stringify([
+        { appId: 'xin.dweb.teleport', installedAt: Date.now() - 3600000, lastUsedAt: Date.now() - 1800000 },
+      ]))
+    })
+    
+    await page.goto('/#/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 进入生态 - 我的
+    await page.getByTestId('tab-ecosystem').click()
+    await page.waitForTimeout(300)
+    await page.locator('button:has-text("我的")').click()
+    await page.waitForTimeout(300)
+
+    // 右键菜单 -> 详情
+    await page.locator('[data-testid="ios-app-icon-xin.dweb.teleport"]').click({ button: 'right' })
+    await page.waitForTimeout(200)
+    await page.locator('button:has-text("详情")').click()
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('02e-context-menu-detail.png')
+  })
+
+  test('长按菜单 - 点击移除', async ({ page }) => {
+    // 添加"我的应用"数据
+    await page.addInitScript(() => {
+      localStorage.setItem('ecosystem_my_apps', JSON.stringify([
+        { appId: 'xin.dweb.teleport', installedAt: Date.now() - 3600000, lastUsedAt: Date.now() - 1800000 },
+        { appId: 'xin.dweb.forge', installedAt: Date.now() - 7200000, lastUsedAt: Date.now() - 3600000 },
+      ]))
+    })
+    
+    await page.goto('/#/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 进入生态 - 我的
+    await page.getByTestId('tab-ecosystem').click()
+    await page.waitForTimeout(300)
+    await page.locator('button:has-text("我的")').click()
+    await page.waitForTimeout(300)
+
+    // 右键菜单 -> 移除
+    await page.locator('[data-testid="ios-app-icon-xin.dweb.teleport"]').click({ button: 'right' })
+    await page.waitForTimeout(200)
+    await page.locator('button:has-text("移除")').click()
+    await page.waitForTimeout(500)
+
+    // 截图显示移除后的状态（只剩一个应用）
+    await expect(page).toHaveScreenshot('02f-context-menu-remove.png')
+  })
+})
+
+test.describe('小程序详情页截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('小程序详情页 - 完整信息展示', async ({ page }) => {
+    await page.goto('/#/miniapp/xin.dweb.teleport/detail')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('16-miniapp-detail.png')
+  })
+
+  test('小程序详情页 - 权限列表', async ({ page }) => {
+    await page.goto('/#/miniapp/xin.dweb.teleport/detail')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 滚动到隐私/权限部分（App Store 风格使用 h2）
+    const permissionHeader = page.locator('h2').filter({ hasText: /隐私|权限|Privacy|Permissions/i })
+    await permissionHeader.scrollIntoViewIfNeeded()
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('17-miniapp-detail-permissions.png')
+  })
+})
+
+test.describe('钱包选择器截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('钱包选择器页面', async ({ page }) => {
+    // 正确的路由格式
+    await page.goto('/#/job/wallet-picker')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('03-wallet-picker.png')
+  })
+})
+
+test.describe('签名确认截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('签名确认对话框', async ({ page }) => {
+    const params = new URLSearchParams({
+      message: 'Hello, Bio!',
+      address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      appName: '一键传送',
+      appIcon: '/miniapps/teleport/icon.svg',
+    })
+    // 正确的路由格式
+    await page.goto(`/#/job/signing-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('04-signing-confirm.png')
+  })
+
+  test('点击签名后的钱包锁', async ({ page }) => {
+    const params = new URLSearchParams({
+      message: 'Test signing',
+      address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      appName: '测试',
+    })
+    await page.goto(`/#/job/signing-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    const signButton = page.locator('button').filter({ hasText: /签名|Sign/i })
+    await signButton.click()
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('05-signing-wallet-lock.png')
+  })
+})
+
+test.describe('转账确认截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('转账确认对话框', async ({ page }) => {
+    const params = new URLSearchParams({
+      appName: '一键传送',
+      appIcon: '/miniapps/teleport/icon.svg',
+      from: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      to: 'c8X7yWePwIqsQxf6R0AwXs8DqQo6Nl6Yz4',
+      amount: '10',
+      chain: 'bfmeta',
+    })
+    // 正确的路由格式
+    await page.goto(`/#/job/miniapp-transfer-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('06-transfer-confirm.png')
+  })
+})
+
+test.describe('可信源管理截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('可信源管理页面', async ({ page }) => {
+    await page.goto('/#/settings/sources')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('07-trusted-sources.png')
+  })
+})
+
+// 多钱包数据
+const MULTI_WALLET_DATA = {
+  wallets: [
+    {
+      id: 'wallet-1',
+      name: '主钱包',
+      keyType: 'mnemonic',
+      address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      chain: 'bfmeta',
+      chainAddresses: [
+        { chain: 'bfmeta', address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3', tokens: [] },
+        { chain: 'ethereum', address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F', tokens: [] },
+      ],
+      encryptedMnemonic: { ciphertext: 'test', iv: 'test', salt: 'test', iterations: 100000 },
+      createdAt: 1700000000000,
+      themeHue: 200,
+      tokens: [],
+    },
+    {
+      id: 'wallet-2',
+      name: '储蓄钱包',
+      keyType: 'mnemonic',
+      address: 'c8X7yWePwIqsQxf6R0AwXs8DqQo6Nl6Yz4',
+      chain: 'bfmeta',
+      chainAddresses: [
+        { chain: 'bfmeta', address: 'c8X7yWePwIqsQxf6R0AwXs8DqQo6Nl6Yz4', tokens: [] },
+      ],
+      encryptedMnemonic: { ciphertext: 'test', iv: 'test', salt: 'test', iterations: 100000 },
+      createdAt: 1700000001000,
+      themeHue: 120,
+      tokens: [],
+    },
+    {
+      id: 'wallet-3',
+      name: 'ETH 钱包',
+      keyType: 'mnemonic',
+      address: '0xabcdef1234567890abcdef1234567890abcdef12',
+      chain: 'ethereum',
+      chainAddresses: [
+        { chain: 'ethereum', address: '0xabcdef1234567890abcdef1234567890abcdef12', tokens: [] },
+      ],
+      encryptedMnemonic: { ciphertext: 'test', iv: 'test', salt: 'test', iterations: 100000 },
+      createdAt: 1700000002000,
+      themeHue: 280,
+      tokens: [],
+    },
+  ],
+  currentWalletId: 'wallet-1',
+  selectedChain: 'bfmeta',
+  chainPreferences: {},
+  isLoading: false,
+  isInitialized: true,
+}
+
+test.describe('多钱包场景截图测试', () => {
+  test('多钱包钱包选择器', async ({ page }) => {
+    await page.addInitScript((data) => {
+      localStorage.clear()
+      localStorage.setItem('bfm_wallets', JSON.stringify(data))
+    }, MULTI_WALLET_DATA)
+
+    await page.goto('/#/job/wallet-picker')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('08-multi-wallet-picker.png')
+  })
+
+  test('按链过滤钱包选择器', async ({ page }) => {
+    await page.addInitScript((data) => {
+      localStorage.clear()
+      localStorage.setItem('bfm_wallets', JSON.stringify(data))
+    }, MULTI_WALLET_DATA)
+
+    await page.goto('/#/job/wallet-picker?chain=ethereum')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('09-ethereum-only-picker.png')
+  })
+})
+
+test.describe('签名消息变体截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('长消息签名', async ({ page }) => {
+    const longMessage = 'This is a very long message that needs to be signed. It contains important information about the transaction.'
+    const params = new URLSearchParams({
+      message: longMessage,
+      address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      appName: 'DeFi Protocol',
+      appIcon: '/miniapps/forge/icon.svg',
+    })
+    await page.goto(`/#/job/signing-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('10-long-message-signing.png')
+  })
+})
+
+test.describe('转账金额变体截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('大额转账', async ({ page }) => {
+    const params = new URLSearchParams({
+      appName: '交易所提现',
+      appIcon: '/miniapps/forge/icon.svg',
+      from: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      to: 'c8X7yWePwIqsQxf6R0AwXs8DqQo6Nl6Yz4',
+      amount: '999999.12345678',
+      chain: 'bfmeta',
+    })
+    await page.goto(`/#/job/miniapp-transfer-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('11-large-amount-transfer.png')
+  })
+
+  test('小数转账', async ({ page }) => {
+    const params = new URLSearchParams({
+      appName: 'Micropayment',
+      appIcon: '/miniapps/teleport/icon.svg',
+      from: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      to: 'c8X7yWePwIqsQxf6R0AwXs8DqQo6Nl6Yz4',
+      amount: '0.00000001',
+      chain: 'bfmeta',
+    })
+    await page.goto(`/#/job/miniapp-transfer-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('12-small-amount-transfer.png')
+  })
+})
+
+// ============================================
+// 权限请求测试
+// ============================================
+
+test.describe('权限请求截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('权限请求对话框', async ({ page }) => {
+    const params = new URLSearchParams({
+      appName: '测试小程序',
+      permissions: JSON.stringify(['bio_signMessage', 'bio_sendTransaction']),
+    })
+    await page.goto(`/#/job/permission-request?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('13-permission-request.png')
+  })
+})
+
+// ============================================
+// 空状态测试
+// ============================================
+
+const EMPTY_WALLET_DATA = {
+  wallets: [],
+  currentWalletId: null,
+  selectedChain: 'bfmeta',
+  chainPreferences: {},
+  isLoading: false,
+  isInitialized: true,
+}
+
+test.describe('空状态截图测试', () => {
+  test('无钱包时的钱包选择器', async ({ page }) => {
+    await page.addInitScript((data) => {
+      localStorage.clear()
+      localStorage.setItem('bfm_wallets', JSON.stringify(data))
+    }, EMPTY_WALLET_DATA)
+
+    await page.goto('/#/job/wallet-picker')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('14-empty-wallet-picker.png')
+  })
+})
+
+// ============================================
+// 十六进制数据签名（带警告）
+// ============================================
+
+test.describe('安全警告截图测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('十六进制数据签名警告', async ({ page }) => {
+    // 十六进制数据会触发警告
+    const hexMessage = '0x4e6f7420612076616c69642045495020373132207479706564206461746120616e64207369676e207479706564206461746120763420646f65736e277420776f726b'
+    const params = new URLSearchParams({
+      message: hexMessage,
+      address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      appName: '未知 DApp',
+      appIcon: '/miniapps/forge/icon.svg',
+    })
+    await page.goto(`/#/job/signing-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+
+    await expect(page).toHaveScreenshot('15-hex-data-warning.png')
+  })
+})
+
+// ============================================
+// 交互流程测试（功能验证，不只是截图）
+// ============================================
+
+test.describe('取消操作流程测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('取消签名应触发事件', async ({ page }) => {
+    const params = new URLSearchParams({
+      message: 'Test',
+      address: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      appName: '测试',
+    })
+    await page.goto(`/#/job/signing-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 监听事件
+    const eventPromise = page.evaluate(() => {
+      return new Promise((resolve) => {
+        window.addEventListener('signing-confirm', (e: Event) => {
+          resolve((e as CustomEvent).detail)
+        }, { once: true })
+      })
+    })
+
+    // 点击取消
+    const cancelButton = page.locator('button').filter({ hasText: /取消|Cancel/i })
+    await cancelButton.click()
+
+    // 验证事件
+    const eventDetail = await eventPromise
+    expect(eventDetail).toEqual({ confirmed: false })
+  })
+
+  test('取消转账应触发事件', async ({ page }) => {
+    const params = new URLSearchParams({
+      appName: '测试',
+      from: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      to: 'c8X7yWePwIqsQxf6R0AwXs8DqQo6Nl6Yz4',
+      amount: '10',
+      chain: 'bfmeta',
+    })
+    await page.goto(`/#/job/miniapp-transfer-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 监听事件
+    const eventPromise = page.evaluate(() => {
+      return new Promise((resolve) => {
+        window.addEventListener('miniapp-transfer-confirm', (e: Event) => {
+          resolve((e as CustomEvent).detail)
+        }, { once: true })
+      })
+    })
+
+    // 点击取消
+    const cancelButton = page.locator('button').filter({ hasText: /取消|Cancel/i })
+    await cancelButton.click()
+
+    // 验证事件
+    const eventDetail = await eventPromise
+    expect(eventDetail).toEqual({ confirmed: false })
+  })
+
+  test('取消钱包选择应触发事件', async ({ page }) => {
+    await page.goto('/#/job/wallet-picker')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 监听事件
+    const eventPromise = page.evaluate(() => {
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => reject(new Error('Timeout')), 3000)
+        window.addEventListener('wallet-picker-cancel', () => {
+          clearTimeout(timeout)
+          resolve(true)
+        }, { once: true })
+      })
+    })
+
+    // 点击取消
+    const cancelButton = page.locator('button').filter({ hasText: /取消|Cancel/i })
+    await cancelButton.click()
+
+    // 验证事件触发
+    await expect(eventPromise).resolves.toBe(true)
+  })
+})
+
+test.describe('账户选择流程测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('选择钱包应触发事件并返回正确数据', async ({ page }) => {
+    await page.goto('/#/job/wallet-picker')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 监听事件
+    const eventPromise = page.evaluate(() => {
+      return new Promise((resolve) => {
+        window.addEventListener('wallet-picker-select', (e: Event) => {
+          resolve((e as CustomEvent).detail)
+        }, { once: true })
+      })
+    })
+
+    // 点击钱包
+    const walletButton = page.locator('button').filter({ hasText: '测试钱包' })
+    await walletButton.click()
+
+    // 验证事件数据
+    const eventDetail = await eventPromise
+    expect(eventDetail).toMatchObject({
+      address: expect.any(String),
+      chain: expect.any(String),
+      name: '测试钱包',
+    })
+  })
+})
+
+// ============================================
+// 地址复制功能测试
+// ============================================
+
+test.describe('地址复制功能测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await injectTestData(page)
+  })
+
+  test('转账确认页地址可复制', async ({ page }) => {
+    const params = new URLSearchParams({
+      appName: '测试',
+      from: 'c7R6wVdPvHqvRxe5Q9ZvWr7CpPn5Mk5Xz3',
+      to: 'c8X7yWePwIqsQxf6R0AwXs8DqQo6Nl6Yz4',
+      amount: '10',
+      chain: 'bfmeta',
+    })
+    await page.goto(`/#/job/miniapp-transfer-confirm?${params}`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 点击复制按钮（AddressDisplay 有复制图标）
+    const copyButtons = page.locator('button[aria-label*="复制"], button[aria-label*="Copy"]')
+    const count = await copyButtons.count()
+    
+    // 应该有两个复制按钮（from 和 to）
+    expect(count).toBeGreaterThanOrEqual(2)
+  })
+})
diff --git a/e2e/miniapp-ui.mock.spec.ts b/e2e/miniapp-ui.mock.spec.ts
new file mode 100644
index 00000000..a8f96c11
--- /dev/null
+++ b/e2e/miniapp-ui.mock.spec.ts
@@ -0,0 +1,121 @@
+import { test, expect } from '@playwright/test'
+
+/**
+ * 小程序 UI 截图测试
+ *
+ * 直接测试小程序界面，验证共享组件和主题正常工作
+ */
+
+test.describe('Teleport 小程序 UI', () => {
+  test.beforeEach(async ({ page }) => {
+    // 设置视口为移动端尺寸
+    await page.setViewportSize({ width: 375, height: 667 })
+  })
+
+  test('连接页面 - 初始状态', async ({ page }) => {
+    await page.goto('/miniapps/teleport/index.html')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    await expect(page).toHaveScreenshot('teleport-01-connect.png')
+  })
+
+  test('连接页面 - 暗色主题', async ({ page }) => {
+    await page.goto('/miniapps/teleport/index.html?colorMode=dark')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    // 手动添加 dark class（因为小程序需要接收 context）
+    await page.evaluate(() => {
+      document.documentElement.classList.add('dark')
+    })
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('teleport-02-connect-dark.png')
+  })
+
+  test('连接页面 - 不同主题色', async ({ page }) => {
+    await page.goto('/miniapps/teleport/index.html?primaryHue=200')
+    await page.waitForLoadState('networkidle')
+    
+    // 设置蓝色主题
+    await page.evaluate(() => {
+      document.documentElement.style.setProperty('--primary-hue', '200')
+    })
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('teleport-03-connect-blue-theme.png')
+  })
+})
+
+test.describe('Forge 小程序 UI', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+  })
+
+  test('连接页面 - 初始状态', async ({ page }) => {
+    await page.goto('/miniapps/forge/index.html')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    await expect(page).toHaveScreenshot('forge-01-connect.png')
+  })
+
+  test('连接页面 - 暗色主题', async ({ page }) => {
+    await page.goto('/miniapps/forge/index.html?colorMode=dark')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+
+    await page.evaluate(() => {
+      document.documentElement.classList.add('dark')
+    })
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('forge-02-connect-dark.png')
+  })
+
+  test('连接页面 - 自定义主题色', async ({ page }) => {
+    await page.goto('/miniapps/forge/index.html?primaryHue=145')
+    await page.waitForLoadState('networkidle')
+    
+    await page.evaluate(() => {
+      document.documentElement.style.setProperty('--primary-hue', '145')
+    })
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('forge-03-green-theme.png')
+  })
+})
+
+test.describe('小程序主题同步', () => {
+  test('Teleport - 主题色通过 URL 参数传递', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+    
+    // 使用绿色主题 (hue=145)
+    await page.goto('/miniapps/teleport/index.html?primaryHue=145&primarySaturation=0.2')
+    await page.waitForLoadState('networkidle')
+    
+    await page.evaluate(() => {
+      document.documentElement.style.setProperty('--primary-hue', '145')
+      document.documentElement.style.setProperty('--primary-saturation', '0.2')
+    })
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('teleport-04-green-theme.png')
+  })
+
+  test('Forge - 暗色 + 自定义主题色', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+    
+    await page.goto('/miniapps/forge/index.html?colorMode=dark&primaryHue=280')
+    await page.waitForLoadState('networkidle')
+    
+    await page.evaluate(() => {
+      document.documentElement.classList.add('dark')
+      document.documentElement.style.setProperty('--primary-hue', '280')
+    })
+    await page.waitForTimeout(300)
+
+    await expect(page).toHaveScreenshot('forge-04-dark-purple-theme.png')
+  })
+})
diff --git a/e2e/screenshots/contact-01-address-book.png b/e2e/screenshots/contact-01-address-book.png
index 693d0034..a71b4a8f 100644
Binary files a/e2e/screenshots/contact-01-address-book.png and b/e2e/screenshots/contact-01-address-book.png differ
diff --git a/e2e/screenshots/contact-02-send-page.png b/e2e/screenshots/contact-02-send-page.png
index 3f845177..a71b4a8f 100644
Binary files a/e2e/screenshots/contact-02-send-page.png and b/e2e/screenshots/contact-02-send-page.png differ
diff --git a/e2e/screenshots/debug-01-address-book.png b/e2e/screenshots/debug-01-address-book.png
index c5fce369..a71b4a8f 100644
Binary files a/e2e/screenshots/debug-01-address-book.png and b/e2e/screenshots/debug-01-address-book.png differ
diff --git a/e2e/screenshots/debug-02-send-page.png b/e2e/screenshots/debug-02-send-page.png
index c5fce369..a71b4a8f 100644
Binary files a/e2e/screenshots/debug-02-send-page.png and b/e2e/screenshots/debug-02-send-page.png differ
diff --git a/miniapps/forge/.oxlintrc.json b/miniapps/forge/.oxlintrc.json
new file mode 100644
index 00000000..252827a8
--- /dev/null
+++ b/miniapps/forge/.oxlintrc.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "jsx-a11y", "unicorn"],
+  "jsPlugins": ["eslint-plugin-i18next"],
+  "categories": {
+    "correctness": "warn",
+    "suspicious": "warn",
+    "pedantic": "off",
+    "perf": "warn",
+    "style": "off",
+    "restriction": "off",
+    "nursery": "off"
+  },
+  "rules": {
+    "no-unused-vars": "warn",
+    "no-console": "warn",
+    "eqeqeq": "error",
+    "no-var": "error",
+    "prefer-const": "warn",
+
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-key": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-unescaped-entities": "warn",
+    "react/self-closing-comp": "warn",
+    "react/jsx-no-useless-fragment": "warn",
+    "react/jsx-curly-brace-presence": "warn",
+    "react/no-array-index-key": "warn",
+
+    "typescript/no-explicit-any": "error",
+    "typescript/prefer-ts-expect-error": "warn",
+    "typescript/no-non-null-assertion": "warn",
+
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/anchor-is-valid": "warn",
+
+    "unicorn/no-null": "off",
+    "unicorn/prefer-query-selector": "off",
+    "unicorn/require-module-specifiers": "off",
+
+    "i18next/no-literal-string": ["warn", {
+      "mode": "jsx-only",
+      "jsx-components": { "exclude": ["Trans", "Icon", "TablerIcon"] },
+      "jsx-attributes": {
+        "exclude": [
+          "className", "styleName", "style", "type", "key", "id", "name", "role", "as", "asChild",
+          "data-testid", "data-test", "data-slot", "data-state", "data-side", "data-align",
+          "to", "href", "src", "alt", "target", "rel", "method", "action",
+          "variant", "size", "color", "weight", "sign", "align", "justify", "direction", "orientation"
+        ]
+      },
+      "callees": {
+        "exclude": [
+          "t", "i18n.t", "useTranslation", "Trans",
+          "console.*", "require", "import", "Error", "TypeError",
+          "describe", "it", "test", "expect", "vi.*"
+        ]
+      },
+      "words": {
+        "exclude": ["[A-Z_-]+", "[0-9.]+", "^\\s*$", "^[a-z]+$", "^https?://"]
+      }
+    }]
+  },
+  "env": {
+    "browser": true,
+    "es2024": true
+  },
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "coverage",
+    "*.config.ts",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ]
+}
diff --git a/miniapps/forge/components.json b/miniapps/forge/components.json
new file mode 100644
index 00000000..33f22780
--- /dev/null
+++ b/miniapps/forge/components.json
@@ -0,0 +1 @@
+{"$schema":"https://ui.shadcn.com/schema.json","style":"new-york","rsc":false,"tsx":true,"tailwind":{"config":"","css":"src/index.css","baseColor":"zinc","cssVariables":true,"prefix":""},"aliases":{"components":"@/components","utils":"@/lib/utils","ui":"@/components/ui","lib":"@/lib","hooks":"@/hooks"}}
diff --git a/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/01-connect.png b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/01-connect.png
new file mode 100644
index 00000000..1304dadf
Binary files /dev/null and b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/01-connect.png differ
diff --git a/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/02-swap.png b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/02-swap.png
new file mode 100644
index 00000000..cb62fde0
Binary files /dev/null and b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/02-swap.png differ
diff --git a/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/03-swap-amount.png b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/03-swap-amount.png
new file mode 100644
index 00000000..8c6dd7ad
Binary files /dev/null and b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/03-swap-amount.png differ
diff --git a/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/04-token-picker.png b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/04-token-picker.png
new file mode 100644
index 00000000..ae963b25
Binary files /dev/null and b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/04-token-picker.png differ
diff --git a/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/05-confirm.png b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/05-confirm.png
new file mode 100644
index 00000000..0539773b
Binary files /dev/null and b/miniapps/forge/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/05-confirm.png differ
diff --git a/miniapps/forge/e2e/ui.spec.ts b/miniapps/forge/e2e/ui.spec.ts
new file mode 100644
index 00000000..ab9e3dc4
--- /dev/null
+++ b/miniapps/forge/e2e/ui.spec.ts
@@ -0,0 +1,86 @@
+import { test, expect } from '@playwright/test'
+
+// Mock bio SDK
+const mockBioSDK = `
+  window.bio = {
+    request: async ({ method }) => {
+      if (method === 'bio_selectAccount') {
+        return { address: '0x1234...5678', name: 'Test Wallet' }
+      }
+      return {}
+    }
+  }
+`
+
+test.describe('Forge 小程序 UI', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+  })
+
+  test('01 - 连接页面', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+    await expect(page).toHaveScreenshot('01-connect.png')
+  })
+
+  test('02 - 兑换页面', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    // 点击连接按钮
+    await page.click('button:has-text("连接钱包")')
+    await page.waitForTimeout(500)
+    
+    await expect(page).toHaveScreenshot('02-swap.png')
+  })
+
+  test('03 - 兑换页面 - 输入金额', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("连接钱包")')
+    await page.waitForTimeout(300)
+    
+    // 输入金额
+    await page.fill('input[type="number"]', '1.5')
+    await page.waitForTimeout(300)
+    
+    await expect(page).toHaveScreenshot('03-swap-amount.png')
+  })
+
+  test('04 - 代币选择器', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("连接钱包")')
+    await page.waitForTimeout(500)
+    
+    // 点击代币选择按钮
+    await page.click('button:has-text("ETH")')
+    await page.waitForTimeout(800)
+    
+    await expect(page).toHaveScreenshot('04-token-picker.png')
+  })
+
+  test('05 - 确认页面', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("连接钱包")')
+    await page.waitForTimeout(300)
+    
+    await page.fill('input[type="number"]', '1.5')
+    await page.waitForTimeout(200)
+    
+    // 点击预览
+    await page.click('button:has-text("预览交易")')
+    await page.waitForTimeout(300)
+    
+    await expect(page).toHaveScreenshot('05-confirm.png')
+  })
+})
diff --git a/miniapps/forge/index.html b/miniapps/forge/index.html
new file mode 100644
index 00000000..69ef3dab
--- /dev/null
+++ b/miniapps/forge/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>锻造 - Bio 生态</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/miniapps/forge/manifest.json b/miniapps/forge/manifest.json
new file mode 100644
index 00000000..c4e08292
--- /dev/null
+++ b/miniapps/forge/manifest.json
@@ -0,0 +1,21 @@
+{
+  "id": "xin.dweb.forge",
+  "name": "锻造",
+  "description": "将 ETH 兑换为 Bio 生态 Token",
+  "longDescription": "锻造是 Bio 生态的跨链桥接工具，支持将 ETH 等主流资产兑换为 Bio 生态内的 Token。\n\n## 支持的兑换\n- ETH → BFM\n- ETH → CC\n- 更多资产对即将上线",
+  "icon": "icon.svg",
+  "version": "0.1.0",
+  "author": "Bio Team",
+  "website": "https://forge.dweb.xin",
+  "category": "exchange",
+  "tags": ["兑换", "跨链桥", "DeFi"],
+  "permissions": ["bio_requestAccounts", "bio_selectAccount", "bio_createTransaction", "bio_signTransaction"],
+  "chains": ["ethereum", "bfmeta"],
+  "officialScore": 70,
+  "communityScore": 85,
+  "screenshots": [],
+  "publishedAt": "2024-12-15",
+  "updatedAt": "2024-12-28",
+  "beta": true,
+  "themeColor": "from-red-800 via-orange-900 to-amber-950"
+}
diff --git a/miniapps/forge/package.json b/miniapps/forge/package.json
new file mode 100644
index 00000000..4472b9a3
--- /dev/null
+++ b/miniapps/forge/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@biochain/miniapp-forge",
+  "private": true,
+  "version": "0.1.0",
+  "description": "锻造 - ETH 兑换 Bio Token",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "oxlint .",
+    "lint:run": "oxlint .",
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:storybook": "echo 'Miniapp has no storybook'",
+    "e2e": "bun scripts/e2e.ts",
+    "e2e:run": "bun scripts/e2e.ts",
+    "e2e:update": "bun scripts/e2e.ts --update-snapshots",
+    "e2e:ui": "playwright test --ui",
+    "e2e:audit": "bunx @biochain/e2e-tools audit --strict",
+    "i18n:run": "bunx @biochain/i18n-tools",
+    "theme:run": "bunx @biochain/theme-tools"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@biochain/bio-sdk": "workspace:*",
+    "@biochain/keyapp-sdk": "workspace:*",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
+    "i18next": "^25.2.1",
+    "lucide-react": "^0.562.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.5.2",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@biochain/e2e-tools": "workspace:*",
+    "@biochain/i18n-tools": "workspace:*",
+    "@biochain/theme-tools": "workspace:*",
+    "@playwright/test": "^1.49.1",
+    "@tailwindcss/vite": "^4.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint-plugin-i18next": "^6.1.3",
+    "jsdom": "^26.1.0",
+    "oxlint": "^1.32.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-mkcert": "^1.17.9",
+    "vite-tsconfig-paths": "^5.1.0",
+    "vitest": "^4.0.0"
+  }
+}
diff --git a/miniapps/forge/playwright.config.ts b/miniapps/forge/playwright.config.ts
new file mode 100644
index 00000000..cc153a1d
--- /dev/null
+++ b/miniapps/forge/playwright.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const baseURL = process.env.E2E_BASE_URL || 'https://localhost:5184'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  
+  use: {
+    baseURL,
+    ignoreHTTPSErrors: true,
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+
+  snapshotPathTemplate: '{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
+})
diff --git a/miniapps/forge/public/icon.svg b/miniapps/forge/public/icon.svg
new file mode 100644
index 00000000..85e29694
--- /dev/null
+++ b/miniapps/forge/public/icon.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
+  <defs>
+    <linearGradient id="forge-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f97316"/>
+      <stop offset="100%" style="stop-color:#ea580c"/>
+    </linearGradient>
+    <linearGradient id="flame-outer" x1="50%" y1="100%" x2="50%" y2="0%">
+      <stop offset="0%" style="stop-color:#fbbf24"/>
+      <stop offset="50%" style="stop-color:#f97316"/>
+      <stop offset="100%" style="stop-color:#dc2626"/>
+    </linearGradient>
+    <linearGradient id="flame-inner" x1="50%" y1="100%" x2="50%" y2="0%">
+      <stop offset="0%" style="stop-color:#fef3c7"/>
+      <stop offset="100%" style="stop-color:#fbbf24"/>
+    </linearGradient>
+    <filter id="flame-glow">
+      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <!-- Background - 填满整个 viewBox -->
+  <rect width="120" height="120" fill="url(#forge-bg)"/>
+  <!-- Anvil base -->
+  <path d="M30 88 L90 88 L85 78 L35 78 Z" fill="#374151"/>
+  <path d="M35 78 L85 78 L80 71 L40 71 Z" fill="#4b5563"/>
+  <!-- Flame outer -->
+  <path d="M60 25 C45 42 35 52 40 67 C42 72 50 75 60 75 C70 75 78 72 80 67 C85 52 75 42 60 25 Z" fill="url(#flame-outer)" filter="url(#flame-glow)"/>
+  <!-- Flame inner -->
+  <path d="M60 37 C52 47 48 55 50 65 C51 69 55 71 60 71 C65 71 69 69 70 65 C72 55 68 47 60 37 Z" fill="url(#flame-inner)"/>
+  <!-- Hammer -->
+  <rect x="54" y="47" width="12" height="25" rx="2" fill="#1f2937"/>
+  <rect x="50" y="45" width="20" height="8" rx="2" fill="#374151"/>
+  <!-- Sparkles -->
+  <circle cx="42" cy="52" r="2" fill="#fef3c7" opacity="0.9"/>
+  <circle cx="78" cy="47" r="1.5" fill="#fef3c7" opacity="0.7"/>
+  <circle cx="47" cy="39" r="1" fill="white" opacity="0.8"/>
+</svg>
diff --git a/miniapps/forge/scripts/e2e.ts b/miniapps/forge/scripts/e2e.ts
new file mode 100644
index 00000000..6b1d6125
--- /dev/null
+++ b/miniapps/forge/scripts/e2e.ts
@@ -0,0 +1,92 @@
+#!/usr/bin/env bun
+/**
+ * E2E 测试启动脚本
+ * 
+ * 动态检测可用端口，启动 vite dev server，然后运行 playwright 测试
+ */
+
+import { spawn } from 'child_process'
+import { createServer } from 'net'
+
+async function findAvailablePort(startPort: number): Promise<number> {
+  return new Promise((resolve) => {
+    const server = createServer()
+    server.listen(startPort, () => {
+      const port = (server.address() as { port: number }).port
+      server.close(() => resolve(port))
+    })
+    server.on('error', () => {
+      resolve(findAvailablePort(startPort + 1))
+    })
+  })
+}
+
+async function main() {
+  const args = process.argv.slice(2)
+  const updateSnapshots = args.includes('--update-snapshots') || args.includes('-u')
+  
+  const port = await findAvailablePort(5184)
+  console.log(`[e2e] Using port ${port}`)
+  
+  // Start vite dev server
+  const vite = spawn('pnpm', ['vite', '--port', String(port)], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+    env: { ...process.env },
+  })
+  
+  let serverReady = false
+  
+  vite.stdout?.on('data', (data) => {
+    const output = data.toString()
+    if (output.includes('ready in') || output.includes('Local:')) {
+      serverReady = true
+    }
+  })
+  
+  vite.stderr?.on('data', (data) => {
+    console.error(data.toString())
+  })
+  
+  // Wait for server to be ready
+  const maxWait = 30000
+  const startTime = Date.now()
+  while (!serverReady && Date.now() - startTime < maxWait) {
+    await new Promise(r => setTimeout(r, 200))
+  }
+  
+  if (!serverReady) {
+    console.error('[e2e] Server failed to start')
+    vite.kill()
+    process.exit(1)
+  }
+  
+  console.log('[e2e] Server ready, running tests...')
+  
+  // Run playwright
+  const playwrightArgs = ['playwright', 'test']
+  if (updateSnapshots) {
+    playwrightArgs.push('--update-snapshots')
+  }
+  
+  const playwright = spawn('npx', playwrightArgs, {
+    stdio: 'inherit',
+    env: { 
+      ...process.env, 
+      E2E_BASE_URL: `https://localhost:${port}`,
+    },
+  })
+  
+  playwright.on('close', (code) => {
+    vite.kill()
+    process.exit(code ?? 0)
+  })
+  
+  // Handle cleanup
+  process.on('SIGINT', () => {
+    vite.kill()
+    playwright.kill()
+    process.exit(0)
+  })
+}
+
+main()
diff --git a/miniapps/forge/src/App.test.tsx b/miniapps/forge/src/App.test.tsx
new file mode 100644
index 00000000..9b383c40
--- /dev/null
+++ b/miniapps/forge/src/App.test.tsx
@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import App from './App'
+
+// Mock bio SDK
+const mockBio = {
+  request: vi.fn(),
+  on: vi.fn(),
+  off: vi.fn(),
+  isConnected: vi.fn(() => true),
+}
+
+describe('Forge App', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(window as unknown as { bio: typeof mockBio }).bio = mockBio
+  })
+
+  it('should render initial connect step', () => {
+    render(<App />)
+
+    expect(screen.getByText('多链熔炉')).toBeInTheDocument()
+    expect(screen.getByText(/将其他链资产锻造为/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '连接钱包' })).toBeInTheDocument()
+  })
+
+  it('should show loading state when connecting', async () => {
+    mockBio.request.mockImplementation(
+      () => new Promise((resolve) => setTimeout(() => resolve({ address: '0x123', chain: 'ethereum' }), 1000))
+    )
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '连接钱包' }))
+
+    expect(screen.getByRole('button', { name: '连接中...' })).toBeInTheDocument()
+  })
+
+  it('should proceed to swap step after selecting wallet', async () => {
+    mockBio.request.mockResolvedValue({ address: '0x123', chain: 'ethereum' })
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '连接钱包' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('支付')).toBeInTheDocument()
+    })
+  })
+
+  it('should show error when bio SDK not initialized', async () => {
+    ;(window as unknown as { bio: undefined }).bio = undefined
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '连接钱包' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Bio SDK 未初始化')).toBeInTheDocument()
+    })
+  })
+
+  it('should show error when connection fails', async () => {
+    mockBio.request.mockRejectedValue(new Error('Connection failed'))
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '连接钱包' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Connection failed')).toBeInTheDocument()
+    })
+  })
+
+  it('should call bio_selectAccount on connect', async () => {
+    mockBio.request.mockResolvedValue({ address: '0x123', chain: 'ethereum' })
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '连接钱包' }))
+
+    await waitFor(() => {
+      expect(mockBio.request).toHaveBeenCalledWith({
+        method: 'bio_selectAccount',
+        params: [{}],
+      })
+    })
+  })
+})
diff --git a/miniapps/forge/src/App.tsx b/miniapps/forge/src/App.tsx
new file mode 100644
index 00000000..f994dc4a
--- /dev/null
+++ b/miniapps/forge/src/App.tsx
@@ -0,0 +1,516 @@
+import { useState, useCallback, useEffect } from 'react'
+import type { BioAccount, BioUnsignedTransaction, BioSignedTransaction } from '@biochain/bio-sdk'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+
+import { BackgroundBeams } from './components/BackgroundBeams'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { Coins, Leaf, DollarSign, Bitcoin, X, ChevronDown, ArrowUpDown, ChevronLeft, Zap, ArrowDown, Check, Loader2 } from 'lucide-react'
+
+type Step = 'connect' | 'swap' | 'confirm' | 'processing' | 'success'
+
+interface Token {
+  symbol: string
+  name: string
+  chain: string
+  balance?: string
+}
+
+const TOKENS: Token[] = [
+  { symbol: 'ETH', name: 'Ethereum', chain: 'ethereum' },
+  { symbol: 'BFM', name: 'BioForest', chain: 'bfmeta' },
+  { symbol: 'USDT', name: 'Tether', chain: 'ethereum' },
+  { symbol: 'BTC', name: 'Bitcoin', chain: 'bitcoin' },
+]
+
+const FORGE_RECEIVER: Record<string, string> = {
+  ethereum: '0x000000000000000000000000000000000000dEaD',
+  bfmeta: 'b0000000000000000000000000000000000000000',
+  bitcoin: 'bc1q000000000000000000000000000000000000000',
+}
+
+const EXCHANGE_RATES: Record<string, number> = {
+  'ETH-BFM': 2500,
+  'BFM-ETH': 0.0004,
+  'USDT-BFM': 1,
+  'BFM-USDT': 1,
+  'BTC-BFM': 45000,
+  'BFM-BTC': 0.000022,
+}
+
+const TOKEN_COLORS: Record<string, string> = {
+  ETH: 'bg-indigo-600',
+  BFM: 'bg-emerald-600',
+  USDT: 'bg-teal-600',
+  BTC: 'bg-orange-600',
+}
+
+export default function App() {
+  const [step, setStep] = useState<Step>('connect')
+  const [account, setAccount] = useState<BioAccount | null>(null)
+  const [fromToken, setFromToken] = useState<Token>(TOKENS[0])
+  const [toToken, setToToken] = useState<Token>(TOKENS[1])
+  const [fromAmount, setFromAmount] = useState('')
+  const [toAmount, setToAmount] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [pickerOpen, setPickerOpen] = useState<'from' | 'to' | null>(null)
+
+  useEffect(() => {
+    if (fromAmount && parseFloat(fromAmount) > 0) {
+      const rate = EXCHANGE_RATES[`${fromToken.symbol}-${toToken.symbol}`] || 1
+      const result = parseFloat(fromAmount) * rate
+      setToAmount(result.toFixed(fromToken.symbol === 'BFM' ? 8 : 2))
+    } else {
+      setToAmount('')
+    }
+  }, [fromAmount, fromToken, toToken])
+
+  const handleConnect = useCallback(async () => {
+    if (!window.bio) {
+      setError('Bio SDK 未初始化')
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const acc = await window.bio.request<BioAccount>({
+        method: 'bio_selectAccount',
+        params: [{}],
+      })
+      setAccount(acc)
+      setFromToken({ ...fromToken, balance: '2.5' })
+      setStep('swap')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '连接失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [fromToken])
+
+  const handleSwapTokens = () => {
+    const temp = fromToken
+    setFromToken({ ...toToken, balance: toToken.balance })
+    setToToken({ ...temp, balance: temp.balance })
+    setFromAmount(toAmount)
+  }
+
+  const handlePreview = () => {
+    if (!fromAmount || parseFloat(fromAmount) <= 0) {
+      setError('请输入有效金额')
+      return
+    }
+    setError(null)
+    setStep('confirm')
+  }
+
+  const handleConfirm = useCallback(async () => {
+    if (!window.bio || !account) return
+    setLoading(true)
+    setError(null)
+    setStep('processing')
+    try {
+      const chainId = fromToken.chain
+      const to = FORGE_RECEIVER[chainId] ?? FORGE_RECEIVER.ethereum
+      const unsignedTx = await window.bio.request<BioUnsignedTransaction>({
+        method: 'bio_createTransaction',
+        params: [{ from: account.address, to, amount: fromAmount, chain: chainId, asset: fromToken.symbol }],
+      })
+      const signedTx = await window.bio.request<BioSignedTransaction>({
+        method: 'bio_signTransaction',
+        params: [{ from: account.address, chain: chainId, unsignedTx }],
+      })
+      void signedTx
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      setStep('success')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '交易失败')
+      setStep('confirm')
+    } finally {
+      setLoading(false)
+    }
+  }, [account, fromToken, fromAmount])
+
+  const handleReset = useCallback(() => {
+    setStep('swap')
+    setFromAmount('')
+    setToAmount('')
+    setError(null)
+  }, [])
+
+  const handleSelectToken = (token: Token) => {
+    if (pickerOpen === 'from') {
+      setFromToken({ ...token, balance: token.symbol === 'ETH' ? '2.5' : '1000' })
+    } else {
+      setToToken(token)
+    }
+    setPickerOpen(null)
+  }
+
+  return (
+    <div className="relative min-h-screen w-full bg-background text-foreground">
+      <BackgroundBeams className="opacity-30" />
+      
+      <div className="relative z-10 w-full max-w-md mx-auto min-h-screen flex flex-col">
+        {/* Header */}
+        <header className="sticky top-0 z-20 backdrop-blur-md bg-background/80 border-b border-border">
+          <div className="flex items-center h-14 px-4">
+            {step === 'confirm' && (
+              <Button variant="ghost" size="icon-sm" onClick={() => setStep('swap')}>
+                <ChevronLeft className="size-5" />
+              </Button>
+            )}
+            <h1 className="flex-1 text-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-500">
+              锻造
+            </h1>
+            <div className="w-7" />
+          </div>
+        </header>
+
+        {/* Content */}
+        <main className="flex-1 flex flex-col p-4">
+          {error && (
+            <motion.div 
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+            >
+              <Card className="mb-4 border-destructive/50 bg-destructive/10">
+                <CardContent className="py-3 text-destructive text-sm">
+                  {error}
+                </CardContent>
+              </Card>
+            </motion.div>
+          )}
+
+          <AnimatePresence mode="wait">
+            {/* Connect */}
+            {step === 'connect' && (
+              <motion.div
+                key="connect"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                className="flex-1 flex flex-col items-center justify-center gap-8 pb-20"
+              >
+                <div className="relative">
+                  <div className="absolute inset-0 bg-orange-500/20 blur-3xl rounded-full" />
+                  <Avatar className="relative size-28 border-2 border-orange-500/30">
+                    <AvatarFallback className="bg-gradient-to-b from-muted to-muted/50">
+                      <Zap className="size-14 text-orange-500" strokeWidth={1.5} />
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+                
+                <div className="text-center space-y-2">
+                  <h2 className="text-2xl font-bold">多链熔炉</h2>
+                  <p className="text-muted-foreground text-sm">将其他链资产锻造为 BFM 代币</p>
+                </div>
+                
+                <Button 
+                  size="lg" 
+                  className="w-full max-w-xs h-12"
+                  onClick={handleConnect} 
+                  disabled={loading}
+                >
+                  {loading && <Loader2 className="size-4 animate-spin mr-2" />}
+                  {loading ? '连接中...' : '连接钱包'}
+                </Button>
+              </motion.div>
+            )}
+
+            {/* Swap */}
+            {step === 'swap' && (
+              <motion.div
+                key="swap"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="flex-1 flex flex-col gap-3"
+              >
+                {/* From Card */}
+                <Card>
+                  <CardHeader className="pb-2">
+                    <div className="flex justify-between items-center">
+                      <CardDescription>支付</CardDescription>
+                      <CardDescription>余额: {fromToken.balance || '0.00'}</CardDescription>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="flex items-center gap-3">
+                      <Button
+                        variant="outline"
+                        className="shrink-0 gap-2 h-10 px-3"
+                        onClick={() => setPickerOpen('from')}
+                      >
+                        <TokenAvatar symbol={fromToken.symbol} size="sm" />
+                        <span className="font-semibold">{fromToken.symbol}</span>
+                        <ChevronDown className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Input
+                        type="number"
+                        value={fromAmount}
+                        onChange={(e) => setFromAmount(e.target.value)}
+                        placeholder="0.00"
+                        className="text-right text-2xl font-bold h-10 border-0 focus-visible:ring-0"
+                      />
+                    </div>
+                    {fromToken.balance && (
+                      <div className="flex gap-2">
+                        {['25%', '50%', '75%', 'MAX'].map((pct, i) => (
+                          <Button
+                            key={pct}
+                            variant="ghost"
+                            size="sm"
+                            className="flex-1 h-7 text-xs"
+                            onClick={() => {
+                              const balance = parseFloat(fromToken.balance!.replace(/,/g, ''))
+                              setFromAmount((balance * [0.25, 0.5, 0.75, 1][i]).toString())
+                            }}
+                          >
+                            {pct}
+                          </Button>
+                        ))}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+
+                {/* Swap Button */}
+                <div className="flex justify-center -my-1.5 relative z-10">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="rounded-full"
+                    onClick={handleSwapTokens}
+                  >
+                    <ArrowUpDown className="size-4" />
+                  </Button>
+                </div>
+
+                {/* To Card */}
+                <Card>
+                  <CardHeader className="pb-2">
+                    <div className="flex justify-between items-center">
+                      <CardDescription>获得</CardDescription>
+                      <CardDescription>≈ ${toAmount ? (parseFloat(toAmount) * (toToken.symbol === 'BFM' ? 1 : 2500)).toFixed(2) : '--'}</CardDescription>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex items-center gap-3">
+                      <Button
+                        variant="outline"
+                        className="shrink-0 gap-2 h-10 px-3"
+                        onClick={() => setPickerOpen('to')}
+                      >
+                        <TokenAvatar symbol={toToken.symbol} size="sm" />
+                        <span className="font-semibold">{toToken.symbol}</span>
+                        <ChevronDown className="size-4 text-muted-foreground" />
+                      </Button>
+                      <div className="flex-1 text-right text-2xl font-bold text-muted-foreground">
+                        {toAmount || '0.00'}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Rate Info */}
+                {fromAmount && parseFloat(fromAmount) > 0 && (
+                  <Card className="border-orange-500/20 bg-orange-500/5">
+                    <CardContent className="py-3 flex justify-between text-sm">
+                      <span className="text-muted-foreground">汇率</span>
+                      <span>1 {fromToken.symbol} ≈ {EXCHANGE_RATES[`${fromToken.symbol}-${toToken.symbol}`] || 1} {toToken.symbol}</span>
+                    </CardContent>
+                  </Card>
+                )}
+
+                <div className="mt-auto pt-4">
+                  <Button 
+                    className="w-full h-12" 
+                    onClick={handlePreview}
+                    disabled={!fromAmount || parseFloat(fromAmount) <= 0}
+                  >
+                    预览交易
+                  </Button>
+                </div>
+              </motion.div>
+            )}
+
+            {/* Confirm */}
+            {step === 'confirm' && (
+              <motion.div
+                key="confirm"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="flex-1 flex flex-col gap-4"
+              >
+                <Card>
+                  <CardContent className="py-6 text-center space-y-4">
+                    <div>
+                      <CardDescription className="mb-1">支付</CardDescription>
+                      <div className="text-3xl font-bold flex items-center justify-center gap-2">
+                        <TokenAvatar symbol={fromToken.symbol} size="sm" />
+                        {fromAmount} <span className="text-lg text-muted-foreground">{fromToken.symbol}</span>
+                      </div>
+                    </div>
+                    <div className="flex justify-center">
+                      <Avatar className="size-10 border border-orange-500/30 bg-orange-500/10">
+                        <AvatarFallback className="bg-transparent">
+                          <ArrowDown className="size-5 text-orange-500" />
+                        </AvatarFallback>
+                      </Avatar>
+                    </div>
+                    <div>
+                      <CardDescription className="mb-1">获得</CardDescription>
+                      <div className="text-3xl font-bold text-orange-500 flex items-center justify-center gap-2">
+                        <TokenAvatar symbol={toToken.symbol} size="sm" />
+                        {toAmount} <span className="text-lg text-orange-500/60">{toToken.symbol}</span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardContent className="py-4 space-y-3 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">汇率</span>
+                      <span>1 {fromToken.symbol} = {EXCHANGE_RATES[`${fromToken.symbol}-${toToken.symbol}`]} {toToken.symbol}</span>
+                    </div>
+                    <Separator />
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">网络</span>
+                      <div className="flex gap-2">
+                        <Badge variant="outline">{fromToken.chain}</Badge>
+                        <span>→</span>
+                        <Badge variant="outline">{toToken.chain}</Badge>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">预计时间</span>
+                      <span>~30s</span>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <div className="mt-auto pt-4">
+                  <Button 
+                    className="w-full h-12" 
+                    onClick={handleConfirm}
+                    disabled={loading}
+                  >
+                    确认锻造
+                  </Button>
+                </div>
+              </motion.div>
+            )}
+
+            {/* Processing */}
+            {step === 'processing' && (
+              <motion.div
+                key="processing"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="flex-1 flex flex-col items-center justify-center gap-6 pb-20"
+              >
+                <div className="relative size-24">
+                  <div className="absolute inset-0 border-4 border-muted rounded-full" />
+                  <div className="absolute inset-0 border-4 border-t-orange-500 rounded-full animate-spin" />
+                </div>
+                <div className="text-center space-y-2">
+                  <h2 className="text-xl font-bold">锻造中...</h2>
+                  <p className="text-muted-foreground text-sm">请稍候，正在处理交易</p>
+                </div>
+              </motion.div>
+            )}
+
+            {/* Success */}
+            {step === 'success' && (
+              <motion.div
+                key="success"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="flex-1 flex flex-col items-center justify-center gap-6 pb-20"
+              >
+                <Avatar className="size-20 border border-emerald-500/30 bg-emerald-500/10">
+                  <AvatarFallback className="bg-transparent">
+                    <Check className="size-10 text-emerald-500" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="text-center space-y-2">
+                  <h2 className="text-xl font-bold">锻造完成</h2>
+                  <p className="text-2xl font-bold text-emerald-400">{toAmount} {toToken.symbol}</p>
+                </div>
+                <Button variant="outline" className="w-full max-w-xs" onClick={handleReset}>
+                  继续锻造
+                </Button>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Token Picker Modal */}
+          {pickerOpen !== null && (
+            <div className="fixed inset-0 z-50">
+              <div 
+                className="absolute inset-0 bg-black/60 backdrop-blur-sm" 
+                onClick={() => setPickerOpen(null)} 
+              />
+              <div className="absolute bottom-0 left-0 right-0 bg-card rounded-t-2xl border-t border-border animate-in slide-in-from-bottom">
+                <div className="flex items-center justify-between p-4 border-b border-border">
+                  <CardTitle>选择代币</CardTitle>
+                  <Button variant="ghost" size="icon-sm" onClick={() => setPickerOpen(null)}>
+                    <X className="size-5" />
+                  </Button>
+                </div>
+                <div className="p-4 space-y-2 max-h-80 overflow-y-auto">
+                  {TOKENS.filter(t => t.symbol !== (pickerOpen === 'from' ? toToken : fromToken).symbol).map((token) => (
+                    <Card 
+                      key={token.symbol} 
+                      className={cn(
+                        "cursor-pointer transition-colors hover:bg-accent",
+                        (pickerOpen === 'from' ? fromToken : toToken).symbol === token.symbol && "ring-2 ring-primary"
+                      )}
+                      onClick={() => handleSelectToken(token)}
+                    >
+                      <CardContent className="py-3 flex items-center gap-3">
+                        <TokenAvatar symbol={token.symbol} size="md" />
+                        <div className="flex-1">
+                          <CardTitle className="text-base">{token.symbol}</CardTitle>
+                          <CardDescription>{token.name}</CardDescription>
+                        </div>
+                        {(pickerOpen === 'from' ? fromToken : toToken).symbol === token.symbol && (
+                          <Badge>已选</Badge>
+                        )}
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </main>
+      </div>
+    </div>
+  )
+}
+
+function TokenAvatar({ symbol, size = 'sm' }: { symbol: string; size?: 'sm' | 'md' }) {
+  const icons: Record<string, React.ReactNode> = {
+    ETH: <Coins className={size === 'md' ? 'size-5' : 'size-4'} />,
+    BFM: <Leaf className={size === 'md' ? 'size-5' : 'size-4'} />,
+    USDT: <DollarSign className={size === 'md' ? 'size-5' : 'size-4'} />,
+    BTC: <Bitcoin className={size === 'md' ? 'size-5' : 'size-4'} />,
+  }
+  return (
+    <Avatar className={cn(size === 'md' ? 'size-10' : 'size-6', TOKEN_COLORS[symbol] || 'bg-muted')}>
+      <AvatarFallback className="bg-transparent text-white">
+        {icons[symbol] || <Coins className={size === 'md' ? 'size-5' : 'size-4'} />}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/miniapps/forge/src/bio.d.ts b/miniapps/forge/src/bio.d.ts
new file mode 100644
index 00000000..1d485f1a
--- /dev/null
+++ b/miniapps/forge/src/bio.d.ts
@@ -0,0 +1,7 @@
+import type { BioProvider } from '@biochain/bio-sdk'
+
+declare global {
+  interface Window {
+    bio?: BioProvider
+  }
+}
diff --git a/miniapps/forge/src/components/BackgroundBeams.tsx b/miniapps/forge/src/components/BackgroundBeams.tsx
new file mode 100644
index 00000000..b1e51b10
--- /dev/null
+++ b/miniapps/forge/src/components/BackgroundBeams.tsx
@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+
+export const BackgroundBeams = ({ className }: { className?: string }) => {
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 w-full h-full bg-neutral-950 flex flex-col items-center justify-center overflow-hidden antialiased",
+        className
+      )}
+    >
+        <div className="absolute inset-0 bg-neutral-950 [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
+        <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
+            <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] animate-spin-slow opacity-30">
+                <div className="absolute top-[50%] left-[50%] w-[50%] h-[50%] bg-gradient-to-r from-transparent via-orange-500 to-transparent blur-[100px] translate-x-[-50%] translate-y-[-50%] rotate-45"></div>
+                <div className="absolute top-[50%] left-[50%] w-[50%] h-[50%] bg-gradient-to-r from-transparent via-red-500 to-transparent blur-[100px] translate-x-[-50%] translate-y-[-50%] -rotate-45"></div>
+            </div>
+        </div>
+    </div>
+  );
+};
diff --git a/miniapps/forge/src/components/FireButton.tsx b/miniapps/forge/src/components/FireButton.tsx
new file mode 100644
index 00000000..14a63481
--- /dev/null
+++ b/miniapps/forge/src/components/FireButton.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export const FireButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "relative group/btn flex space-x-2 items-center justify-center px-4 w-full text-black rounded-md h-10 font-medium shadow-input bg-zinc-50 dark:bg-zinc-900 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute inset-0 overflow-hidden rounded-md">
+        <span className="absolute inset-0 rounded-md bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover/btn:opacity-100" />
+      </span>
+      <div className="relative z-10 flex items-center justify-center space-x-2">
+         {children}
+      </div>
+      <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40" />
+    </button>
+  );
+});
+FireButton.displayName = "FireButton";
diff --git a/miniapps/forge/src/components/ui/avatar.tsx b/miniapps/forge/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..d78bf876
--- /dev/null
+++ b/miniapps/forge/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/miniapps/forge/src/components/ui/badge.tsx b/miniapps/forge/src/components/ui/badge.tsx
new file mode 100644
index 00000000..305f2c44
--- /dev/null
+++ b/miniapps/forge/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/miniapps/forge/src/components/ui/button.tsx b/miniapps/forge/src/components/ui/button.tsx
new file mode 100644
index 00000000..e0ff73be
--- /dev/null
+++ b/miniapps/forge/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/miniapps/forge/src/components/ui/card.tsx b/miniapps/forge/src/components/ui/card.tsx
new file mode 100644
index 00000000..681ad980
--- /dev/null
+++ b/miniapps/forge/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/miniapps/forge/src/components/ui/input.tsx b/miniapps/forge/src/components/ui/input.tsx
new file mode 100644
index 00000000..89169058
--- /dev/null
+++ b/miniapps/forge/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/miniapps/forge/src/components/ui/separator.tsx b/miniapps/forge/src/components/ui/separator.tsx
new file mode 100644
index 00000000..bb3ad74c
--- /dev/null
+++ b/miniapps/forge/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/miniapps/forge/src/i18n/index.ts b/miniapps/forge/src/i18n/index.ts
new file mode 100644
index 00000000..49c83d4a
--- /dev/null
+++ b/miniapps/forge/src/i18n/index.ts
@@ -0,0 +1,36 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+import zh from './locales/zh.json'
+import en from './locales/en.json'
+
+/**
+ * Miniapp i18n 配置
+ * 
+ * Fallback 规则：
+ * - zh-CN, zh-TW, zh-HK, zh-* → zh
+ * - 其他语言 → en
+ */
+
+i18n.use(initReactI18next).init({
+  resources: {
+    zh: { translation: zh },
+    en: { translation: en },
+  },
+  lng: 'zh',
+  fallbackLng: {
+    'zh-CN': ['zh'],
+    'zh-TW': ['zh'],
+    'zh-HK': ['zh'],
+    'zh': ['zh'],
+    'default': ['en'],
+  },
+  interpolation: {
+    escapeValue: false,
+  },
+  react: {
+    useSuspense: false,
+  },
+})
+
+export default i18n
diff --git a/miniapps/forge/src/i18n/locales/en.json b/miniapps/forge/src/i18n/locales/en.json
new file mode 100644
index 00000000..8fb46aa0
--- /dev/null
+++ b/miniapps/forge/src/i18n/locales/en.json
@@ -0,0 +1,47 @@
+{
+  "app": {
+    "title": "Exchange Center",
+    "subtitle": "Multi-Chain Swap",
+    "description": "Swap between different tokens safely and quickly"
+  },
+  "connect": {
+    "button": "Connect Wallet",
+    "loading": "Connecting..."
+  },
+  "swap": {
+    "pay": "Pay",
+    "receive": "Receive",
+    "balance": "Balance",
+    "rate": "Exchange Rate",
+    "button": "Swap",
+    "confirm": "Confirm Swap",
+    "processing": "Processing...",
+    "max": "Max"
+  },
+  "confirm": {
+    "title": "Confirm Swap",
+    "from": "Pay",
+    "to": "Receive",
+    "rate": "Rate",
+    "fee": "Network Fee",
+    "feeEstimate": "Estimated",
+    "button": "Confirm",
+    "cancel": "Cancel"
+  },
+  "success": {
+    "title": "Swap Successful!",
+    "message": "Your swap has been submitted",
+    "txWait": "Transaction confirmation may take a few minutes",
+    "done": "Done"
+  },
+  "error": {
+    "sdkNotInit": "Bio SDK not initialized",
+    "connectionFailed": "Connection failed",
+    "invalidAmount": "Please enter a valid amount",
+    "insufficientBalance": "Insufficient balance"
+  },
+  "token": {
+    "select": "Select Token",
+    "search": "Search tokens"
+  }
+}
diff --git a/miniapps/forge/src/i18n/locales/zh.json b/miniapps/forge/src/i18n/locales/zh.json
new file mode 100644
index 00000000..1c60e36f
--- /dev/null
+++ b/miniapps/forge/src/i18n/locales/zh.json
@@ -0,0 +1,47 @@
+{
+  "app": {
+    "title": "兑换中心",
+    "subtitle": "多链兑换",
+    "description": "安全、快速地在不同代币之间进行兑换"
+  },
+  "connect": {
+    "button": "连接钱包",
+    "loading": "连接中..."
+  },
+  "swap": {
+    "pay": "支付",
+    "receive": "获得",
+    "balance": "余额",
+    "rate": "兑换比率",
+    "button": "兑换",
+    "confirm": "确认兑换",
+    "processing": "处理中...",
+    "max": "全部"
+  },
+  "confirm": {
+    "title": "确认兑换",
+    "from": "支付",
+    "to": "获得",
+    "rate": "汇率",
+    "fee": "网络费用",
+    "feeEstimate": "预估",
+    "button": "确认",
+    "cancel": "取消"
+  },
+  "success": {
+    "title": "兑换成功！",
+    "message": "您的兑换已提交",
+    "txWait": "交易确认可能需要几分钟",
+    "done": "完成"
+  },
+  "error": {
+    "sdkNotInit": "Bio SDK 未初始化",
+    "connectionFailed": "连接失败",
+    "invalidAmount": "请输入有效金额",
+    "insufficientBalance": "余额不足"
+  },
+  "token": {
+    "select": "选择代币",
+    "search": "搜索代币"
+  }
+}
diff --git a/miniapps/forge/src/index.css b/miniapps/forge/src/index.css
new file mode 100644
index 00000000..310514b2
--- /dev/null
+++ b/miniapps/forge/src/index.css
@@ -0,0 +1,137 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-spin-slow: spin 10s linear infinite;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* 移动端优化 */
+html,
+body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+input,
+textarea {
+  -webkit-user-select: text;
+  user-select: text;
+}
diff --git a/miniapps/forge/src/lib/utils.ts b/miniapps/forge/src/lib/utils.ts
new file mode 100644
index 00000000..bd0c391d
--- /dev/null
+++ b/miniapps/forge/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/miniapps/forge/src/main.tsx b/miniapps/forge/src/main.tsx
new file mode 100644
index 00000000..b8b83297
--- /dev/null
+++ b/miniapps/forge/src/main.tsx
@@ -0,0 +1,11 @@
+import './index.css'
+import '@biochain/bio-sdk'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
diff --git a/miniapps/forge/src/test-setup.ts b/miniapps/forge/src/test-setup.ts
new file mode 100644
index 00000000..eb352fb0
--- /dev/null
+++ b/miniapps/forge/src/test-setup.ts
@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom/vitest'
+import { vi } from 'vitest'
+
+// Mock window.bio is set per test for proper isolation
diff --git a/miniapps/forge/tsconfig.json b/miniapps/forge/tsconfig.json
new file mode 100644
index 00000000..63d90d34
--- /dev/null
+++ b/miniapps/forge/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/miniapps/forge/vite.config.ts b/miniapps/forge/vite.config.ts
new file mode 100644
index 00000000..5fe2bc66
--- /dev/null
+++ b/miniapps/forge/vite.config.ts
@@ -0,0 +1,72 @@
+import { defineConfig, type Plugin } from 'vite'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
+import mkcert from 'vite-plugin-mkcert'
+import { resolve } from 'path'
+import { existsSync, readFileSync, readdirSync } from 'fs'
+
+const E2E_SCREENSHOTS_DIR = resolve(__dirname, '../../e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts')
+const MANIFEST_PATH = resolve(__dirname, 'manifest.json')
+
+function getShortId(): string {
+  const manifest = JSON.parse(readFileSync(MANIFEST_PATH, 'utf-8'))
+  return manifest.id.split('.').pop() || ''
+}
+
+function scanScreenshots(shortId: string): string[] {
+  if (!existsSync(E2E_SCREENSHOTS_DIR)) return []
+  return readdirSync(E2E_SCREENSHOTS_DIR)
+    .filter(f => f.startsWith(`${shortId}-`) && f.endsWith('.png'))
+    .slice(0, 2)
+    .map(f => `screenshots/${f}`)
+}
+
+function miniappPlugin(): Plugin {
+  const shortId = getShortId()
+  return {
+    name: 'miniapp-manifest',
+    configureServer(server) {
+      server.middlewares.use('/manifest.json', (_req, res) => {
+        const manifest = JSON.parse(readFileSync(MANIFEST_PATH, 'utf-8'))
+        manifest.screenshots = scanScreenshots(shortId)
+        res.setHeader('Content-Type', 'application/json')
+        res.setHeader('Access-Control-Allow-Origin', '*')
+        res.end(JSON.stringify(manifest, null, 2))
+      })
+      server.middlewares.use('/screenshots', (req, res, next) => {
+        const filename = req.url?.slice(1) || ''
+        const filepath = resolve(E2E_SCREENSHOTS_DIR, filename)
+        if (existsSync(filepath)) {
+          res.setHeader('Content-Type', 'image/png')
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          res.end(readFileSync(filepath))
+          return
+        }
+        next()
+      })
+    },
+  }
+}
+
+export default defineConfig({
+  plugins: [
+    mkcert(),
+    react(),
+    tsconfigPaths(),
+    tailwindcss(),
+    miniappPlugin(),
+  ],
+  base: './',
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+  server: {
+    https: true,
+    port: 5184,
+    fs: {
+      allow: [resolve(__dirname, '../..')],
+    },
+  },
+})
diff --git a/miniapps/forge/vitest.config.ts b/miniapps/forge/vitest.config.ts
new file mode 100644
index 00000000..40d3f57d
--- /dev/null
+++ b/miniapps/forge/vitest.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.test.{ts,tsx}'],
+    setupFiles: ['./src/test-setup.ts'],
+  },
+})
diff --git a/miniapps/teleport/.oxlintrc.json b/miniapps/teleport/.oxlintrc.json
new file mode 100644
index 00000000..252827a8
--- /dev/null
+++ b/miniapps/teleport/.oxlintrc.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "jsx-a11y", "unicorn"],
+  "jsPlugins": ["eslint-plugin-i18next"],
+  "categories": {
+    "correctness": "warn",
+    "suspicious": "warn",
+    "pedantic": "off",
+    "perf": "warn",
+    "style": "off",
+    "restriction": "off",
+    "nursery": "off"
+  },
+  "rules": {
+    "no-unused-vars": "warn",
+    "no-console": "warn",
+    "eqeqeq": "error",
+    "no-var": "error",
+    "prefer-const": "warn",
+
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-key": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-unescaped-entities": "warn",
+    "react/self-closing-comp": "warn",
+    "react/jsx-no-useless-fragment": "warn",
+    "react/jsx-curly-brace-presence": "warn",
+    "react/no-array-index-key": "warn",
+
+    "typescript/no-explicit-any": "error",
+    "typescript/prefer-ts-expect-error": "warn",
+    "typescript/no-non-null-assertion": "warn",
+
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/anchor-is-valid": "warn",
+
+    "unicorn/no-null": "off",
+    "unicorn/prefer-query-selector": "off",
+    "unicorn/require-module-specifiers": "off",
+
+    "i18next/no-literal-string": ["warn", {
+      "mode": "jsx-only",
+      "jsx-components": { "exclude": ["Trans", "Icon", "TablerIcon"] },
+      "jsx-attributes": {
+        "exclude": [
+          "className", "styleName", "style", "type", "key", "id", "name", "role", "as", "asChild",
+          "data-testid", "data-test", "data-slot", "data-state", "data-side", "data-align",
+          "to", "href", "src", "alt", "target", "rel", "method", "action",
+          "variant", "size", "color", "weight", "sign", "align", "justify", "direction", "orientation"
+        ]
+      },
+      "callees": {
+        "exclude": [
+          "t", "i18n.t", "useTranslation", "Trans",
+          "console.*", "require", "import", "Error", "TypeError",
+          "describe", "it", "test", "expect", "vi.*"
+        ]
+      },
+      "words": {
+        "exclude": ["[A-Z_-]+", "[0-9.]+", "^\\s*$", "^[a-z]+$", "^https?://"]
+      }
+    }]
+  },
+  "env": {
+    "browser": true,
+    "es2024": true
+  },
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "coverage",
+    "*.config.ts",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ]
+}
diff --git a/miniapps/teleport/components.json b/miniapps/teleport/components.json
new file mode 100644
index 00000000..33f22780
--- /dev/null
+++ b/miniapps/teleport/components.json
@@ -0,0 +1 @@
+{"$schema":"https://ui.shadcn.com/schema.json","style":"new-york","rsc":false,"tsx":true,"tailwind":{"config":"","css":"src/index.css","baseColor":"zinc","cssVariables":true,"prefix":""},"aliases":{"components":"@/components","utils":"@/lib/utils","ui":"@/components/ui","lib":"@/lib","hooks":"@/hooks"}}
diff --git a/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/01-connect.png b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/01-connect.png
new file mode 100644
index 00000000..58748199
Binary files /dev/null and b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/01-connect.png differ
diff --git a/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/02-select-asset.png b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/02-select-asset.png
new file mode 100644
index 00000000..e3c23969
Binary files /dev/null and b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/02-select-asset.png differ
diff --git a/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/03-input-amount.png b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/03-input-amount.png
new file mode 100644
index 00000000..5626cd0c
Binary files /dev/null and b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/03-input-amount.png differ
diff --git a/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/04-amount-filled.png b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/04-amount-filled.png
new file mode 100644
index 00000000..2acc32fc
Binary files /dev/null and b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/04-amount-filled.png differ
diff --git a/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/05-select-target.png b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/05-select-target.png
new file mode 100644
index 00000000..f0036bee
Binary files /dev/null and b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/05-select-target.png differ
diff --git a/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/06-confirm.png b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/06-confirm.png
new file mode 100644
index 00000000..2d620264
Binary files /dev/null and b/miniapps/teleport/e2e/__screenshots__/Mobile-Chrome/ui.spec.ts/06-confirm.png differ
diff --git a/miniapps/teleport/e2e/ui.spec.ts b/miniapps/teleport/e2e/ui.spec.ts
new file mode 100644
index 00000000..ba345e33
--- /dev/null
+++ b/miniapps/teleport/e2e/ui.spec.ts
@@ -0,0 +1,111 @@
+import { test, expect } from '@playwright/test'
+
+// Mock bio SDK
+const mockBioSDK = `
+  window.bio = {
+    request: async ({ method }) => {
+      if (method === 'bio_selectAccount') {
+        return { address: '0x1234567890abcdef1234567890abcdef12345678', name: 'Test Wallet' }
+      }
+      if (method === 'bio_pickWallet') {
+        return { address: '0xabcdef1234567890abcdef1234567890abcdef12', name: 'Target Wallet' }
+      }
+      return {}
+    }
+  }
+`
+
+test.describe('Teleport 小程序 UI', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+  })
+
+  test('01 - 连接页面', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(800)
+    await expect(page).toHaveScreenshot('01-connect.png')
+  })
+
+  test('02 - 选择资产页面', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("启动传送门")')
+    await page.waitForTimeout(500)
+    
+    await expect(page).toHaveScreenshot('02-select-asset.png')
+  })
+
+  test('03 - 输入金额页面', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("启动传送门")')
+    await page.waitForTimeout(300)
+    
+    // 选择 BFM 资产
+    await page.click('[data-slot="card"]:has-text("BFM")')
+    await page.waitForTimeout(300)
+    
+    await expect(page).toHaveScreenshot('03-input-amount.png')
+  })
+
+  test('04 - 输入金额后', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("启动传送门")')
+    await page.waitForTimeout(300)
+    
+    await page.click('[data-slot="card"]:has-text("BFM")')
+    await page.waitForTimeout(300)
+    
+    await page.fill('input[type="number"]', '500')
+    await page.waitForTimeout(300)
+    
+    await expect(page).toHaveScreenshot('04-amount-filled.png')
+  })
+
+  test('05 - 选择目标钱包页面', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("启动传送门")')
+    await page.waitForTimeout(300)
+    
+    await page.click('[data-slot="card"]:has-text("BFM")')
+    await page.waitForTimeout(300)
+    
+    await page.fill('input[type="number"]', '500')
+    await page.click('button:has-text("下一步")')
+    await page.waitForTimeout(300)
+    
+    await expect(page).toHaveScreenshot('05-select-target.png')
+  })
+
+  test('06 - 确认页面', async ({ page }) => {
+    await page.addInitScript(mockBioSDK)
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+    
+    await page.click('button:has-text("启动传送门")')
+    await page.waitForTimeout(300)
+    
+    await page.click('[data-slot="card"]:has-text("BFM")')
+    await page.waitForTimeout(300)
+    
+    await page.fill('input[type="number"]', '500')
+    await page.click('button:has-text("下一步")')
+    await page.waitForTimeout(300)
+    
+    await page.click('button:has-text("选择目标钱包")')
+    await page.waitForTimeout(300)
+    
+    await expect(page).toHaveScreenshot('06-confirm.png')
+  })
+})
diff --git a/miniapps/teleport/index.html b/miniapps/teleport/index.html
new file mode 100644
index 00000000..560ee01a
--- /dev/null
+++ b/miniapps/teleport/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>一键传送 - Bio 生态</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/miniapps/teleport/manifest.json b/miniapps/teleport/manifest.json
new file mode 100644
index 00000000..d997f637
--- /dev/null
+++ b/miniapps/teleport/manifest.json
@@ -0,0 +1,21 @@
+{
+  "id": "xin.dweb.teleport",
+  "name": "一键传送",
+  "description": "跨钱包资产转移，将资产从一个地址安全转移到另一个地址",
+  "longDescription": "一键传送是 Bio 生态的核心工具，支持在多条链之间安全转移资产。\n\n## 功能特点\n- 支持多链资产转移\n- 安全的签名机制\n- 实时交易状态追踪",
+  "icon": "icon.svg",
+  "version": "0.1.0",
+  "author": "Bio Team",
+  "website": "https://teleport.dweb.xin",
+  "category": "tools",
+  "tags": ["转账", "跨链", "资产管理"],
+  "permissions": ["bio_requestAccounts", "bio_selectAccount", "bio_pickWallet", "bio_signMessage"],
+  "chains": ["bfmeta", "bfchainv2", "biwmeta", "ccchain", "pmchain"],
+  "officialScore": 90,
+  "communityScore": 80,
+  "screenshots": [],
+  "publishedAt": "2024-12-01",
+  "updatedAt": "2024-12-28",
+  "beta": false,
+  "themeColor": "from-indigo-800 via-purple-900 to-violet-950"
+}
diff --git a/miniapps/teleport/package.json b/miniapps/teleport/package.json
new file mode 100644
index 00000000..f440884e
--- /dev/null
+++ b/miniapps/teleport/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@biochain/miniapp-teleport",
+  "private": true,
+  "version": "0.1.0",
+  "description": "一键传送 - 跨钱包资产转移",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "oxlint .",
+    "lint:run": "oxlint .",
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:storybook": "echo 'Miniapp has no storybook'",
+    "e2e": "bun scripts/e2e.ts",
+    "e2e:run": "bun scripts/e2e.ts",
+    "e2e:update": "bun scripts/e2e.ts --update-snapshots",
+    "e2e:ui": "playwright test --ui",
+    "e2e:audit": "bunx @biochain/e2e-tools audit --strict",
+    "i18n:run": "bunx @biochain/i18n-tools",
+    "theme:run": "bunx @biochain/theme-tools"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@biochain/bio-sdk": "workspace:*",
+    "@biochain/keyapp-sdk": "workspace:*",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
+    "i18next": "^25.2.1",
+    "lucide-react": "^0.562.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.5.2",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@biochain/e2e-tools": "workspace:*",
+    "@biochain/i18n-tools": "workspace:*",
+    "@biochain/theme-tools": "workspace:*",
+    "@playwright/test": "^1.49.1",
+    "@tailwindcss/vite": "^4.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint-plugin-i18next": "^6.1.3",
+    "jsdom": "^26.1.0",
+    "oxlint": "^1.32.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-mkcert": "^1.17.9",
+    "vite-tsconfig-paths": "^5.1.0",
+    "vitest": "^4.0.0"
+  }
+}
diff --git a/miniapps/teleport/playwright.config.ts b/miniapps/teleport/playwright.config.ts
new file mode 100644
index 00000000..15aa1c2c
--- /dev/null
+++ b/miniapps/teleport/playwright.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const baseURL = process.env.E2E_BASE_URL || 'https://localhost:5185'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  
+  use: {
+    baseURL,
+    ignoreHTTPSErrors: true,
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+
+  snapshotPathTemplate: '{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
+})
diff --git a/miniapps/teleport/public/icon.svg b/miniapps/teleport/public/icon.svg
new file mode 100644
index 00000000..57bb202a
--- /dev/null
+++ b/miniapps/teleport/public/icon.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6366f1"/>
+      <stop offset="100%" style="stop-color:#8b5cf6"/>
+    </linearGradient>
+    <linearGradient id="ring-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#a5b4fc"/>
+      <stop offset="100%" style="stop-color:#c4b5fd"/>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <!-- Background - 填满整个 viewBox -->
+  <rect width="120" height="120" fill="url(#bg-grad)"/>
+  <!-- Portal ring outer -->
+  <ellipse cx="60" cy="60" rx="32" ry="38" fill="none" stroke="url(#ring-grad)" stroke-width="4" opacity="0.6"/>
+  <!-- Portal ring inner -->
+  <ellipse cx="60" cy="60" rx="22" ry="28" fill="none" stroke="white" stroke-width="3" filter="url(#glow)"/>
+  <!-- Arrow -->
+  <path d="M45 60 L60 45 L60 52 L75 52 L75 68 L60 68 L60 75 Z" fill="white" filter="url(#glow)"/>
+  <!-- Sparkles -->
+  <circle cx="35" cy="40" r="2" fill="white" opacity="0.8"/>
+  <circle cx="85" cy="45" r="1.5" fill="white" opacity="0.6"/>
+  <circle cx="40" cy="80" r="1.5" fill="white" opacity="0.7"/>
+  <circle cx="80" cy="78" r="2" fill="white" opacity="0.5"/>
+</svg>
diff --git a/miniapps/teleport/scripts/e2e.ts b/miniapps/teleport/scripts/e2e.ts
new file mode 100644
index 00000000..d53c05a9
--- /dev/null
+++ b/miniapps/teleport/scripts/e2e.ts
@@ -0,0 +1,92 @@
+#!/usr/bin/env bun
+/**
+ * E2E 测试启动脚本
+ * 
+ * 动态检测可用端口，启动 vite dev server，然后运行 playwright 测试
+ */
+
+import { spawn } from 'child_process'
+import { createServer } from 'net'
+
+async function findAvailablePort(startPort: number): Promise<number> {
+  return new Promise((resolve) => {
+    const server = createServer()
+    server.listen(startPort, () => {
+      const port = (server.address() as { port: number }).port
+      server.close(() => resolve(port))
+    })
+    server.on('error', () => {
+      resolve(findAvailablePort(startPort + 1))
+    })
+  })
+}
+
+async function main() {
+  const args = process.argv.slice(2)
+  const updateSnapshots = args.includes('--update-snapshots') || args.includes('-u')
+  
+  const port = await findAvailablePort(5185)
+  console.log(`[e2e] Using port ${port}`)
+  
+  // Start vite dev server
+  const vite = spawn('pnpm', ['vite', '--port', String(port)], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+    env: { ...process.env },
+  })
+  
+  let serverReady = false
+  
+  vite.stdout?.on('data', (data) => {
+    const output = data.toString()
+    if (output.includes('ready in') || output.includes('Local:')) {
+      serverReady = true
+    }
+  })
+  
+  vite.stderr?.on('data', (data) => {
+    console.error(data.toString())
+  })
+  
+  // Wait for server to be ready
+  const maxWait = 30000
+  const startTime = Date.now()
+  while (!serverReady && Date.now() - startTime < maxWait) {
+    await new Promise(r => setTimeout(r, 200))
+  }
+  
+  if (!serverReady) {
+    console.error('[e2e] Server failed to start')
+    vite.kill()
+    process.exit(1)
+  }
+  
+  console.log('[e2e] Server ready, running tests...')
+  
+  // Run playwright
+  const playwrightArgs = ['playwright', 'test']
+  if (updateSnapshots) {
+    playwrightArgs.push('--update-snapshots')
+  }
+  
+  const playwright = spawn('npx', playwrightArgs, {
+    stdio: 'inherit',
+    env: { 
+      ...process.env, 
+      E2E_BASE_URL: `https://localhost:${port}`,
+    },
+  })
+  
+  playwright.on('close', (code) => {
+    vite.kill()
+    process.exit(code ?? 0)
+  })
+  
+  // Handle cleanup
+  process.on('SIGINT', () => {
+    vite.kill()
+    playwright.kill()
+    process.exit(0)
+  })
+}
+
+main()
diff --git a/miniapps/teleport/src/App.test.tsx b/miniapps/teleport/src/App.test.tsx
new file mode 100644
index 00000000..54ea97f7
--- /dev/null
+++ b/miniapps/teleport/src/App.test.tsx
@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import App from './App'
+
+// Mock bio SDK
+const mockBio = {
+  request: vi.fn(),
+  on: vi.fn(),
+  off: vi.fn(),
+  isConnected: vi.fn(() => true),
+}
+
+describe('Teleport App', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(window as unknown as { bio: typeof mockBio }).bio = mockBio
+  })
+
+  it('should render initial connect step', () => {
+    render(<App />)
+
+    expect(screen.getByText('一键传送')).toBeInTheDocument()
+    expect(screen.getByText('跨钱包传送')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '启动传送门' })).toBeInTheDocument()
+  })
+
+  it('should show loading state when connecting', async () => {
+    mockBio.request.mockImplementation(
+      () => new Promise((resolve) => setTimeout(() => resolve({ address: '0x123', chain: 'bioforest' }), 1000))
+    )
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '启动传送门' }))
+
+    expect(screen.getByRole('button', { name: '连接中...' })).toBeInTheDocument()
+  })
+
+  it('should proceed to select-asset after connecting', async () => {
+    mockBio.request.mockResolvedValue({ address: '0x123', chain: 'bioforest' })
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '启动传送门' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('选择资产')).toBeInTheDocument()
+    })
+  })
+
+  it('should show error when bio SDK not initialized', async () => {
+    ;(window as unknown as { bio: undefined }).bio = undefined
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '启动传送门' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Bio SDK 未初始化')).toBeInTheDocument()
+    })
+  })
+
+  it('should show error when connection fails', async () => {
+    mockBio.request.mockRejectedValue(new Error('Network error'))
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '启动传送门' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Network error')).toBeInTheDocument()
+    })
+  })
+
+  it('should call bio_selectAccount on connect', async () => {
+    mockBio.request.mockResolvedValue({ address: '0x123', chain: 'bioforest' })
+
+    render(<App />)
+
+    fireEvent.click(screen.getByRole('button', { name: '启动传送门' }))
+
+    await waitFor(() => {
+      expect(mockBio.request).toHaveBeenCalledWith({
+        method: 'bio_selectAccount',
+        params: [{}],
+      })
+    })
+  })
+})
diff --git a/miniapps/teleport/src/App.tsx b/miniapps/teleport/src/App.tsx
new file mode 100644
index 00000000..199c343b
--- /dev/null
+++ b/miniapps/teleport/src/App.tsx
@@ -0,0 +1,490 @@
+import { useState, useCallback } from 'react'
+import type { BioAccount } from '@biochain/bio-sdk'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { AuroraBackground } from './components/AuroraBackground'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { ChevronLeft, Zap, ArrowDown, Check, Coins, Leaf, DollarSign, Wallet, Loader2 } from 'lucide-react'
+
+type Step = 'connect' | 'select-asset' | 'input-amount' | 'select-target' | 'confirm' | 'success'
+
+interface Asset {
+  id: string
+  symbol: string
+  name: string
+  balance: string
+  chain: string
+}
+
+const MOCK_ASSETS: Asset[] = [
+  { id: 'bfm', symbol: 'BFM', name: 'BioForest', balance: '1,234.56', chain: 'bioforest' },
+  { id: 'eth', symbol: 'ETH', name: 'Ethereum', balance: '2.5', chain: 'ethereum' },
+  { id: 'usdt', symbol: 'USDT', name: 'Tether', balance: '500.00', chain: 'ethereum' },
+]
+
+const ASSET_COLORS: Record<string, string> = {
+  BFM: 'bg-emerald-600',
+  ETH: 'bg-indigo-600',
+  USDT: 'bg-teal-600',
+}
+
+export default function App() {
+  const [step, setStep] = useState<Step>('connect')
+  const [sourceAccount, setSourceAccount] = useState<BioAccount | null>(null)
+  const [targetAccount, setTargetAccount] = useState<BioAccount | null>(null)
+  const [selectedAsset, setSelectedAsset] = useState<Asset | null>(null)
+  const [amount, setAmount] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleConnect = useCallback(async () => {
+    if (!window.bio) {
+      setError('Bio SDK 未初始化')
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const account = await window.bio.request<BioAccount>({
+        method: 'bio_selectAccount',
+        params: [{}],
+      })
+      setSourceAccount(account)
+      setStep('select-asset')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '连接失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const handleSelectAsset = (asset: Asset) => {
+    setSelectedAsset(asset)
+    setStep('input-amount')
+  }
+
+  const handleAmountNext = () => {
+    if (!amount || parseFloat(amount) <= 0) {
+      setError('请输入有效金额')
+      return
+    }
+    setError(null)
+    setStep('select-target')
+  }
+
+  const handleSelectTarget = useCallback(async () => {
+    if (!window.bio || !sourceAccount) return
+    setLoading(true)
+    setError(null)
+    try {
+      const account = await window.bio.request<BioAccount>({
+        method: 'bio_pickWallet',
+        params: [{ chain: selectedAsset?.chain, exclude: sourceAccount.address }],
+      })
+      setTargetAccount(account)
+      setStep('confirm')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '选择失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [sourceAccount, selectedAsset])
+
+  const handleConfirm = useCallback(async () => {
+    if (!window.bio || !sourceAccount || !selectedAsset) return
+    setLoading(true)
+    setError(null)
+    try {
+      await window.bio.request<{ txHash: string }>({
+        method: 'bio_sendTransaction',
+        params: [{
+          from: sourceAccount.address,
+          to: targetAccount?.address,
+          amount: amount,
+          chain: selectedAsset.chain,
+          asset: selectedAsset.symbol,
+        }],
+      })
+      setStep('success')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '转账失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [sourceAccount, targetAccount, selectedAsset, amount])
+
+  const handleReset = useCallback(() => {
+    setStep('connect')
+    setSourceAccount(null)
+    setTargetAccount(null)
+    setSelectedAsset(null)
+    setAmount('')
+    setError(null)
+  }, [])
+
+  const handleBack = () => {
+    const backMap: Record<Step, Step> = {
+      'select-asset': 'connect',
+      'input-amount': 'select-asset',
+      'select-target': 'input-amount',
+      'confirm': 'select-target',
+      'connect': 'connect',
+      'success': 'success',
+    }
+    setStep(backMap[step])
+  }
+
+  return (
+    <AuroraBackground className="min-h-screen">
+      <div className="relative z-10 w-full max-w-md mx-auto min-h-screen flex flex-col">
+        {/* Header */}
+        <header className="sticky top-0 z-20 backdrop-blur-md bg-background/80 border-b border-border">
+          <div className="flex items-center h-14 px-4">
+            {!['connect', 'success'].includes(step) ? (
+              <Button variant="ghost" size="icon-sm" onClick={handleBack}>
+                <ChevronLeft className="size-5" />
+              </Button>
+            ) : <div className="w-7" />}
+            <h1 className="flex-1 text-center font-bold">一键传送</h1>
+            <div className="w-7" />
+          </div>
+        </header>
+
+        {/* Content */}
+        <main className="flex-1 flex flex-col p-4">
+          {error && (
+            <motion.div 
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+            >
+              <Card className="mb-4 border-destructive/50 bg-destructive/10">
+                <CardContent className="py-3 text-destructive text-sm">
+                  {error}
+                </CardContent>
+              </Card>
+            </motion.div>
+          )}
+
+          <AnimatePresence mode="wait">
+            {/* Connect */}
+            {step === 'connect' && (
+              <motion.div
+                key="connect"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                className="flex-1 flex flex-col items-center justify-center gap-8 pb-20"
+              >
+                <div className="relative">
+                  <div className="absolute inset-0 bg-primary/30 blur-3xl rounded-full" />
+                  <Avatar className="relative size-24 rounded-2xl border border-white/20">
+                    <AvatarFallback className="rounded-2xl bg-white/10 backdrop-blur">
+                      <Zap className="size-12 text-white" strokeWidth={1.5} />
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+                
+                <div className="text-center space-y-2">
+                  <h2 className="text-2xl font-bold">跨钱包传送</h2>
+                  <p className="text-muted-foreground text-sm">安全地将资产转移到另一个钱包</p>
+                </div>
+                
+                <Button 
+                  size="lg" 
+                  className="w-full max-w-xs h-12"
+                  onClick={handleConnect} 
+                  disabled={loading}
+                >
+                  {loading && <Loader2 className="size-4 animate-spin mr-2" />}
+                  {loading ? '连接中...' : '启动传送门'}
+                </Button>
+              </motion.div>
+            )}
+
+            {/* Select Asset */}
+            {step === 'select-asset' && (
+              <motion.div
+                key="select-asset"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="flex-1 flex flex-col gap-4"
+              >
+                <WalletCard label="源钱包" address={sourceAccount?.address} name={sourceAccount?.name} />
+                
+                <div className="space-y-3">
+                  <CardDescription className="px-1">选择资产</CardDescription>
+                  {MOCK_ASSETS.map((asset, i) => (
+                    <motion.div
+                      key={asset.id}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: i * 0.05 }}
+                    >
+                      <Card 
+                        data-slot="card"
+                        className="cursor-pointer transition-colors hover:bg-accent"
+                        onClick={() => handleSelectAsset(asset)}
+                      >
+                        <CardContent className="py-3 flex items-center gap-3">
+                          <AssetAvatar symbol={asset.symbol} />
+                          <div className="flex-1 min-w-0">
+                            <CardTitle className="text-base">{asset.symbol}</CardTitle>
+                            <CardDescription>{asset.name}</CardDescription>
+                          </div>
+                          <div className="text-right">
+                            <div className="font-semibold">{asset.balance}</div>
+                            <CardDescription>可用</CardDescription>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </motion.div>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+
+            {/* Input Amount */}
+            {step === 'input-amount' && selectedAsset && (
+              <motion.div
+                key="input-amount"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="flex-1 flex flex-col gap-4"
+              >
+                <WalletCard label="源钱包" address={sourceAccount?.address} name={sourceAccount?.name} />
+
+                <Card className="flex-1">
+                  <CardContent className="h-full flex flex-col items-center justify-center gap-4 py-8">
+                    <AssetAvatar symbol={selectedAsset.symbol} size="lg" />
+                    <div className="text-center">
+                      <CardTitle>{selectedAsset.symbol}</CardTitle>
+                      <CardDescription>可用: {selectedAsset.balance}</CardDescription>
+                    </div>
+                    <div className="w-full max-w-xs relative">
+                      <Input
+                        type="number"
+                        value={amount}
+                        onChange={(e) => setAmount(e.target.value)}
+                        placeholder="0.00"
+                        className="text-center text-3xl font-bold h-14 border-0 border-b-2 border-primary/50 rounded-none focus-visible:ring-0 focus-visible:border-primary"
+                      />
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-1/2 -translate-y-1/2 h-7 text-xs"
+                        onClick={() => setAmount(selectedAsset.balance.replace(/,/g, ''))}
+                      >
+                        MAX
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Button className="w-full h-12" onClick={handleAmountNext} disabled={!amount || parseFloat(amount) <= 0}>
+                  下一步
+                </Button>
+              </motion.div>
+            )}
+
+            {/* Select Target */}
+            {step === 'select-target' && (
+              <motion.div
+                key="select-target"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="flex-1 flex flex-col items-center justify-center gap-8 pb-20"
+              >
+                <Card className="w-full">
+                  <CardContent className="py-4 text-center">
+                    <CardDescription className="mb-1">即将传送</CardDescription>
+                    <div className="text-2xl font-bold flex items-center justify-center gap-2">
+                      <AssetAvatar symbol={selectedAsset!.symbol} size="sm" />
+                      {amount} <span className="text-muted-foreground">{selectedAsset?.symbol}</span>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <div className="relative">
+                  <div className="absolute inset-0 bg-primary/30 blur-2xl rounded-full animate-pulse" />
+                  <Avatar className="relative size-16 bg-primary">
+                    <AvatarFallback className="bg-transparent">
+                      <ArrowDown className="size-8 text-primary-foreground" />
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+
+                <div className="text-center space-y-2">
+                  <p className="text-muted-foreground">请选择接收资产的</p>
+                  <p className="font-semibold">目标钱包</p>
+                </div>
+
+                <Button 
+                  size="lg" 
+                  className="w-full max-w-xs h-12" 
+                  onClick={handleSelectTarget} 
+                  disabled={loading}
+                >
+                  {loading && <Loader2 className="size-4 animate-spin mr-2" />}
+                  {loading ? '扫描中...' : '选择目标钱包'}
+                </Button>
+              </motion.div>
+            )}
+
+            {/* Confirm */}
+            {step === 'confirm' && (
+              <motion.div
+                key="confirm"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="flex-1 flex flex-col gap-4"
+              >
+                <Card>
+                  <CardContent className="py-6 text-center space-y-4">
+                    <div>
+                      <CardDescription className="mb-1">发送</CardDescription>
+                      <div className="text-3xl font-bold flex items-center justify-center gap-2">
+                        <AssetAvatar symbol={selectedAsset!.symbol} size="sm" />
+                        {amount} <span className="text-lg text-muted-foreground">{selectedAsset?.symbol}</span>
+                      </div>
+                    </div>
+                    <div className="flex justify-center">
+                      <Avatar className="size-10 border border-primary/30 bg-primary/10">
+                        <AvatarFallback className="bg-transparent">
+                          <ArrowDown className="size-5 text-primary" />
+                        </AvatarFallback>
+                      </Avatar>
+                    </div>
+                    <div className="space-y-2">
+                      <WalletCard label="发送方" address={sourceAccount?.address} name={sourceAccount?.name} compact />
+                      <WalletCard label="接收方" address={targetAccount?.address} name={targetAccount?.name} compact highlight />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardContent className="py-4 space-y-3 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">网络</span>
+                      <Badge variant="outline">{selectedAsset?.chain}</Badge>
+                    </div>
+                    <Separator />
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">手续费</span>
+                      <Badge className="bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20">免费</Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <div className="mt-auto pt-4">
+                  <Button className="w-full h-12" onClick={handleConfirm} disabled={loading}>
+                    {loading && <Loader2 className="size-4 animate-spin mr-2" />}
+                    {loading ? '处理中...' : '确认传送'}
+                  </Button>
+                </div>
+              </motion.div>
+            )}
+
+            {/* Success */}
+            {step === 'success' && (
+              <motion.div
+                key="success"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="flex-1 flex flex-col items-center justify-center gap-6 pb-20"
+              >
+                <Avatar className="size-20 border border-emerald-500/30 bg-emerald-500/10">
+                  <AvatarFallback className="bg-transparent">
+                    <Check className="size-10 text-emerald-500" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="text-center space-y-2">
+                  <h2 className="text-xl font-bold">传送成功</h2>
+                  <p className="text-2xl font-bold text-emerald-400">{amount} {selectedAsset?.symbol}</p>
+                  <p className="text-sm text-muted-foreground">已发送至目标钱包</p>
+                </div>
+                <Button variant="outline" className="w-full max-w-xs" onClick={handleReset}>
+                  发起新传送
+                </Button>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </main>
+      </div>
+    </AuroraBackground>
+  )
+}
+
+function WalletCard({ label, address, name, compact, highlight }: { 
+  label: string
+  address?: string
+  name?: string
+  compact?: boolean
+  highlight?: boolean
+}) {
+  if (compact) {
+    return (
+      <Card className={cn("border-0", highlight ? "bg-primary/10" : "bg-muted/50")}>
+        <CardContent className="py-2 flex items-center gap-3">
+          <Avatar className={cn("size-8", highlight ? "bg-primary/20 text-primary-foreground" : "bg-muted text-muted-foreground")}>
+            <AvatarFallback className="bg-transparent">
+              <Wallet className="size-4" />
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1 min-w-0 text-left">
+            <CardDescription className="text-xs">{label}</CardDescription>
+            <div className="text-sm font-medium truncate">{name || truncateAddress(address)}</div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+  
+  return (
+    <Card>
+      <CardContent className="py-3 flex items-center gap-3">
+        <Avatar className="size-10 bg-primary/20">
+          <AvatarFallback className="bg-transparent">
+            <Wallet className="size-5 text-primary" />
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex-1 min-w-0">
+          <CardDescription>{label}</CardDescription>
+          <CardTitle className="text-base truncate">{name || 'Unknown'}</CardTitle>
+          <CardDescription className="truncate">{address}</CardDescription>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function AssetAvatar({ symbol, size = 'md' }: { symbol: string; size?: 'sm' | 'md' | 'lg' }) {
+  const icons: Record<string, React.ReactNode> = {
+    BFM: <Leaf />,
+    ETH: <Coins />,
+    USDT: <DollarSign />,
+  }
+  const sizeClass = size === 'lg' ? 'size-16 [&_svg]:size-8' : size === 'md' ? 'size-10 [&_svg]:size-5' : 'size-6 [&_svg]:size-3'
+  
+  return (
+    <Avatar className={cn(sizeClass, ASSET_COLORS[symbol] || 'bg-muted')}>
+      <AvatarFallback className="bg-transparent text-white">
+        {icons[symbol] || <Coins />}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
+
+function truncateAddress(address?: string): string {
+  if (!address) return ''
+  if (address.length <= 12) return address
+  return `${address.slice(0, 6)}...${address.slice(-4)}`
+}
diff --git a/miniapps/teleport/src/bio.d.ts b/miniapps/teleport/src/bio.d.ts
new file mode 100644
index 00000000..1d485f1a
--- /dev/null
+++ b/miniapps/teleport/src/bio.d.ts
@@ -0,0 +1,7 @@
+import type { BioProvider } from '@biochain/bio-sdk'
+
+declare global {
+  interface Window {
+    bio?: BioProvider
+  }
+}
diff --git a/miniapps/teleport/src/components/AuroraBackground.tsx b/miniapps/teleport/src/components/AuroraBackground.tsx
new file mode 100644
index 00000000..a6934e56
--- /dev/null
+++ b/miniapps/teleport/src/components/AuroraBackground.tsx
@@ -0,0 +1,49 @@
+"use client";
+import { cn } from "@/lib/utils";
+import React, { ReactNode } from "react";
+
+interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  showRadialGradient?: boolean;
+}
+
+export const AuroraBackground = ({
+  className,
+  children,
+  showRadialGradient = true,
+  ...props
+}: AuroraBackgroundProps) => {
+  return (
+    <main>
+      <div
+        className={cn(
+          "relative flex flex-col h-[100vh] items-center justify-center bg-slate-900 text-white transition-bg",
+          className
+        )}
+        {...props}
+      >
+        <div className="absolute inset-0 overflow-hidden">
+          <div
+            className={cn(
+              `
+            [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)]
+            [--aurora:repeating-linear-gradient(100deg,#6366f1_10%,#8b5cf6_15%,#a855f7_20%,#6366f1_25%,#8b5cf6_30%)]
+            [background-image:var(--dark-gradient),var(--aurora)]
+            [background-size:300%,_200%]
+            [background-position:50%_50%,50%_50%]
+            filter blur-[10px]
+            after:content-[""] after:absolute after:inset-0 after:[background-image:var(--dark-gradient),var(--aurora)]
+            after:[background-size:200%,_100%] 
+            after:animate-aurora after:[background-attachment:fixed] after:mix-blend-difference
+            pointer-events-none
+            absolute -inset-[10px] opacity-50 will-change-transform`,
+              showRadialGradient &&
+                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`
+            )}
+          ></div>
+        </div>
+        {children}
+      </div>
+    </main>
+  );
+};
diff --git a/miniapps/teleport/src/components/GlowButton.tsx b/miniapps/teleport/src/components/GlowButton.tsx
new file mode 100644
index 00000000..3f583f9e
--- /dev/null
+++ b/miniapps/teleport/src/components/GlowButton.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export const GlowButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+      <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-8 py-1 text-sm font-medium text-white backdrop-blur-3xl transition-colors hover:bg-slate-900/90">
+        {children}
+      </span>
+    </button>
+  );
+});
+GlowButton.displayName = "GlowButton";
diff --git a/miniapps/teleport/src/components/ui/avatar.tsx b/miniapps/teleport/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..d78bf876
--- /dev/null
+++ b/miniapps/teleport/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/miniapps/teleport/src/components/ui/badge.tsx b/miniapps/teleport/src/components/ui/badge.tsx
new file mode 100644
index 00000000..305f2c44
--- /dev/null
+++ b/miniapps/teleport/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/miniapps/teleport/src/components/ui/button.tsx b/miniapps/teleport/src/components/ui/button.tsx
new file mode 100644
index 00000000..e0ff73be
--- /dev/null
+++ b/miniapps/teleport/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/miniapps/teleport/src/components/ui/card.tsx b/miniapps/teleport/src/components/ui/card.tsx
new file mode 100644
index 00000000..681ad980
--- /dev/null
+++ b/miniapps/teleport/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/miniapps/teleport/src/components/ui/input.tsx b/miniapps/teleport/src/components/ui/input.tsx
new file mode 100644
index 00000000..89169058
--- /dev/null
+++ b/miniapps/teleport/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/miniapps/teleport/src/components/ui/select.tsx b/miniapps/teleport/src/components/ui/select.tsx
new file mode 100644
index 00000000..b8aab978
--- /dev/null
+++ b/miniapps/teleport/src/components/ui/select.tsx
@@ -0,0 +1,188 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/miniapps/teleport/src/components/ui/separator.tsx b/miniapps/teleport/src/components/ui/separator.tsx
new file mode 100644
index 00000000..bb3ad74c
--- /dev/null
+++ b/miniapps/teleport/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/miniapps/teleport/src/i18n/index.ts b/miniapps/teleport/src/i18n/index.ts
new file mode 100644
index 00000000..49c83d4a
--- /dev/null
+++ b/miniapps/teleport/src/i18n/index.ts
@@ -0,0 +1,36 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+import zh from './locales/zh.json'
+import en from './locales/en.json'
+
+/**
+ * Miniapp i18n 配置
+ * 
+ * Fallback 规则：
+ * - zh-CN, zh-TW, zh-HK, zh-* → zh
+ * - 其他语言 → en
+ */
+
+i18n.use(initReactI18next).init({
+  resources: {
+    zh: { translation: zh },
+    en: { translation: en },
+  },
+  lng: 'zh',
+  fallbackLng: {
+    'zh-CN': ['zh'],
+    'zh-TW': ['zh'],
+    'zh-HK': ['zh'],
+    'zh': ['zh'],
+    'default': ['en'],
+  },
+  interpolation: {
+    escapeValue: false,
+  },
+  react: {
+    useSuspense: false,
+  },
+})
+
+export default i18n
diff --git a/miniapps/teleport/src/i18n/locales/en.json b/miniapps/teleport/src/i18n/locales/en.json
new file mode 100644
index 00000000..7af26153
--- /dev/null
+++ b/miniapps/teleport/src/i18n/locales/en.json
@@ -0,0 +1,49 @@
+{
+  "app": {
+    "title": "Teleport",
+    "subtitle": "Cross-Wallet Transfer",
+    "description": "Safely transfer assets from one wallet to another"
+  },
+  "connect": {
+    "button": "Select Source Wallet",
+    "loading": "Connecting..."
+  },
+  "asset": {
+    "select": "Select asset to transfer",
+    "balance": "Available"
+  },
+  "amount": {
+    "label": "Transfer Amount",
+    "placeholder": "0.00",
+    "max": "Max",
+    "next": "Next"
+  },
+  "target": {
+    "title": "Select Target Wallet",
+    "description": "Choose the wallet to receive the assets",
+    "button": "Select Target Wallet",
+    "loading": "Selecting..."
+  },
+  "confirm": {
+    "title": "Confirm Transfer",
+    "from": "From",
+    "to": "To",
+    "amount": "Transfer",
+    "network": "Network",
+    "button": "Confirm Transfer",
+    "loading": "Processing..."
+  },
+  "success": {
+    "title": "Transfer Successful!",
+    "message": "sent",
+    "txWait": "Transaction confirmation may take a few minutes",
+    "done": "Done"
+  },
+  "error": {
+    "sdkNotInit": "Bio SDK not initialized",
+    "connectionFailed": "Connection failed",
+    "selectFailed": "Selection failed",
+    "transferFailed": "Transfer failed",
+    "invalidAmount": "Please enter a valid amount"
+  }
+}
diff --git a/miniapps/teleport/src/i18n/locales/zh.json b/miniapps/teleport/src/i18n/locales/zh.json
new file mode 100644
index 00000000..e12a19a7
--- /dev/null
+++ b/miniapps/teleport/src/i18n/locales/zh.json
@@ -0,0 +1,49 @@
+{
+  "app": {
+    "title": "一键传送",
+    "subtitle": "跨钱包传送",
+    "description": "安全地将资产从一个钱包转移到另一个钱包"
+  },
+  "connect": {
+    "button": "选择源钱包",
+    "loading": "连接中..."
+  },
+  "asset": {
+    "select": "选择要传送的资产",
+    "balance": "可用"
+  },
+  "amount": {
+    "label": "传送数量",
+    "placeholder": "0.00",
+    "max": "全部",
+    "next": "下一步"
+  },
+  "target": {
+    "title": "选择目标钱包",
+    "description": "选择接收资产的目标钱包",
+    "button": "选择目标钱包",
+    "loading": "选择中..."
+  },
+  "confirm": {
+    "title": "确认传送",
+    "from": "从",
+    "to": "到",
+    "amount": "传送",
+    "network": "网络",
+    "button": "确认传送",
+    "loading": "处理中..."
+  },
+  "success": {
+    "title": "传送成功！",
+    "message": "已发送",
+    "txWait": "交易确认可能需要几分钟",
+    "done": "完成"
+  },
+  "error": {
+    "sdkNotInit": "Bio SDK 未初始化",
+    "connectionFailed": "连接失败",
+    "selectFailed": "选择失败",
+    "transferFailed": "转账失败",
+    "invalidAmount": "请输入有效金额"
+  }
+}
diff --git a/miniapps/teleport/src/index.css b/miniapps/teleport/src/index.css
new file mode 100644
index 00000000..0ccf0ed0
--- /dev/null
+++ b/miniapps/teleport/src/index.css
@@ -0,0 +1,146 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-aurora: aurora 60s linear infinite;
+  
+  @keyframes aurora {
+    from {
+      background-position: 50% 50%, 50% 50%;
+    }
+    to {
+      background-position: 350% 50%, 350% 50%;
+    }
+  }
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* 移动端优化 */
+html,
+body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+input,
+textarea {
+  -webkit-user-select: text;
+  user-select: text;
+}
\ No newline at end of file
diff --git a/miniapps/teleport/src/lib/utils.ts b/miniapps/teleport/src/lib/utils.ts
new file mode 100644
index 00000000..bd0c391d
--- /dev/null
+++ b/miniapps/teleport/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/miniapps/teleport/src/main.tsx b/miniapps/teleport/src/main.tsx
new file mode 100644
index 00000000..b8b83297
--- /dev/null
+++ b/miniapps/teleport/src/main.tsx
@@ -0,0 +1,11 @@
+import './index.css'
+import '@biochain/bio-sdk'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
diff --git a/miniapps/teleport/src/test-setup.ts b/miniapps/teleport/src/test-setup.ts
new file mode 100644
index 00000000..eb352fb0
--- /dev/null
+++ b/miniapps/teleport/src/test-setup.ts
@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom/vitest'
+import { vi } from 'vitest'
+
+// Mock window.bio is set per test for proper isolation
diff --git a/miniapps/teleport/tsconfig.json b/miniapps/teleport/tsconfig.json
new file mode 100644
index 00000000..63d90d34
--- /dev/null
+++ b/miniapps/teleport/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/miniapps/teleport/vite.config.ts b/miniapps/teleport/vite.config.ts
new file mode 100644
index 00000000..7d27a830
--- /dev/null
+++ b/miniapps/teleport/vite.config.ts
@@ -0,0 +1,72 @@
+import { defineConfig, type Plugin } from 'vite'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
+import mkcert from 'vite-plugin-mkcert'
+import { resolve } from 'path'
+import { existsSync, readFileSync, readdirSync } from 'fs'
+
+const E2E_SCREENSHOTS_DIR = resolve(__dirname, '../../e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts')
+const MANIFEST_PATH = resolve(__dirname, 'manifest.json')
+
+function getShortId(): string {
+  const manifest = JSON.parse(readFileSync(MANIFEST_PATH, 'utf-8'))
+  return manifest.id.split('.').pop() || ''
+}
+
+function scanScreenshots(shortId: string): string[] {
+  if (!existsSync(E2E_SCREENSHOTS_DIR)) return []
+  return readdirSync(E2E_SCREENSHOTS_DIR)
+    .filter(f => f.startsWith(`${shortId}-`) && f.endsWith('.png'))
+    .slice(0, 2)
+    .map(f => `screenshots/${f}`)
+}
+
+function miniappPlugin(): Plugin {
+  const shortId = getShortId()
+  return {
+    name: 'miniapp-manifest',
+    configureServer(server) {
+      server.middlewares.use('/manifest.json', (_req, res) => {
+        const manifest = JSON.parse(readFileSync(MANIFEST_PATH, 'utf-8'))
+        manifest.screenshots = scanScreenshots(shortId)
+        res.setHeader('Content-Type', 'application/json')
+        res.setHeader('Access-Control-Allow-Origin', '*')
+        res.end(JSON.stringify(manifest, null, 2))
+      })
+      server.middlewares.use('/screenshots', (req, res, next) => {
+        const filename = req.url?.slice(1) || ''
+        const filepath = resolve(E2E_SCREENSHOTS_DIR, filename)
+        if (existsSync(filepath)) {
+          res.setHeader('Content-Type', 'image/png')
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          res.end(readFileSync(filepath))
+          return
+        }
+        next()
+      })
+    },
+  }
+}
+
+export default defineConfig({
+  plugins: [
+    mkcert(),
+    react(),
+    tsconfigPaths(),
+    tailwindcss(),
+    miniappPlugin(),
+  ],
+  base: './',
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+  server: {
+    https: true,
+    port: 5185,
+    fs: {
+      allow: [resolve(__dirname, '../..')],
+    },
+  },
+})
diff --git a/miniapps/teleport/vitest.config.ts b/miniapps/teleport/vitest.config.ts
new file mode 100644
index 00000000..40d3f57d
--- /dev/null
+++ b/miniapps/teleport/vitest.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.test.{ts,tsx}'],
+    setupFiles: ['./src/test-setup.ts'],
+  },
+})
diff --git a/openspec/changes/update-ecosystem-miniapp-platform/design.md b/openspec/changes/update-ecosystem-miniapp-platform/design.md
new file mode 100644
index 00000000..e2cd58cf
--- /dev/null
+++ b/openspec/changes/update-ecosystem-miniapp-platform/design.md
@@ -0,0 +1,77 @@
+## Context
+
+本变更属于“生态（miniapp）平台”的第二阶段完善：
+- 已有：iframe 容器、`window.bio` SDK、Host Provider、权限弹窗、可信源管理 UI、内置 miniapps 与 Vite 插件雏形
+- 需要补齐：订阅式缓存闭环、评分精选、可扩展搜索、交易流水线、appId 安全规范、导航同步基础设施可维护性
+
+## Goals / Non-Goals
+
+### Goals
+- 可信源配置与订阅数据形成单一闭环（SSR 订阅式）
+- “生态页”按评分做部分列出，避免全量堆砌
+- `createTransaction → signTransaction` 交易流水线 API 固化（不可省略）
+- appId 反向域名规范落地，并确保导航/路由稳定支持 `.` 参数
+- 自维护 navigation-sync 插件，替换停更依赖，未来可升级 Navigation API
+
+### Non-Goals
+- 不在本变更内完成“全站搜索”的后端实现（仅定义协议 + Host 适配入口）
+- 不在本变更内完成所有链类型的完整广播能力（先保证接口与安全流程正确）
+
+## Data Model
+
+### Source Config (User)
+- Store 只管理“可信源配置”（url/name/enabled），不直接存储完整 apps 列表。
+
+### Source Cache (Device)
+- IndexedDB 按 source URL 缓存：
+  - `etag`（用于 304）
+  - `lastUpdated`
+  - `payload`（EcosystemSource）
+
+### Ranking
+- `officialScore`：官方推荐分（0-100）
+- `communityScore`：社区热门分（0-100）
+- `officialWeightPct`：按日期动态权重（初始 `0`，每天 `+15` 并对 `100` 取模循环：`15,30,45,60,75,90,5,...`）
+- `communityWeightPct = 100 - officialWeightPct`
+- `featuredScore = (officialScore * officialWeightPct + communityScore * communityWeightPct) / 100`（0-100）
+
+> 若字段缺失：默认视为 0（保持来源可选，不强制所有源立刻支持）。
+
+## API Design
+
+### Bio Provider Transaction Pipeline
+
+#### bio_createTransaction
+- Input：`{ from, to, amount, chain, asset?, data? }`
+- Output：`{ chain, data }`（chain-specific unsigned tx）
+- Security：不需要用户确认，但必须校验 `from` 属于用户钱包（防构造恶意 from）。
+
+#### bio_signTransaction
+- Input：`{ from, chain, unsignedTx }`
+- Output：`{ chain, raw, signature? }`
+- Security：
+  - 必须用户确认 + 钱包锁验证
+  - 必须校验签名地址与 tx.from 一致
+
+### Search
+
+- Local search：基于已缓存 apps 做 fuzzy/contains（离线可用）
+- Remote search：订阅源可选提供 `search.urlTemplate`（固定 GET，模板形如 `https://example.com/search?q=%s`）
+- Remote search response：`{ version: string; data: MiniappManifest[] }`
+- 合并策略：
+  - 去重 key：`appId`
+  - 优先级：本地缓存（可带评分字段）覆盖远程结果同 id 的缺失字段
+
+## Navigation Sync Plugin
+
+### Baseline
+- 基于 Stackflow `plugin-history-sync` 行为对齐现有 app（hash routing + routes map）。
+
+### Key Changes
+- 使用 `urlpattern-polyfill`（URLPattern）替代 `url-pattern`
+  - 解决已停更依赖
+  - 更贴近浏览器未来标准
+- 移除 `react18-use`（可用 React 原生 hooks 实现）
+
+### Future
+- 预留 transport 抽象，后续可切换到 Navigation API。
diff --git a/openspec/changes/update-ecosystem-miniapp-platform/proposal.md b/openspec/changes/update-ecosystem-miniapp-platform/proposal.md
new file mode 100644
index 00000000..6825afca
--- /dev/null
+++ b/openspec/changes/update-ecosystem-miniapp-platform/proposal.md
@@ -0,0 +1,73 @@
+# Change: Update Ecosystem Miniapp Platform (Subscription v2 + Tx Pipeline + AppId + Navigation Sync)
+
+## Status
+
+**PROPOSAL** - Pending review and approval
+
+## Why
+
+当前 “生态（miniapp）” 平台已经完成了 iframe 容器、`window.bio` SDK、Host Provider、可信源管理 UI 与基础注册表，但存在以下关键问题：
+
+1. **可信源配置与数据拉取割裂**：设置页的可信源与运行时 registry 未形成单一真相（store/registry 分离），无法形成“SSR 订阅式”的缓存闭环。
+2. **订阅源能力过于基础**：当前倾向“全量列出”，缺少“部分列出 + 评分精选（官方/社区）”的产品化展示策略。
+3. **交易能力缺口**：仅 `sendTransaction` 不足以支撑真实 DApp 需求；必须提供 “createTransaction → signTransaction” 的交易流水线能力。
+4. **AppId 安全规范落地**：需要统一 `xxx.xx.xx` 反向域名命名，并确保路由/导航系统对包含 `.` 的参数稳定支持。
+5. **基础设施可维护性**：`@stackflow/plugin-history-sync` 依赖 `url-pattern`（停更），需要自维护插件版本以便未来升级到 Navigation API。
+
+## What Changes
+
+### 1) 订阅系统 v2（SSR 订阅原理）
+- 设置页维护多可信源 URL（可启用/禁用）。
+- 订阅源数据拉取后缓存到本地（IndexedDB + ETag/304 支持）。
+- “生态页”仅消费统一聚合结果（单一真相），避免 UI 层重复逻辑（DRY）。
+
+### 2) 展示策略：部分列出 + 评分精选
+- 引入评分字段：
+  - `officialScore`（官方推荐分）
+  - `communityScore`（社区热门分）
+  - `featuredScore`：按日期动态权重计算（官方/社区权重每日 +15 循环）
+- 生态页按评分生成：
+  - 精选（Top N）
+  - 推荐（Top N）
+  - 热门（Top N）
+
+### 3) 搜索接口：订阅列表以外的应用
+- 支持本地缓存内搜索（离线可用）。
+- 支持订阅源提供远程搜索 `search.urlTemplate`（固定 GET，形如 `https://example.com/search?q=%s`），用于“订阅列表以外”的应用搜索。
+- 远程搜索响应格式：`{ version: string; data: MiniappManifest[] }`。
+
+### 4) 交易流水线：createTransaction + signTransaction（不可省略）
+- SDK：补齐 `bio_createTransaction` 与 `bio_signTransaction` 方法与类型定义。
+- Host：补齐对应 handler（需要用户确认 + 钱包锁验证）。
+
+### 5) AppId 命名规范（反向域名）
+- 内置小程序与注册表数据必须遵守 `com.domain.app`（反向域名）命名。
+- Host 侧对 appId 做基础校验并避免冲突覆盖。
+
+### 6) 自维护 Navigation Sync 插件
+- 新增 `packages/plugin-navigation-sync`：
+  - 使用 `urlpattern-polyfill` 替代 `url-pattern`
+  - 逐步移除 `react18-use`
+  - 为未来升级 Navigation API 预留扩展点
+
+### 7) Build 闭环（Vite 插件）
+- 在 KeyApp 的 `vite.config.ts` 内通过插件系统完成：构建 miniapps → 生成 `ecosystem.json` → KeyApp 直接消费。
+
+## Impact
+
+### Affected Code (expected)
+- `src/services/ecosystem/*`：订阅缓存/评分/搜索能力
+- `src/stores/ecosystem.ts`：可信源配置作为单一真相
+- `packages/bio-sdk/*`：补齐交易流水线 API
+- `src/services/ecosystem/provider.ts` + `handlers/*`：新增方法注册与实现
+- `packages/plugin-navigation-sync/*`：新包（替代 `@stackflow/plugin-history-sync`）
+- `src/stackflow/stackflow.ts`：切换到自维护插件
+- `scripts/vite-plugin-miniapps.ts` / `vite.config.ts`：构建闭环与注册表生成
+
+## Success Criteria
+
+1. 设置页新增/启用/禁用可信源后，生态页刷新能稳定命中本地缓存与远程更新（ETag/304）。
+2. 生态页不再默认全量列出，而是按评分生成“精选/推荐/热门”的 Top 列表。
+3. `bio_createTransaction` 与 `bio_signTransaction` 在 SDK 与 Host 侧完整可用（含用户确认与钱包锁验证）。
+4. 内置小程序 appId 统一为反向域名格式，并且路由/导航对包含 `.` 的参数稳定解析。
+5. `packages/plugin-navigation-sync` 替代现有 history-sync 插件并通过测试（至少覆盖路由 parse/fill）。
diff --git a/openspec/changes/update-ecosystem-miniapp-platform/specs/ecosystem-miniapp/spec.md b/openspec/changes/update-ecosystem-miniapp-platform/specs/ecosystem-miniapp/spec.md
new file mode 100644
index 00000000..b69db876
--- /dev/null
+++ b/openspec/changes/update-ecosystem-miniapp-platform/specs/ecosystem-miniapp/spec.md
@@ -0,0 +1,79 @@
+# Ecosystem Miniapp Platform (Delta)
+
+## ADDED Requirements
+
+### Requirement: Trusted Source Configuration
+The system SHALL allow users to configure multiple trusted miniapp sources.
+
+#### Scenario: Enable/disable multiple sources
+- **GIVEN** the user has configured multiple sources
+- **WHEN** they disable one source
+- **THEN** apps from that source SHALL NOT appear in the ecosystem lists
+
+### Requirement: SSR-style Subscription Cache
+The system SHALL cache subscription source payloads locally and refresh incrementally.
+
+#### Scenario: Use ETag / 304 to reuse cache
+- **GIVEN** a source was fetched and cached with an ETag
+- **WHEN** the system refreshes the same source without force
+- **AND** the server responds `304 Not Modified`
+- **THEN** the system SHALL use the cached payload
+
+#### Scenario: Offline start uses cache
+- **GIVEN** the device is offline
+- **AND** cached payload exists for enabled sources
+- **WHEN** the user opens the ecosystem tab
+- **THEN** the system SHALL render apps from cache
+
+### Requirement: Partial Listing With Scoring
+The system SHALL provide partial listings instead of always rendering full lists.
+
+#### Scenario: Featured apps are ranked by combined score
+- **GIVEN** apps have `officialScore` and `communityScore`
+- **WHEN** the ecosystem page renders featured section
+- **THEN** it SHALL compute `featuredScore` by date-based dynamic weighting:
+  - `officialWeightPct` cycles daily by `+15 mod 100` (e.g. `15,30,45,60,75,90,5,...`)
+  - `communityWeightPct = 100 - officialWeightPct`
+  - `featuredScore = (officialScore * officialWeightPct + communityScore * communityWeightPct) / 100`
+- **AND** it SHALL sort by `featuredScore` (descending)
+- **AND** it SHALL show only Top N
+
+### Requirement: Search Beyond Subscription Lists
+The system SHALL support searching apps beyond the cached subscription lists.
+
+#### Scenario: Local search returns cached matches
+- **GIVEN** cached apps exist
+- **WHEN** the user searches with a keyword
+- **THEN** matching cached apps SHALL be returned
+
+#### Scenario: Remote search is optional per source
+- **GIVEN** an enabled source declares `search.urlTemplate`
+- **WHEN** the user searches with a keyword
+- **THEN** the system MAY issue a GET request by replacing `%s` with the URL-encoded query
+- **AND** it SHALL accept response shape `{ version: string; data: MiniappManifest[] }` and merge results
+
+### Requirement: AppId Reverse-domain Rule
+The system SHALL require appId to follow reverse-domain naming to avoid takeover/override.
+
+#### Scenario: Reject invalid appId format
+- **GIVEN** a subscription payload includes an app with invalid appId
+- **WHEN** the registry parses apps
+- **THEN** the system SHALL ignore the invalid entry and log a warning
+
+### Requirement: Transaction Pipeline Is Available
+The system SHALL provide `createTransaction` and `signTransaction` capabilities via `window.bio`.
+
+#### Scenario: Create then sign an EVM transfer
+- **GIVEN** the user has an EVM account in KeyApp
+- **WHEN** a miniapp calls `bio_createTransaction` for a transfer
+- **AND** then calls `bio_signTransaction`
+- **THEN** the system SHALL return a signed raw transaction payload
+
+## MODIFIED Requirements
+
+### Requirement: Existing sendTransaction
+The system SHALL keep supporting `bio_sendTransaction` as a high-level sign+send shortcut.
+
+#### Scenario: sendTransaction still works
+- **GIVEN** a miniapp calls `bio_sendTransaction`
+- **THEN** the system SHALL continue to show transfer confirmation and return `{ txHash }`
diff --git a/openspec/changes/update-ecosystem-miniapp-platform/specs/navigation-sync/spec.md b/openspec/changes/update-ecosystem-miniapp-platform/specs/navigation-sync/spec.md
new file mode 100644
index 00000000..55104228
--- /dev/null
+++ b/openspec/changes/update-ecosystem-miniapp-platform/specs/navigation-sync/spec.md
@@ -0,0 +1,21 @@
+# Navigation Sync (Delta)
+
+## ADDED Requirements
+
+### Requirement: URLPattern-based Route Matching
+The system SHALL use `URLPattern` (via `urlpattern-polyfill`) for route parsing/matching in the navigation sync plugin.
+
+#### Scenario: Route params include dots
+- **GIVEN** a route contains a param `:appId`
+- **AND** the appId value contains `.`
+- **WHEN** the URL is parsed
+- **THEN** the plugin SHALL match the route and extract the param correctly
+
+### Requirement: Self-maintained Plugin Package
+The system SHALL maintain its own navigation sync plugin package to avoid abandoned dependencies and enable future Navigation API adoption.
+
+#### Scenario: Replace url-pattern dependency
+- **GIVEN** the baseline plugin used `url-pattern`
+- **WHEN** KeyApp uses the self-maintained plugin
+- **THEN** `url-pattern` SHALL NOT be required by the plugin package
+
diff --git a/openspec/changes/update-ecosystem-miniapp-platform/tasks.md b/openspec/changes/update-ecosystem-miniapp-platform/tasks.md
new file mode 100644
index 00000000..7f883449
--- /dev/null
+++ b/openspec/changes/update-ecosystem-miniapp-platform/tasks.md
@@ -0,0 +1,39 @@
+## 1. White-book Alignment
+- [ ] 1.1 Update white-book: subscription v2 + scoring + search
+- [ ] 1.2 Update white-book: tx pipeline (create/sign)
+- [ ] 1.3 Update white-book: appId reverse-domain rule
+- [ ] 1.4 Update white-book: navigation-sync plugin ownership
+
+## 2. Subscription v2 (SSR-style)
+- [ ] 2.1 Define source schema: `EcosystemSource` + optional `search`
+- [ ] 2.2 Implement local cache (IndexedDB) keyed by source URL
+- [ ] 2.3 Implement refresh with ETag/304 + force refresh
+- [ ] 2.4 Unify store/registry: settings becomes single source of truth
+- [ ] 2.5 Add ranking: official/community + date-based featured weighting (+15 mod 100)
+- [ ] 2.6 Update Ecosystem UI to partial listing by ranking
+
+## 3. Search (Beyond Subscription Lists)
+- [ ] 3.1 Implement local search over cached apps
+- [ ] 3.2 Support optional remote search `urlTemplate` per source (GET, %s placeholder)
+- [ ] 3.3 Parse remote response `{version,data}` and validate version
+- [ ] 3.4 Merge/dedupe results and expose API for UI
+
+## 4. Transaction Pipeline (Required)
+- [ ] 4.1 SDK: add `bio_createTransaction` + `bio_signTransaction` types and docs
+- [ ] 4.2 Host: add handlers for create/sign transaction (permission-gated)
+- [ ] 4.3 UI: confirmation + wallet-lock flow for signTransaction
+- [ ] 4.4 Update demo miniapps to use create/sign flow where applicable
+
+## 5. AppId Naming Rule
+- [ ] 5.1 Enforce reverse-domain appId format for built-ins and registry parsing
+- [ ] 5.2 Provide compatibility/migration mapping for legacy short ids (if needed)
+
+## 6. Navigation Sync Plugin (Self-maintained)
+- [ ] 6.1 Create `packages/plugin-navigation-sync` from Stackflow history-sync baseline
+- [ ] 6.2 Replace `url-pattern` with `urlpattern-polyfill` (URLPattern)
+- [ ] 6.3 Remove `react18-use` dependency if possible
+- [ ] 6.4 Switch KeyApp to use the new plugin and add tests
+
+## 7. Validation
+- [ ] 7.1 Add/adjust unit tests (vitest) for parsing/scoring/tx pipeline
+- [ ] 7.2 Ensure existing e2e screenshot tests remain stable or update snapshots
diff --git a/package.json b/package.json
index a810da7e..201f63a9 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "keyapp",
+  "name": "@biochain/keyapp",
   "private": true,
   "version": "0.1.0",
   "type": "module",
@@ -40,6 +40,8 @@
     "e2e:update": "playwright test --update-snapshots",
     "e2e:i18n": "TEST_LOCALE=zh-CN playwright test --project 'Mobile Chrome'",
     "e2e:report": "playwright show-report e2e/report",
+    "e2e:audit": "turbo run e2e:audit",
+    "e2e:audit:run": "bunx @biochain/e2e-tools audit --strict",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
@@ -51,12 +53,18 @@
     "theme:check": "turbo run theme:run --",
     "theme:run": "bun scripts/theme-check.ts",
     "agent": "bun scripts/agent/cli.ts",
-    "check": "turbo run typecheck:run test:run i18n:run theme:run"
+    "check": "turbo run typecheck:run test:run i18n:run theme:run",
+    "sdk:build": "pnpm --filter @biochain/bio-sdk build",
+    "sdk:dev": "pnpm --filter @biochain/bio-sdk dev",
+    "miniapps:build": "pnpm --filter \"./miniapps/*\" build",
+    "miniapps:dev:teleport": "pnpm --filter @biochain/miniapp-teleport dev",
+    "miniapps:dev:forge": "pnpm --filter @biochain/miniapp-forge dev"
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
     "@bfchain/util": "^5.0.0",
     "@bfmeta/sign-util": "^1.3.10",
+    "@biochain/plugin-navigation-sync": "workspace:*",
     "@bnqkl/server-util": "^1.3.4",
     "@bnqkl/wallet-sdk": "^0.23.8",
     "@bnqkl/wallet-typings": "^0.23.8",
@@ -70,6 +78,7 @@
     "@noble/secp256k1": "^3.0.0",
     "@number-flow/react": "^0.5.10",
     "@plaoc/plugins": "^1.1.9",
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@scure/base": "^2.0.0",
@@ -104,12 +113,14 @@
     "swiper": "^12.0.3",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
     "viem": "^2.43.3",
     "yargs": "^18.0.0",
     "zod": "^4.1.13"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.0",
+    "@biochain/e2e-tools": "workspace:*",
     "@inquirer/prompts": "^8.0.2",
     "@playwright/test": "^1.57.0",
     "@storybook/addon-docs": "^10.1.4",
@@ -134,6 +145,7 @@
     "@vitest/browser-playwright": "^4.0.15",
     "@vitest/coverage-istanbul": "^4.0.15",
     "@vitest/coverage-v8": "^4.0.15",
+    "detect-port": "^2.1.0",
     "dotenv": "^17.2.3",
     "eslint-plugin-i18next": "^6.1.3",
     "fake-indexeddb": "^6.2.5",
@@ -160,5 +172,9 @@
     "overrides": {
       "tronweb": "6.1.1"
     }
-  }
+  },
+  "workspaces": [
+    "packages/*",
+    "miniapps/*"
+  ]
 }
diff --git a/packages/bio-sdk/dist/index.cjs b/packages/bio-sdk/dist/index.cjs
new file mode 100644
index 00000000..c26a8a31
--- /dev/null
+++ b/packages/bio-sdk/dist/index.cjs
@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const BioErrorCodes = {
+  USER_REJECTED: 4001,
+  UNAUTHORIZED: 4100,
+  UNSUPPORTED_METHOD: 4200,
+  DISCONNECTED: 4900,
+  CHAIN_DISCONNECTED: 4901,
+  INTERNAL_ERROR: -32603,
+  INVALID_PARAMS: -32602,
+  METHOD_NOT_FOUND: -32601
+};
+function createProviderError(code, message, data) {
+  const error = new Error(message);
+  error.code = code;
+  error.data = data;
+  return error;
+}
+class EventEmitter {
+  handlers = /* @__PURE__ */ new Map();
+  on(event, handler) {
+    let handlers = this.handlers.get(event);
+    if (!handlers) {
+      handlers = /* @__PURE__ */ new Set();
+      this.handlers.set(event, handlers);
+    }
+    handlers.add(handler);
+  }
+  off(event, handler) {
+    const handlers = this.handlers.get(event);
+    if (handlers) {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.handlers.delete(event);
+      }
+    }
+  }
+  emit(event, ...args) {
+    const handlers = this.handlers.get(event);
+    if (handlers) {
+      handlers.forEach((handler) => {
+        try {
+          handler(...args);
+        } catch (error) {
+          console.error(`[BioSDK] Error in event handler for "${event}":`, error);
+        }
+      });
+    }
+  }
+  removeAllListeners(event) {
+    if (event) {
+      this.handlers.delete(event);
+    } else {
+      this.handlers.clear();
+    }
+  }
+}
+class BioProviderImpl {
+  events = new EventEmitter();
+  pendingRequests = /* @__PURE__ */ new Map();
+  requestIdCounter = 0;
+  connected = false;
+  targetOrigin;
+  constructor(targetOrigin = "*") {
+    this.targetOrigin = targetOrigin;
+    this.setupMessageListener();
+    this.connect();
+  }
+  setupMessageListener() {
+    window.addEventListener("message", this.handleMessage.bind(this));
+  }
+  handleMessage(event) {
+    const data = event.data;
+    if (!data || typeof data !== "object") return;
+    if (data.type === "bio_response") {
+      this.handleResponse(data);
+    } else if (data.type === "bio_event") {
+      this.handleEvent(data);
+    }
+  }
+  handleResponse(message) {
+    const pending = this.pendingRequests.get(message.id);
+    if (!pending) return;
+    this.pendingRequests.delete(message.id);
+    if (message.success) {
+      pending.resolve(message.result);
+    } else {
+      const error = message.error ?? { code: BioErrorCodes.INTERNAL_ERROR, message: "Unknown error" };
+      pending.reject(createProviderError(error.code, error.message, error.data));
+    }
+  }
+  handleEvent(message) {
+    this.events.emit(message.event, ...message.args);
+    if (message.event === "connect") {
+      this.connected = true;
+    } else if (message.event === "disconnect") {
+      this.connected = false;
+    }
+  }
+  connect() {
+    this.postMessage({
+      type: "bio_request",
+      id: this.generateId(),
+      method: "bio_connect",
+      params: []
+    });
+  }
+  generateId() {
+    return `bio_${Date.now()}_${++this.requestIdCounter}`;
+  }
+  postMessage(message) {
+    if (window.parent === window) {
+      console.warn("[BioSDK] Not running in iframe, cannot communicate with host");
+      return;
+    }
+    window.parent.postMessage(message, this.targetOrigin);
+  }
+  async request(args) {
+    const id = this.generateId();
+    return new Promise((resolve, reject) => {
+      this.pendingRequests.set(id, {
+        resolve,
+        reject
+      });
+      this.postMessage({
+        type: "bio_request",
+        id,
+        method: args.method,
+        params: args.params
+      });
+      setTimeout(() => {
+        if (this.pendingRequests.has(id)) {
+          this.pendingRequests.delete(id);
+          reject(createProviderError(BioErrorCodes.INTERNAL_ERROR, "Request timeout"));
+        }
+      }, 5 * 60 * 1e3);
+    });
+  }
+  on(event, handler) {
+    this.events.on(event, handler);
+  }
+  off(event, handler) {
+    this.events.off(event, handler);
+  }
+  isConnected() {
+    return this.connected;
+  }
+}
+function initBioProvider(targetOrigin = "*") {
+  if (typeof window === "undefined") {
+    throw new Error("[BioSDK] Cannot initialize: window is not defined");
+  }
+  if (window.bio) {
+    console.warn("[BioSDK] Provider already exists, returning existing instance");
+    return window.bio;
+  }
+  const provider = new BioProviderImpl(targetOrigin);
+  window.bio = provider;
+  console.log("[BioSDK] Provider initialized");
+  return provider;
+}
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => initBioProvider());
+  } else {
+    initBioProvider();
+  }
+}
+exports.BioErrorCodes = BioErrorCodes;
+exports.BioProviderImpl = BioProviderImpl;
+exports.EventEmitter = EventEmitter;
+exports.createProviderError = createProviderError;
+exports.initBioProvider = initBioProvider;
+//# sourceMappingURL=index.cjs.map
diff --git a/packages/bio-sdk/dist/index.cjs.map b/packages/bio-sdk/dist/index.cjs.map
new file mode 100644
index 00000000..6b72557b
--- /dev/null
+++ b/packages/bio-sdk/dist/index.cjs.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/types.ts","../src/events.ts","../src/provider.ts","../src/index.ts"],"sourcesContent":["/**\n * Bio SDK Types\n * EIP-1193 style provider interface for Bio ecosystem\n */\n\n/** Account information */\nexport interface BioAccount {\n  address: string\n  chain: string\n  name?: string\n}\n\n/** Transfer parameters */\nexport interface TransferParams {\n  from: string\n  to: string\n  amount: string\n  chain: string\n  asset?: string\n}\n\n/** Unsigned transaction payload (chain-specific) */\nexport interface BioUnsignedTransaction {\n  chainId: string\n  data: unknown\n}\n\n/** Signed transaction payload (chain-specific) */\nexport interface BioSignedTransaction {\n  chainId: string\n  data: unknown\n  signature: string\n}\n\n/** Provider request arguments */\nexport interface RequestArguments {\n  method: string\n  params?: unknown[]\n}\n\n/** Provider RPC error */\nexport interface ProviderRpcError extends Error {\n  code: number\n  data?: unknown\n}\n\n/** Event handler type */\nexport type EventHandler<T = unknown> = (...args: T[]) => void\n\n/**\n * Bio Provider Interface (EIP-1193 style)\n */\nexport interface BioProvider {\n  /** Make a request to the provider */\n  request<T = unknown>(args: RequestArguments): Promise<T>\n\n  /** Subscribe to an event */\n  on(event: string, handler: EventHandler): void\n\n  /** Unsubscribe from an event */\n  off(event: string, handler: EventHandler): void\n\n  /** Check if connected */\n  isConnected(): boolean\n}\n\n/**\n * Bio method definitions\n */\nexport interface BioMethods {\n  /** Request wallet accounts (shows connection UI) */\n  bio_requestAccounts: () => Promise<BioAccount[]>\n\n  /** Get connected accounts (no UI) */\n  bio_accounts: () => Promise<BioAccount[]>\n\n  /** Select an account (shows account picker UI) */\n  bio_selectAccount: (opts?: { chain?: string }) => Promise<BioAccount>\n\n  /** Pick another wallet address (shows wallet picker UI) */\n  bio_pickWallet: (opts?: { chain?: string; exclude?: string }) => Promise<BioAccount>\n\n  /** Sign a message */\n  bio_signMessage: (params: { message: string; address: string }) => Promise<string>\n\n  /** Sign typed data */\n  bio_signTypedData: (params: { data: object; address: string }) => Promise<string>\n\n  /** Create an unsigned transaction (no signature, no broadcast) */\n  bio_createTransaction: (params: TransferParams) => Promise<BioUnsignedTransaction>\n\n  /** Sign an unsigned transaction (requires user confirmation) */\n  bio_signTransaction: (params: { from: string; chain: string; unsignedTx: BioUnsignedTransaction }) => Promise<BioSignedTransaction>\n\n  /** Send a transaction */\n  bio_sendTransaction: (params: TransferParams) => Promise<{ txHash: string }>\n\n  /** Get current chain ID */\n  bio_chainId: () => Promise<string>\n\n  /** Get balance */\n  bio_getBalance: (params: { address: string; chain: string }) => Promise<string>\n\n  /** Close splash screen (indicates app is ready) */\n  bio_closeSplashScreen: () => Promise<void>\n}\n\n/**\n * Bio event definitions\n */\nexport interface BioEvents {\n  /** Emitted when accounts change */\n  accountsChanged: (accounts: BioAccount[]) => void\n\n  /** Emitted when chain changes */\n  chainChanged: (chainId: string) => void\n\n  /** Emitted when connected */\n  connect: (info: { chainId: string }) => void\n\n  /** Emitted when disconnected */\n  disconnect: (error: { code: number; message: string }) => void\n}\n\n/** Method names */\nexport type BioMethodName = keyof BioMethods\n\n/** Event names */\nexport type BioEventName = keyof BioEvents\n\n/** RPC error codes */\nexport const BioErrorCodes = {\n  USER_REJECTED: 4001,\n  UNAUTHORIZED: 4100,\n  UNSUPPORTED_METHOD: 4200,\n  DISCONNECTED: 4900,\n  CHAIN_DISCONNECTED: 4901,\n  INTERNAL_ERROR: -32603,\n  INVALID_PARAMS: -32602,\n  METHOD_NOT_FOUND: -32601,\n} as const\n\n/** Create a provider RPC error */\nexport function createProviderError(code: number, message: string, data?: unknown): ProviderRpcError {\n  const error = new Error(message) as ProviderRpcError\n  error.code = code\n  error.data = data\n  return error\n}\n","/**\n * Event emitter for Bio SDK\n */\n\nimport type { EventHandler } from './types'\n\nexport class EventEmitter {\n  private handlers = new Map<string, Set<EventHandler>>()\n\n  on(event: string, handler: EventHandler): void {\n    let handlers = this.handlers.get(event)\n    if (!handlers) {\n      handlers = new Set()\n      this.handlers.set(event, handlers)\n    }\n    handlers.add(handler)\n  }\n\n  off(event: string, handler: EventHandler): void {\n    const handlers = this.handlers.get(event)\n    if (handlers) {\n      handlers.delete(handler)\n      if (handlers.size === 0) {\n        this.handlers.delete(event)\n      }\n    }\n  }\n\n  emit(event: string, ...args: unknown[]): void {\n    const handlers = this.handlers.get(event)\n    if (handlers) {\n      handlers.forEach((handler) => {\n        try {\n          handler(...args)\n        } catch (error) {\n          console.error(`[BioSDK] Error in event handler for \"${event}\":`, error)\n        }\n      })\n    }\n  }\n\n  removeAllListeners(event?: string): void {\n    if (event) {\n      this.handlers.delete(event)\n    } else {\n      this.handlers.clear()\n    }\n  }\n}\n","/**\n * Bio Provider Implementation\n * Communicates with KeyApp host via postMessage\n */\n\nimport type { BioProvider, RequestArguments, EventHandler } from './types'\nimport { BioErrorCodes, createProviderError } from './types'\nimport { EventEmitter } from './events'\n\n/** Message sent to host */\ninterface RequestMessage {\n  type: 'bio_request'\n  id: string\n  method: string\n  params?: unknown[]\n}\n\n/** Response from host */\ninterface ResponseMessage {\n  type: 'bio_response'\n  id: string\n  success: boolean\n  result?: unknown\n  error?: { code: number; message: string; data?: unknown }\n}\n\n/** Event from host */\ninterface EventMessage {\n  type: 'bio_event'\n  event: string\n  args: unknown[]\n}\n\ntype HostMessage = ResponseMessage | EventMessage\n\nexport class BioProviderImpl implements BioProvider {\n  private events = new EventEmitter()\n  private pendingRequests = new Map<string, {\n    resolve: (value: unknown) => void\n    reject: (error: Error) => void\n  }>()\n  private requestIdCounter = 0\n  private connected = false\n  private readonly targetOrigin: string\n\n  constructor(targetOrigin = '*') {\n    this.targetOrigin = targetOrigin\n    this.setupMessageListener()\n    this.connect()\n  }\n\n  private setupMessageListener(): void {\n    window.addEventListener('message', this.handleMessage.bind(this))\n  }\n\n  private handleMessage(event: MessageEvent): void {\n    const data = event.data as HostMessage\n    if (!data || typeof data !== 'object') return\n\n    if (data.type === 'bio_response') {\n      this.handleResponse(data)\n    } else if (data.type === 'bio_event') {\n      this.handleEvent(data)\n    }\n  }\n\n  private handleResponse(message: ResponseMessage): void {\n    const pending = this.pendingRequests.get(message.id)\n    if (!pending) return\n\n    this.pendingRequests.delete(message.id)\n\n    if (message.success) {\n      pending.resolve(message.result)\n    } else {\n      const error = message.error ?? { code: BioErrorCodes.INTERNAL_ERROR, message: 'Unknown error' }\n      pending.reject(createProviderError(error.code, error.message, error.data))\n    }\n  }\n\n  private handleEvent(message: EventMessage): void {\n    this.events.emit(message.event, ...message.args)\n\n    // Handle built-in events\n    if (message.event === 'connect') {\n      this.connected = true\n    } else if (message.event === 'disconnect') {\n      this.connected = false\n    }\n  }\n\n  private connect(): void {\n    // Send handshake to host\n    this.postMessage({\n      type: 'bio_request',\n      id: this.generateId(),\n      method: 'bio_connect',\n      params: [],\n    })\n  }\n\n  private generateId(): string {\n    return `bio_${Date.now()}_${++this.requestIdCounter}`\n  }\n\n  private postMessage(message: RequestMessage): void {\n    if (window.parent === window) {\n      console.warn('[BioSDK] Not running in iframe, cannot communicate with host')\n      return\n    }\n    window.parent.postMessage(message, this.targetOrigin)\n  }\n\n  async request<T = unknown>(args: RequestArguments): Promise<T> {\n    const id = this.generateId()\n\n    return new Promise<T>((resolve, reject) => {\n      this.pendingRequests.set(id, {\n        resolve: resolve as (value: unknown) => void,\n        reject,\n      })\n\n      this.postMessage({\n        type: 'bio_request',\n        id,\n        method: args.method,\n        params: args.params,\n      })\n\n      // Timeout after 5 minutes (for user interactions)\n      setTimeout(() => {\n        if (this.pendingRequests.has(id)) {\n          this.pendingRequests.delete(id)\n          reject(createProviderError(BioErrorCodes.INTERNAL_ERROR, 'Request timeout'))\n        }\n      }, 5 * 60 * 1000)\n    })\n  }\n\n  on(event: string, handler: EventHandler): void {\n    this.events.on(event, handler)\n  }\n\n  off(event: string, handler: EventHandler): void {\n    this.events.off(event, handler)\n  }\n\n  isConnected(): boolean {\n    return this.connected\n  }\n}\n","/**\n * Bio SDK - Client SDK for Bio Ecosystem MiniApps\n *\n * Injects `window.bio` provider similar to `window.ethereum` in Web3 DApps.\n *\n * @example\n * ```typescript\n * import '@biochain/bio-sdk'\n *\n * // Now window.bio is available\n * const accounts = await window.bio.request({ method: 'bio_requestAccounts' })\n * ```\n */\n\nimport { BioProviderImpl } from './provider'\nimport type { BioProvider } from './types'\n\n// Re-export types\nexport * from './types'\nexport { EventEmitter } from './events'\nexport { BioProviderImpl } from './provider'\n\n// Extend Window interface\ndeclare global {\n  interface Window {\n    bio?: BioProvider\n  }\n}\n\n/**\n * Initialize and inject the Bio provider into window.bio\n */\nexport function initBioProvider(targetOrigin = '*'): BioProvider {\n  if (typeof window === 'undefined') {\n    throw new Error('[BioSDK] Cannot initialize: window is not defined')\n  }\n\n  if (window.bio) {\n    console.warn('[BioSDK] Provider already exists, returning existing instance')\n    return window.bio\n  }\n\n  const provider = new BioProviderImpl(targetOrigin)\n  window.bio = provider\n\n  console.log('[BioSDK] Provider initialized')\n  return provider\n}\n\n// Auto-initialize if running in browser\nif (typeof window !== 'undefined') {\n  // Use a slight delay to ensure DOM is ready\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => initBioProvider())\n  } else {\n    initBioProvider()\n  }\n}\n"],"names":[],"mappings":";;AAmIO,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAGO,SAAS,oBAAoB,MAAc,SAAiB,MAAkC;AACnG,QAAM,QAAQ,IAAI,MAAM,OAAO;AAC/B,QAAM,OAAO;AACb,QAAM,OAAO;AACb,SAAO;AACT;AC9IO,MAAM,aAAa;AAAA,EAChB,+BAAe,IAAA;AAAA,EAEvB,GAAG,OAAe,SAA6B;AAC7C,QAAI,WAAW,KAAK,SAAS,IAAI,KAAK;AACtC,QAAI,CAAC,UAAU;AACb,qCAAe,IAAA;AACf,WAAK,SAAS,IAAI,OAAO,QAAQ;AAAA,IACnC;AACA,aAAS,IAAI,OAAO;AAAA,EACtB;AAAA,EAEA,IAAI,OAAe,SAA6B;AAC9C,UAAM,WAAW,KAAK,SAAS,IAAI,KAAK;AACxC,QAAI,UAAU;AACZ,eAAS,OAAO,OAAO;AACvB,UAAI,SAAS,SAAS,GAAG;AACvB,aAAK,SAAS,OAAO,KAAK;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,KAAK,UAAkB,MAAuB;AAC5C,UAAM,WAAW,KAAK,SAAS,IAAI,KAAK;AACxC,QAAI,UAAU;AACZ,eAAS,QAAQ,CAAC,YAAY;AAC5B,YAAI;AACF,kBAAQ,GAAG,IAAI;AAAA,QACjB,SAAS,OAAO;AACd,kBAAQ,MAAM,wCAAwC,KAAK,MAAM,KAAK;AAAA,QACxE;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,mBAAmB,OAAsB;AACvC,QAAI,OAAO;AACT,WAAK,SAAS,OAAO,KAAK;AAAA,IAC5B,OAAO;AACL,WAAK,SAAS,MAAA;AAAA,IAChB;AAAA,EACF;AACF;ACbO,MAAM,gBAAuC;AAAA,EAC1C,SAAS,IAAI,aAAA;AAAA,EACb,sCAAsB,IAAA;AAAA,EAItB,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACH;AAAA,EAEjB,YAAY,eAAe,KAAK;AAC9B,SAAK,eAAe;AACpB,SAAK,qBAAA;AACL,SAAK,QAAA;AAAA,EACP;AAAA,EAEQ,uBAA6B;AACnC,WAAO,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA,EAClE;AAAA,EAEQ,cAAc,OAA2B;AAC/C,UAAM,OAAO,MAAM;AACnB,QAAI,CAAC,QAAQ,OAAO,SAAS,SAAU;AAEvC,QAAI,KAAK,SAAS,gBAAgB;AAChC,WAAK,eAAe,IAAI;AAAA,IAC1B,WAAW,KAAK,SAAS,aAAa;AACpC,WAAK,YAAY,IAAI;AAAA,IACvB;AAAA,EACF;AAAA,EAEQ,eAAe,SAAgC;AACrD,UAAM,UAAU,KAAK,gBAAgB,IAAI,QAAQ,EAAE;AACnD,QAAI,CAAC,QAAS;AAEd,SAAK,gBAAgB,OAAO,QAAQ,EAAE;AAEtC,QAAI,QAAQ,SAAS;AACnB,cAAQ,QAAQ,QAAQ,MAAM;AAAA,IAChC,OAAO;AACL,YAAM,QAAQ,QAAQ,SAAS,EAAE,MAAM,cAAc,gBAAgB,SAAS,gBAAA;AAC9E,cAAQ,OAAO,oBAAoB,MAAM,MAAM,MAAM,SAAS,MAAM,IAAI,CAAC;AAAA,IAC3E;AAAA,EACF;AAAA,EAEQ,YAAY,SAA6B;AAC/C,SAAK,OAAO,KAAK,QAAQ,OAAO,GAAG,QAAQ,IAAI;AAG/C,QAAI,QAAQ,UAAU,WAAW;AAC/B,WAAK,YAAY;AAAA,IACnB,WAAW,QAAQ,UAAU,cAAc;AACzC,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEQ,UAAgB;AAEtB,SAAK,YAAY;AAAA,MACf,MAAM;AAAA,MACN,IAAI,KAAK,WAAA;AAAA,MACT,QAAQ;AAAA,MACR,QAAQ,CAAA;AAAA,IAAC,CACV;AAAA,EACH;AAAA,EAEQ,aAAqB;AAC3B,WAAO,OAAO,KAAK,IAAA,CAAK,IAAI,EAAE,KAAK,gBAAgB;AAAA,EACrD;AAAA,EAEQ,YAAY,SAA+B;AACjD,QAAI,OAAO,WAAW,QAAQ;AAC5B,cAAQ,KAAK,8DAA8D;AAC3E;AAAA,IACF;AACA,WAAO,OAAO,YAAY,SAAS,KAAK,YAAY;AAAA,EACtD;AAAA,EAEA,MAAM,QAAqB,MAAoC;AAC7D,UAAM,KAAK,KAAK,WAAA;AAEhB,WAAO,IAAI,QAAW,CAAC,SAAS,WAAW;AACzC,WAAK,gBAAgB,IAAI,IAAI;AAAA,QAC3B;AAAA,QACA;AAAA,MAAA,CACD;AAED,WAAK,YAAY;AAAA,QACf,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,KAAK;AAAA,QACb,QAAQ,KAAK;AAAA,MAAA,CACd;AAGD,iBAAW,MAAM;AACf,YAAI,KAAK,gBAAgB,IAAI,EAAE,GAAG;AAChC,eAAK,gBAAgB,OAAO,EAAE;AAC9B,iBAAO,oBAAoB,cAAc,gBAAgB,iBAAiB,CAAC;AAAA,QAC7E;AAAA,MACF,GAAG,IAAI,KAAK,GAAI;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EAEA,GAAG,OAAe,SAA6B;AAC7C,SAAK,OAAO,GAAG,OAAO,OAAO;AAAA,EAC/B;AAAA,EAEA,IAAI,OAAe,SAA6B;AAC9C,SAAK,OAAO,IAAI,OAAO,OAAO;AAAA,EAChC;AAAA,EAEA,cAAuB;AACrB,WAAO,KAAK;AAAA,EACd;AACF;ACtHO,SAAS,gBAAgB,eAAe,KAAkB;AAC/D,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AAEA,MAAI,OAAO,KAAK;AACd,YAAQ,KAAK,+DAA+D;AAC5E,WAAO,OAAO;AAAA,EAChB;AAEA,QAAM,WAAW,IAAI,gBAAgB,YAAY;AACjD,SAAO,MAAM;AAEb,UAAQ,IAAI,+BAA+B;AAC3C,SAAO;AACT;AAGA,IAAI,OAAO,WAAW,aAAa;AAEjC,MAAI,SAAS,eAAe,WAAW;AACrC,aAAS,iBAAiB,oBAAoB,MAAM,gBAAA,CAAiB;AAAA,EACvE,OAAO;AACL,oBAAA;AAAA,EACF;AACF;;;;;;"}
\ No newline at end of file
diff --git a/packages/bio-sdk/dist/index.d.ts b/packages/bio-sdk/dist/index.d.ts
new file mode 100644
index 00000000..a220e2ac
--- /dev/null
+++ b/packages/bio-sdk/dist/index.d.ts
@@ -0,0 +1,186 @@
+/**
+ * Bio SDK Types
+ * EIP-1193 style provider interface for Bio ecosystem
+ */
+/** Account information */
+export declare interface BioAccount {
+    address: string;
+    chain: string;
+    name?: string;
+}
+
+/** RPC error codes */
+export declare const BioErrorCodes: {
+    readonly USER_REJECTED: 4001;
+    readonly UNAUTHORIZED: 4100;
+    readonly UNSUPPORTED_METHOD: 4200;
+    readonly DISCONNECTED: 4900;
+    readonly CHAIN_DISCONNECTED: 4901;
+    readonly INTERNAL_ERROR: -32603;
+    readonly INVALID_PARAMS: -32602;
+    readonly METHOD_NOT_FOUND: -32601;
+};
+
+/** Event names */
+export declare type BioEventName = keyof BioEvents;
+
+/**
+ * Bio event definitions
+ */
+export declare interface BioEvents {
+    /** Emitted when accounts change */
+    accountsChanged: (accounts: BioAccount[]) => void;
+    /** Emitted when chain changes */
+    chainChanged: (chainId: string) => void;
+    /** Emitted when connected */
+    connect: (info: {
+        chainId: string;
+    }) => void;
+    /** Emitted when disconnected */
+    disconnect: (error: {
+        code: number;
+        message: string;
+    }) => void;
+}
+
+/** Method names */
+export declare type BioMethodName = keyof BioMethods;
+
+/**
+ * Bio method definitions
+ */
+export declare interface BioMethods {
+    /** Request wallet accounts (shows connection UI) */
+    bio_requestAccounts: () => Promise<BioAccount[]>;
+    /** Get connected accounts (no UI) */
+    bio_accounts: () => Promise<BioAccount[]>;
+    /** Select an account (shows account picker UI) */
+    bio_selectAccount: (opts?: {
+        chain?: string;
+    }) => Promise<BioAccount>;
+    /** Pick another wallet address (shows wallet picker UI) */
+    bio_pickWallet: (opts?: {
+        chain?: string;
+        exclude?: string;
+    }) => Promise<BioAccount>;
+    /** Sign a message */
+    bio_signMessage: (params: {
+        message: string;
+        address: string;
+    }) => Promise<string>;
+    /** Sign typed data */
+    bio_signTypedData: (params: {
+        data: object;
+        address: string;
+    }) => Promise<string>;
+    /** Create an unsigned transaction (no signature, no broadcast) */
+    bio_createTransaction: (params: TransferParams) => Promise<BioUnsignedTransaction>;
+    /** Sign an unsigned transaction (requires user confirmation) */
+    bio_signTransaction: (params: {
+        from: string;
+        chain: string;
+        unsignedTx: BioUnsignedTransaction;
+    }) => Promise<BioSignedTransaction>;
+    /** Send a transaction */
+    bio_sendTransaction: (params: TransferParams) => Promise<{
+        txHash: string;
+    }>;
+    /** Get current chain ID */
+    bio_chainId: () => Promise<string>;
+    /** Get balance */
+    bio_getBalance: (params: {
+        address: string;
+        chain: string;
+    }) => Promise<string>;
+    /** Close splash screen (indicates app is ready) */
+    bio_closeSplashScreen: () => Promise<void>;
+}
+
+/**
+ * Bio Provider Interface (EIP-1193 style)
+ */
+export declare interface BioProvider {
+    /** Make a request to the provider */
+    request<T = unknown>(args: RequestArguments): Promise<T>;
+    /** Subscribe to an event */
+    on(event: string, handler: EventHandler): void;
+    /** Unsubscribe from an event */
+    off(event: string, handler: EventHandler): void;
+    /** Check if connected */
+    isConnected(): boolean;
+}
+
+export declare class BioProviderImpl implements BioProvider {
+    private events;
+    private pendingRequests;
+    private requestIdCounter;
+    private connected;
+    private readonly targetOrigin;
+    constructor(targetOrigin?: string);
+    private setupMessageListener;
+    private handleMessage;
+    private handleResponse;
+    private handleEvent;
+    private connect;
+    private generateId;
+    private postMessage;
+    request<T = unknown>(args: RequestArguments): Promise<T>;
+    on(event: string, handler: EventHandler): void;
+    off(event: string, handler: EventHandler): void;
+    isConnected(): boolean;
+}
+
+/** Signed transaction payload (chain-specific) */
+export declare interface BioSignedTransaction {
+    chainId: string;
+    data: unknown;
+    signature: string;
+}
+
+/** Unsigned transaction payload (chain-specific) */
+export declare interface BioUnsignedTransaction {
+    chainId: string;
+    data: unknown;
+}
+
+/** Create a provider RPC error */
+export declare function createProviderError(code: number, message: string, data?: unknown): ProviderRpcError;
+
+export declare class EventEmitter {
+    private handlers;
+    on(event: string, handler: EventHandler): void;
+    off(event: string, handler: EventHandler): void;
+    emit(event: string, ...args: unknown[]): void;
+    removeAllListeners(event?: string): void;
+}
+
+/** Event handler type */
+export declare type EventHandler<T = unknown> = (...args: T[]) => void;
+
+/**
+ * Initialize and inject the Bio provider into window.bio
+ */
+export declare function initBioProvider(targetOrigin?: string): BioProvider;
+
+/** Provider RPC error */
+export declare interface ProviderRpcError extends Error {
+    code: number;
+    data?: unknown;
+}
+
+/** Provider request arguments */
+export declare interface RequestArguments {
+    method: string;
+    params?: unknown[];
+}
+
+/** Transfer parameters */
+export declare interface TransferParams {
+    from: string;
+    to: string;
+    amount: string;
+    chain: string;
+    asset?: string;
+}
+
+export { }
diff --git a/packages/bio-sdk/dist/index.js b/packages/bio-sdk/dist/index.js
new file mode 100644
index 00000000..3342a76c
--- /dev/null
+++ b/packages/bio-sdk/dist/index.js
@@ -0,0 +1,174 @@
+const BioErrorCodes = {
+  USER_REJECTED: 4001,
+  UNAUTHORIZED: 4100,
+  UNSUPPORTED_METHOD: 4200,
+  DISCONNECTED: 4900,
+  CHAIN_DISCONNECTED: 4901,
+  INTERNAL_ERROR: -32603,
+  INVALID_PARAMS: -32602,
+  METHOD_NOT_FOUND: -32601
+};
+function createProviderError(code, message, data) {
+  const error = new Error(message);
+  error.code = code;
+  error.data = data;
+  return error;
+}
+class EventEmitter {
+  handlers = /* @__PURE__ */ new Map();
+  on(event, handler) {
+    let handlers = this.handlers.get(event);
+    if (!handlers) {
+      handlers = /* @__PURE__ */ new Set();
+      this.handlers.set(event, handlers);
+    }
+    handlers.add(handler);
+  }
+  off(event, handler) {
+    const handlers = this.handlers.get(event);
+    if (handlers) {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.handlers.delete(event);
+      }
+    }
+  }
+  emit(event, ...args) {
+    const handlers = this.handlers.get(event);
+    if (handlers) {
+      handlers.forEach((handler) => {
+        try {
+          handler(...args);
+        } catch (error) {
+          console.error(`[BioSDK] Error in event handler for "${event}":`, error);
+        }
+      });
+    }
+  }
+  removeAllListeners(event) {
+    if (event) {
+      this.handlers.delete(event);
+    } else {
+      this.handlers.clear();
+    }
+  }
+}
+class BioProviderImpl {
+  events = new EventEmitter();
+  pendingRequests = /* @__PURE__ */ new Map();
+  requestIdCounter = 0;
+  connected = false;
+  targetOrigin;
+  constructor(targetOrigin = "*") {
+    this.targetOrigin = targetOrigin;
+    this.setupMessageListener();
+    this.connect();
+  }
+  setupMessageListener() {
+    window.addEventListener("message", this.handleMessage.bind(this));
+  }
+  handleMessage(event) {
+    const data = event.data;
+    if (!data || typeof data !== "object") return;
+    if (data.type === "bio_response") {
+      this.handleResponse(data);
+    } else if (data.type === "bio_event") {
+      this.handleEvent(data);
+    }
+  }
+  handleResponse(message) {
+    const pending = this.pendingRequests.get(message.id);
+    if (!pending) return;
+    this.pendingRequests.delete(message.id);
+    if (message.success) {
+      pending.resolve(message.result);
+    } else {
+      const error = message.error ?? { code: BioErrorCodes.INTERNAL_ERROR, message: "Unknown error" };
+      pending.reject(createProviderError(error.code, error.message, error.data));
+    }
+  }
+  handleEvent(message) {
+    this.events.emit(message.event, ...message.args);
+    if (message.event === "connect") {
+      this.connected = true;
+    } else if (message.event === "disconnect") {
+      this.connected = false;
+    }
+  }
+  connect() {
+    this.postMessage({
+      type: "bio_request",
+      id: this.generateId(),
+      method: "bio_connect",
+      params: []
+    });
+  }
+  generateId() {
+    return `bio_${Date.now()}_${++this.requestIdCounter}`;
+  }
+  postMessage(message) {
+    if (window.parent === window) {
+      console.warn("[BioSDK] Not running in iframe, cannot communicate with host");
+      return;
+    }
+    window.parent.postMessage(message, this.targetOrigin);
+  }
+  async request(args) {
+    const id = this.generateId();
+    return new Promise((resolve, reject) => {
+      this.pendingRequests.set(id, {
+        resolve,
+        reject
+      });
+      this.postMessage({
+        type: "bio_request",
+        id,
+        method: args.method,
+        params: args.params
+      });
+      setTimeout(() => {
+        if (this.pendingRequests.has(id)) {
+          this.pendingRequests.delete(id);
+          reject(createProviderError(BioErrorCodes.INTERNAL_ERROR, "Request timeout"));
+        }
+      }, 5 * 60 * 1e3);
+    });
+  }
+  on(event, handler) {
+    this.events.on(event, handler);
+  }
+  off(event, handler) {
+    this.events.off(event, handler);
+  }
+  isConnected() {
+    return this.connected;
+  }
+}
+function initBioProvider(targetOrigin = "*") {
+  if (typeof window === "undefined") {
+    throw new Error("[BioSDK] Cannot initialize: window is not defined");
+  }
+  if (window.bio) {
+    console.warn("[BioSDK] Provider already exists, returning existing instance");
+    return window.bio;
+  }
+  const provider = new BioProviderImpl(targetOrigin);
+  window.bio = provider;
+  console.log("[BioSDK] Provider initialized");
+  return provider;
+}
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => initBioProvider());
+  } else {
+    initBioProvider();
+  }
+}
+export {
+  BioErrorCodes,
+  BioProviderImpl,
+  EventEmitter,
+  createProviderError,
+  initBioProvider
+};
+//# sourceMappingURL=index.js.map
diff --git a/packages/bio-sdk/dist/index.js.map b/packages/bio-sdk/dist/index.js.map
new file mode 100644
index 00000000..ca3bf139
--- /dev/null
+++ b/packages/bio-sdk/dist/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/types.ts","../src/events.ts","../src/provider.ts","../src/index.ts"],"sourcesContent":["/**\n * Bio SDK Types\n * EIP-1193 style provider interface for Bio ecosystem\n */\n\n/** Account information */\nexport interface BioAccount {\n  address: string\n  chain: string\n  name?: string\n}\n\n/** Transfer parameters */\nexport interface TransferParams {\n  from: string\n  to: string\n  amount: string\n  chain: string\n  asset?: string\n}\n\n/** Unsigned transaction payload (chain-specific) */\nexport interface BioUnsignedTransaction {\n  chainId: string\n  data: unknown\n}\n\n/** Signed transaction payload (chain-specific) */\nexport interface BioSignedTransaction {\n  chainId: string\n  data: unknown\n  signature: string\n}\n\n/** Provider request arguments */\nexport interface RequestArguments {\n  method: string\n  params?: unknown[]\n}\n\n/** Provider RPC error */\nexport interface ProviderRpcError extends Error {\n  code: number\n  data?: unknown\n}\n\n/** Event handler type */\nexport type EventHandler<T = unknown> = (...args: T[]) => void\n\n/**\n * Bio Provider Interface (EIP-1193 style)\n */\nexport interface BioProvider {\n  /** Make a request to the provider */\n  request<T = unknown>(args: RequestArguments): Promise<T>\n\n  /** Subscribe to an event */\n  on(event: string, handler: EventHandler): void\n\n  /** Unsubscribe from an event */\n  off(event: string, handler: EventHandler): void\n\n  /** Check if connected */\n  isConnected(): boolean\n}\n\n/**\n * Bio method definitions\n */\nexport interface BioMethods {\n  /** Request wallet accounts (shows connection UI) */\n  bio_requestAccounts: () => Promise<BioAccount[]>\n\n  /** Get connected accounts (no UI) */\n  bio_accounts: () => Promise<BioAccount[]>\n\n  /** Select an account (shows account picker UI) */\n  bio_selectAccount: (opts?: { chain?: string }) => Promise<BioAccount>\n\n  /** Pick another wallet address (shows wallet picker UI) */\n  bio_pickWallet: (opts?: { chain?: string; exclude?: string }) => Promise<BioAccount>\n\n  /** Sign a message */\n  bio_signMessage: (params: { message: string; address: string }) => Promise<string>\n\n  /** Sign typed data */\n  bio_signTypedData: (params: { data: object; address: string }) => Promise<string>\n\n  /** Create an unsigned transaction (no signature, no broadcast) */\n  bio_createTransaction: (params: TransferParams) => Promise<BioUnsignedTransaction>\n\n  /** Sign an unsigned transaction (requires user confirmation) */\n  bio_signTransaction: (params: { from: string; chain: string; unsignedTx: BioUnsignedTransaction }) => Promise<BioSignedTransaction>\n\n  /** Send a transaction */\n  bio_sendTransaction: (params: TransferParams) => Promise<{ txHash: string }>\n\n  /** Get current chain ID */\n  bio_chainId: () => Promise<string>\n\n  /** Get balance */\n  bio_getBalance: (params: { address: string; chain: string }) => Promise<string>\n\n  /** Close splash screen (indicates app is ready) */\n  bio_closeSplashScreen: () => Promise<void>\n}\n\n/**\n * Bio event definitions\n */\nexport interface BioEvents {\n  /** Emitted when accounts change */\n  accountsChanged: (accounts: BioAccount[]) => void\n\n  /** Emitted when chain changes */\n  chainChanged: (chainId: string) => void\n\n  /** Emitted when connected */\n  connect: (info: { chainId: string }) => void\n\n  /** Emitted when disconnected */\n  disconnect: (error: { code: number; message: string }) => void\n}\n\n/** Method names */\nexport type BioMethodName = keyof BioMethods\n\n/** Event names */\nexport type BioEventName = keyof BioEvents\n\n/** RPC error codes */\nexport const BioErrorCodes = {\n  USER_REJECTED: 4001,\n  UNAUTHORIZED: 4100,\n  UNSUPPORTED_METHOD: 4200,\n  DISCONNECTED: 4900,\n  CHAIN_DISCONNECTED: 4901,\n  INTERNAL_ERROR: -32603,\n  INVALID_PARAMS: -32602,\n  METHOD_NOT_FOUND: -32601,\n} as const\n\n/** Create a provider RPC error */\nexport function createProviderError(code: number, message: string, data?: unknown): ProviderRpcError {\n  const error = new Error(message) as ProviderRpcError\n  error.code = code\n  error.data = data\n  return error\n}\n","/**\n * Event emitter for Bio SDK\n */\n\nimport type { EventHandler } from './types'\n\nexport class EventEmitter {\n  private handlers = new Map<string, Set<EventHandler>>()\n\n  on(event: string, handler: EventHandler): void {\n    let handlers = this.handlers.get(event)\n    if (!handlers) {\n      handlers = new Set()\n      this.handlers.set(event, handlers)\n    }\n    handlers.add(handler)\n  }\n\n  off(event: string, handler: EventHandler): void {\n    const handlers = this.handlers.get(event)\n    if (handlers) {\n      handlers.delete(handler)\n      if (handlers.size === 0) {\n        this.handlers.delete(event)\n      }\n    }\n  }\n\n  emit(event: string, ...args: unknown[]): void {\n    const handlers = this.handlers.get(event)\n    if (handlers) {\n      handlers.forEach((handler) => {\n        try {\n          handler(...args)\n        } catch (error) {\n          console.error(`[BioSDK] Error in event handler for \"${event}\":`, error)\n        }\n      })\n    }\n  }\n\n  removeAllListeners(event?: string): void {\n    if (event) {\n      this.handlers.delete(event)\n    } else {\n      this.handlers.clear()\n    }\n  }\n}\n","/**\n * Bio Provider Implementation\n * Communicates with KeyApp host via postMessage\n */\n\nimport type { BioProvider, RequestArguments, EventHandler } from './types'\nimport { BioErrorCodes, createProviderError } from './types'\nimport { EventEmitter } from './events'\n\n/** Message sent to host */\ninterface RequestMessage {\n  type: 'bio_request'\n  id: string\n  method: string\n  params?: unknown[]\n}\n\n/** Response from host */\ninterface ResponseMessage {\n  type: 'bio_response'\n  id: string\n  success: boolean\n  result?: unknown\n  error?: { code: number; message: string; data?: unknown }\n}\n\n/** Event from host */\ninterface EventMessage {\n  type: 'bio_event'\n  event: string\n  args: unknown[]\n}\n\ntype HostMessage = ResponseMessage | EventMessage\n\nexport class BioProviderImpl implements BioProvider {\n  private events = new EventEmitter()\n  private pendingRequests = new Map<string, {\n    resolve: (value: unknown) => void\n    reject: (error: Error) => void\n  }>()\n  private requestIdCounter = 0\n  private connected = false\n  private readonly targetOrigin: string\n\n  constructor(targetOrigin = '*') {\n    this.targetOrigin = targetOrigin\n    this.setupMessageListener()\n    this.connect()\n  }\n\n  private setupMessageListener(): void {\n    window.addEventListener('message', this.handleMessage.bind(this))\n  }\n\n  private handleMessage(event: MessageEvent): void {\n    const data = event.data as HostMessage\n    if (!data || typeof data !== 'object') return\n\n    if (data.type === 'bio_response') {\n      this.handleResponse(data)\n    } else if (data.type === 'bio_event') {\n      this.handleEvent(data)\n    }\n  }\n\n  private handleResponse(message: ResponseMessage): void {\n    const pending = this.pendingRequests.get(message.id)\n    if (!pending) return\n\n    this.pendingRequests.delete(message.id)\n\n    if (message.success) {\n      pending.resolve(message.result)\n    } else {\n      const error = message.error ?? { code: BioErrorCodes.INTERNAL_ERROR, message: 'Unknown error' }\n      pending.reject(createProviderError(error.code, error.message, error.data))\n    }\n  }\n\n  private handleEvent(message: EventMessage): void {\n    this.events.emit(message.event, ...message.args)\n\n    // Handle built-in events\n    if (message.event === 'connect') {\n      this.connected = true\n    } else if (message.event === 'disconnect') {\n      this.connected = false\n    }\n  }\n\n  private connect(): void {\n    // Send handshake to host\n    this.postMessage({\n      type: 'bio_request',\n      id: this.generateId(),\n      method: 'bio_connect',\n      params: [],\n    })\n  }\n\n  private generateId(): string {\n    return `bio_${Date.now()}_${++this.requestIdCounter}`\n  }\n\n  private postMessage(message: RequestMessage): void {\n    if (window.parent === window) {\n      console.warn('[BioSDK] Not running in iframe, cannot communicate with host')\n      return\n    }\n    window.parent.postMessage(message, this.targetOrigin)\n  }\n\n  async request<T = unknown>(args: RequestArguments): Promise<T> {\n    const id = this.generateId()\n\n    return new Promise<T>((resolve, reject) => {\n      this.pendingRequests.set(id, {\n        resolve: resolve as (value: unknown) => void,\n        reject,\n      })\n\n      this.postMessage({\n        type: 'bio_request',\n        id,\n        method: args.method,\n        params: args.params,\n      })\n\n      // Timeout after 5 minutes (for user interactions)\n      setTimeout(() => {\n        if (this.pendingRequests.has(id)) {\n          this.pendingRequests.delete(id)\n          reject(createProviderError(BioErrorCodes.INTERNAL_ERROR, 'Request timeout'))\n        }\n      }, 5 * 60 * 1000)\n    })\n  }\n\n  on(event: string, handler: EventHandler): void {\n    this.events.on(event, handler)\n  }\n\n  off(event: string, handler: EventHandler): void {\n    this.events.off(event, handler)\n  }\n\n  isConnected(): boolean {\n    return this.connected\n  }\n}\n","/**\n * Bio SDK - Client SDK for Bio Ecosystem MiniApps\n *\n * Injects `window.bio` provider similar to `window.ethereum` in Web3 DApps.\n *\n * @example\n * ```typescript\n * import '@biochain/bio-sdk'\n *\n * // Now window.bio is available\n * const accounts = await window.bio.request({ method: 'bio_requestAccounts' })\n * ```\n */\n\nimport { BioProviderImpl } from './provider'\nimport type { BioProvider } from './types'\n\n// Re-export types\nexport * from './types'\nexport { EventEmitter } from './events'\nexport { BioProviderImpl } from './provider'\n\n// Extend Window interface\ndeclare global {\n  interface Window {\n    bio?: BioProvider\n  }\n}\n\n/**\n * Initialize and inject the Bio provider into window.bio\n */\nexport function initBioProvider(targetOrigin = '*'): BioProvider {\n  if (typeof window === 'undefined') {\n    throw new Error('[BioSDK] Cannot initialize: window is not defined')\n  }\n\n  if (window.bio) {\n    console.warn('[BioSDK] Provider already exists, returning existing instance')\n    return window.bio\n  }\n\n  const provider = new BioProviderImpl(targetOrigin)\n  window.bio = provider\n\n  console.log('[BioSDK] Provider initialized')\n  return provider\n}\n\n// Auto-initialize if running in browser\nif (typeof window !== 'undefined') {\n  // Use a slight delay to ensure DOM is ready\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => initBioProvider())\n  } else {\n    initBioProvider()\n  }\n}\n"],"names":[],"mappings":"AAmIO,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAGO,SAAS,oBAAoB,MAAc,SAAiB,MAAkC;AACnG,QAAM,QAAQ,IAAI,MAAM,OAAO;AAC/B,QAAM,OAAO;AACb,QAAM,OAAO;AACb,SAAO;AACT;AC9IO,MAAM,aAAa;AAAA,EAChB,+BAAe,IAAA;AAAA,EAEvB,GAAG,OAAe,SAA6B;AAC7C,QAAI,WAAW,KAAK,SAAS,IAAI,KAAK;AACtC,QAAI,CAAC,UAAU;AACb,qCAAe,IAAA;AACf,WAAK,SAAS,IAAI,OAAO,QAAQ;AAAA,IACnC;AACA,aAAS,IAAI,OAAO;AAAA,EACtB;AAAA,EAEA,IAAI,OAAe,SAA6B;AAC9C,UAAM,WAAW,KAAK,SAAS,IAAI,KAAK;AACxC,QAAI,UAAU;AACZ,eAAS,OAAO,OAAO;AACvB,UAAI,SAAS,SAAS,GAAG;AACvB,aAAK,SAAS,OAAO,KAAK;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,KAAK,UAAkB,MAAuB;AAC5C,UAAM,WAAW,KAAK,SAAS,IAAI,KAAK;AACxC,QAAI,UAAU;AACZ,eAAS,QAAQ,CAAC,YAAY;AAC5B,YAAI;AACF,kBAAQ,GAAG,IAAI;AAAA,QACjB,SAAS,OAAO;AACd,kBAAQ,MAAM,wCAAwC,KAAK,MAAM,KAAK;AAAA,QACxE;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,mBAAmB,OAAsB;AACvC,QAAI,OAAO;AACT,WAAK,SAAS,OAAO,KAAK;AAAA,IAC5B,OAAO;AACL,WAAK,SAAS,MAAA;AAAA,IAChB;AAAA,EACF;AACF;ACbO,MAAM,gBAAuC;AAAA,EAC1C,SAAS,IAAI,aAAA;AAAA,EACb,sCAAsB,IAAA;AAAA,EAItB,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACH;AAAA,EAEjB,YAAY,eAAe,KAAK;AAC9B,SAAK,eAAe;AACpB,SAAK,qBAAA;AACL,SAAK,QAAA;AAAA,EACP;AAAA,EAEQ,uBAA6B;AACnC,WAAO,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA,EAClE;AAAA,EAEQ,cAAc,OAA2B;AAC/C,UAAM,OAAO,MAAM;AACnB,QAAI,CAAC,QAAQ,OAAO,SAAS,SAAU;AAEvC,QAAI,KAAK,SAAS,gBAAgB;AAChC,WAAK,eAAe,IAAI;AAAA,IAC1B,WAAW,KAAK,SAAS,aAAa;AACpC,WAAK,YAAY,IAAI;AAAA,IACvB;AAAA,EACF;AAAA,EAEQ,eAAe,SAAgC;AACrD,UAAM,UAAU,KAAK,gBAAgB,IAAI,QAAQ,EAAE;AACnD,QAAI,CAAC,QAAS;AAEd,SAAK,gBAAgB,OAAO,QAAQ,EAAE;AAEtC,QAAI,QAAQ,SAAS;AACnB,cAAQ,QAAQ,QAAQ,MAAM;AAAA,IAChC,OAAO;AACL,YAAM,QAAQ,QAAQ,SAAS,EAAE,MAAM,cAAc,gBAAgB,SAAS,gBAAA;AAC9E,cAAQ,OAAO,oBAAoB,MAAM,MAAM,MAAM,SAAS,MAAM,IAAI,CAAC;AAAA,IAC3E;AAAA,EACF;AAAA,EAEQ,YAAY,SAA6B;AAC/C,SAAK,OAAO,KAAK,QAAQ,OAAO,GAAG,QAAQ,IAAI;AAG/C,QAAI,QAAQ,UAAU,WAAW;AAC/B,WAAK,YAAY;AAAA,IACnB,WAAW,QAAQ,UAAU,cAAc;AACzC,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEQ,UAAgB;AAEtB,SAAK,YAAY;AAAA,MACf,MAAM;AAAA,MACN,IAAI,KAAK,WAAA;AAAA,MACT,QAAQ;AAAA,MACR,QAAQ,CAAA;AAAA,IAAC,CACV;AAAA,EACH;AAAA,EAEQ,aAAqB;AAC3B,WAAO,OAAO,KAAK,IAAA,CAAK,IAAI,EAAE,KAAK,gBAAgB;AAAA,EACrD;AAAA,EAEQ,YAAY,SAA+B;AACjD,QAAI,OAAO,WAAW,QAAQ;AAC5B,cAAQ,KAAK,8DAA8D;AAC3E;AAAA,IACF;AACA,WAAO,OAAO,YAAY,SAAS,KAAK,YAAY;AAAA,EACtD;AAAA,EAEA,MAAM,QAAqB,MAAoC;AAC7D,UAAM,KAAK,KAAK,WAAA;AAEhB,WAAO,IAAI,QAAW,CAAC,SAAS,WAAW;AACzC,WAAK,gBAAgB,IAAI,IAAI;AAAA,QAC3B;AAAA,QACA;AAAA,MAAA,CACD;AAED,WAAK,YAAY;AAAA,QACf,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,KAAK;AAAA,QACb,QAAQ,KAAK;AAAA,MAAA,CACd;AAGD,iBAAW,MAAM;AACf,YAAI,KAAK,gBAAgB,IAAI,EAAE,GAAG;AAChC,eAAK,gBAAgB,OAAO,EAAE;AAC9B,iBAAO,oBAAoB,cAAc,gBAAgB,iBAAiB,CAAC;AAAA,QAC7E;AAAA,MACF,GAAG,IAAI,KAAK,GAAI;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EAEA,GAAG,OAAe,SAA6B;AAC7C,SAAK,OAAO,GAAG,OAAO,OAAO;AAAA,EAC/B;AAAA,EAEA,IAAI,OAAe,SAA6B;AAC9C,SAAK,OAAO,IAAI,OAAO,OAAO;AAAA,EAChC;AAAA,EAEA,cAAuB;AACrB,WAAO,KAAK;AAAA,EACd;AACF;ACtHO,SAAS,gBAAgB,eAAe,KAAkB;AAC/D,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AAEA,MAAI,OAAO,KAAK;AACd,YAAQ,KAAK,+DAA+D;AAC5E,WAAO,OAAO;AAAA,EAChB;AAEA,QAAM,WAAW,IAAI,gBAAgB,YAAY;AACjD,SAAO,MAAM;AAEb,UAAQ,IAAI,+BAA+B;AAC3C,SAAO;AACT;AAGA,IAAI,OAAO,WAAW,aAAa;AAEjC,MAAI,SAAS,eAAe,WAAW;AACrC,aAAS,iBAAiB,oBAAoB,MAAM,gBAAA,CAAiB;AAAA,EACvE,OAAO;AACL,oBAAA;AAAA,EACF;AACF;"}
\ No newline at end of file
diff --git a/packages/bio-sdk/dist/index.umd.js b/packages/bio-sdk/dist/index.umd.js
new file mode 100644
index 00000000..29a26ff9
--- /dev/null
+++ b/packages/bio-sdk/dist/index.umd.js
@@ -0,0 +1,178 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.BioSDK = {}));
+})(this, (function(exports2) {
+  "use strict";
+  const BioErrorCodes = {
+    USER_REJECTED: 4001,
+    UNAUTHORIZED: 4100,
+    UNSUPPORTED_METHOD: 4200,
+    DISCONNECTED: 4900,
+    CHAIN_DISCONNECTED: 4901,
+    INTERNAL_ERROR: -32603,
+    INVALID_PARAMS: -32602,
+    METHOD_NOT_FOUND: -32601
+  };
+  function createProviderError(code, message, data) {
+    const error = new Error(message);
+    error.code = code;
+    error.data = data;
+    return error;
+  }
+  class EventEmitter {
+    handlers = /* @__PURE__ */ new Map();
+    on(event, handler) {
+      let handlers = this.handlers.get(event);
+      if (!handlers) {
+        handlers = /* @__PURE__ */ new Set();
+        this.handlers.set(event, handlers);
+      }
+      handlers.add(handler);
+    }
+    off(event, handler) {
+      const handlers = this.handlers.get(event);
+      if (handlers) {
+        handlers.delete(handler);
+        if (handlers.size === 0) {
+          this.handlers.delete(event);
+        }
+      }
+    }
+    emit(event, ...args) {
+      const handlers = this.handlers.get(event);
+      if (handlers) {
+        handlers.forEach((handler) => {
+          try {
+            handler(...args);
+          } catch (error) {
+            console.error(`[BioSDK] Error in event handler for "${event}":`, error);
+          }
+        });
+      }
+    }
+    removeAllListeners(event) {
+      if (event) {
+        this.handlers.delete(event);
+      } else {
+        this.handlers.clear();
+      }
+    }
+  }
+  class BioProviderImpl {
+    events = new EventEmitter();
+    pendingRequests = /* @__PURE__ */ new Map();
+    requestIdCounter = 0;
+    connected = false;
+    targetOrigin;
+    constructor(targetOrigin = "*") {
+      this.targetOrigin = targetOrigin;
+      this.setupMessageListener();
+      this.connect();
+    }
+    setupMessageListener() {
+      window.addEventListener("message", this.handleMessage.bind(this));
+    }
+    handleMessage(event) {
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "bio_response") {
+        this.handleResponse(data);
+      } else if (data.type === "bio_event") {
+        this.handleEvent(data);
+      }
+    }
+    handleResponse(message) {
+      const pending = this.pendingRequests.get(message.id);
+      if (!pending) return;
+      this.pendingRequests.delete(message.id);
+      if (message.success) {
+        pending.resolve(message.result);
+      } else {
+        const error = message.error ?? { code: BioErrorCodes.INTERNAL_ERROR, message: "Unknown error" };
+        pending.reject(createProviderError(error.code, error.message, error.data));
+      }
+    }
+    handleEvent(message) {
+      this.events.emit(message.event, ...message.args);
+      if (message.event === "connect") {
+        this.connected = true;
+      } else if (message.event === "disconnect") {
+        this.connected = false;
+      }
+    }
+    connect() {
+      this.postMessage({
+        type: "bio_request",
+        id: this.generateId(),
+        method: "bio_connect",
+        params: []
+      });
+    }
+    generateId() {
+      return `bio_${Date.now()}_${++this.requestIdCounter}`;
+    }
+    postMessage(message) {
+      if (window.parent === window) {
+        console.warn("[BioSDK] Not running in iframe, cannot communicate with host");
+        return;
+      }
+      window.parent.postMessage(message, this.targetOrigin);
+    }
+    async request(args) {
+      const id = this.generateId();
+      return new Promise((resolve, reject) => {
+        this.pendingRequests.set(id, {
+          resolve,
+          reject
+        });
+        this.postMessage({
+          type: "bio_request",
+          id,
+          method: args.method,
+          params: args.params
+        });
+        setTimeout(() => {
+          if (this.pendingRequests.has(id)) {
+            this.pendingRequests.delete(id);
+            reject(createProviderError(BioErrorCodes.INTERNAL_ERROR, "Request timeout"));
+          }
+        }, 5 * 60 * 1e3);
+      });
+    }
+    on(event, handler) {
+      this.events.on(event, handler);
+    }
+    off(event, handler) {
+      this.events.off(event, handler);
+    }
+    isConnected() {
+      return this.connected;
+    }
+  }
+  function initBioProvider(targetOrigin = "*") {
+    if (typeof window === "undefined") {
+      throw new Error("[BioSDK] Cannot initialize: window is not defined");
+    }
+    if (window.bio) {
+      console.warn("[BioSDK] Provider already exists, returning existing instance");
+      return window.bio;
+    }
+    const provider = new BioProviderImpl(targetOrigin);
+    window.bio = provider;
+    console.log("[BioSDK] Provider initialized");
+    return provider;
+  }
+  if (typeof window !== "undefined") {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => initBioProvider());
+    } else {
+      initBioProvider();
+    }
+  }
+  exports2.BioErrorCodes = BioErrorCodes;
+  exports2.BioProviderImpl = BioProviderImpl;
+  exports2.EventEmitter = EventEmitter;
+  exports2.createProviderError = createProviderError;
+  exports2.initBioProvider = initBioProvider;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+}));
+//# sourceMappingURL=index.umd.js.map
diff --git a/packages/bio-sdk/dist/index.umd.js.map b/packages/bio-sdk/dist/index.umd.js.map
new file mode 100644
index 00000000..11d87f83
--- /dev/null
+++ b/packages/bio-sdk/dist/index.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/types.ts","../src/events.ts","../src/provider.ts","../src/index.ts"],"sourcesContent":["/**\n * Bio SDK Types\n * EIP-1193 style provider interface for Bio ecosystem\n */\n\n/** Account information */\nexport interface BioAccount {\n  address: string\n  chain: string\n  name?: string\n}\n\n/** Transfer parameters */\nexport interface TransferParams {\n  from: string\n  to: string\n  amount: string\n  chain: string\n  asset?: string\n}\n\n/** Unsigned transaction payload (chain-specific) */\nexport interface BioUnsignedTransaction {\n  chainId: string\n  data: unknown\n}\n\n/** Signed transaction payload (chain-specific) */\nexport interface BioSignedTransaction {\n  chainId: string\n  data: unknown\n  signature: string\n}\n\n/** Provider request arguments */\nexport interface RequestArguments {\n  method: string\n  params?: unknown[]\n}\n\n/** Provider RPC error */\nexport interface ProviderRpcError extends Error {\n  code: number\n  data?: unknown\n}\n\n/** Event handler type */\nexport type EventHandler<T = unknown> = (...args: T[]) => void\n\n/**\n * Bio Provider Interface (EIP-1193 style)\n */\nexport interface BioProvider {\n  /** Make a request to the provider */\n  request<T = unknown>(args: RequestArguments): Promise<T>\n\n  /** Subscribe to an event */\n  on(event: string, handler: EventHandler): void\n\n  /** Unsubscribe from an event */\n  off(event: string, handler: EventHandler): void\n\n  /** Check if connected */\n  isConnected(): boolean\n}\n\n/**\n * Bio method definitions\n */\nexport interface BioMethods {\n  /** Request wallet accounts (shows connection UI) */\n  bio_requestAccounts: () => Promise<BioAccount[]>\n\n  /** Get connected accounts (no UI) */\n  bio_accounts: () => Promise<BioAccount[]>\n\n  /** Select an account (shows account picker UI) */\n  bio_selectAccount: (opts?: { chain?: string }) => Promise<BioAccount>\n\n  /** Pick another wallet address (shows wallet picker UI) */\n  bio_pickWallet: (opts?: { chain?: string; exclude?: string }) => Promise<BioAccount>\n\n  /** Sign a message */\n  bio_signMessage: (params: { message: string; address: string }) => Promise<string>\n\n  /** Sign typed data */\n  bio_signTypedData: (params: { data: object; address: string }) => Promise<string>\n\n  /** Create an unsigned transaction (no signature, no broadcast) */\n  bio_createTransaction: (params: TransferParams) => Promise<BioUnsignedTransaction>\n\n  /** Sign an unsigned transaction (requires user confirmation) */\n  bio_signTransaction: (params: { from: string; chain: string; unsignedTx: BioUnsignedTransaction }) => Promise<BioSignedTransaction>\n\n  /** Send a transaction */\n  bio_sendTransaction: (params: TransferParams) => Promise<{ txHash: string }>\n\n  /** Get current chain ID */\n  bio_chainId: () => Promise<string>\n\n  /** Get balance */\n  bio_getBalance: (params: { address: string; chain: string }) => Promise<string>\n\n  /** Close splash screen (indicates app is ready) */\n  bio_closeSplashScreen: () => Promise<void>\n}\n\n/**\n * Bio event definitions\n */\nexport interface BioEvents {\n  /** Emitted when accounts change */\n  accountsChanged: (accounts: BioAccount[]) => void\n\n  /** Emitted when chain changes */\n  chainChanged: (chainId: string) => void\n\n  /** Emitted when connected */\n  connect: (info: { chainId: string }) => void\n\n  /** Emitted when disconnected */\n  disconnect: (error: { code: number; message: string }) => void\n}\n\n/** Method names */\nexport type BioMethodName = keyof BioMethods\n\n/** Event names */\nexport type BioEventName = keyof BioEvents\n\n/** RPC error codes */\nexport const BioErrorCodes = {\n  USER_REJECTED: 4001,\n  UNAUTHORIZED: 4100,\n  UNSUPPORTED_METHOD: 4200,\n  DISCONNECTED: 4900,\n  CHAIN_DISCONNECTED: 4901,\n  INTERNAL_ERROR: -32603,\n  INVALID_PARAMS: -32602,\n  METHOD_NOT_FOUND: -32601,\n} as const\n\n/** Create a provider RPC error */\nexport function createProviderError(code: number, message: string, data?: unknown): ProviderRpcError {\n  const error = new Error(message) as ProviderRpcError\n  error.code = code\n  error.data = data\n  return error\n}\n","/**\n * Event emitter for Bio SDK\n */\n\nimport type { EventHandler } from './types'\n\nexport class EventEmitter {\n  private handlers = new Map<string, Set<EventHandler>>()\n\n  on(event: string, handler: EventHandler): void {\n    let handlers = this.handlers.get(event)\n    if (!handlers) {\n      handlers = new Set()\n      this.handlers.set(event, handlers)\n    }\n    handlers.add(handler)\n  }\n\n  off(event: string, handler: EventHandler): void {\n    const handlers = this.handlers.get(event)\n    if (handlers) {\n      handlers.delete(handler)\n      if (handlers.size === 0) {\n        this.handlers.delete(event)\n      }\n    }\n  }\n\n  emit(event: string, ...args: unknown[]): void {\n    const handlers = this.handlers.get(event)\n    if (handlers) {\n      handlers.forEach((handler) => {\n        try {\n          handler(...args)\n        } catch (error) {\n          console.error(`[BioSDK] Error in event handler for \"${event}\":`, error)\n        }\n      })\n    }\n  }\n\n  removeAllListeners(event?: string): void {\n    if (event) {\n      this.handlers.delete(event)\n    } else {\n      this.handlers.clear()\n    }\n  }\n}\n","/**\n * Bio Provider Implementation\n * Communicates with KeyApp host via postMessage\n */\n\nimport type { BioProvider, RequestArguments, EventHandler } from './types'\nimport { BioErrorCodes, createProviderError } from './types'\nimport { EventEmitter } from './events'\n\n/** Message sent to host */\ninterface RequestMessage {\n  type: 'bio_request'\n  id: string\n  method: string\n  params?: unknown[]\n}\n\n/** Response from host */\ninterface ResponseMessage {\n  type: 'bio_response'\n  id: string\n  success: boolean\n  result?: unknown\n  error?: { code: number; message: string; data?: unknown }\n}\n\n/** Event from host */\ninterface EventMessage {\n  type: 'bio_event'\n  event: string\n  args: unknown[]\n}\n\ntype HostMessage = ResponseMessage | EventMessage\n\nexport class BioProviderImpl implements BioProvider {\n  private events = new EventEmitter()\n  private pendingRequests = new Map<string, {\n    resolve: (value: unknown) => void\n    reject: (error: Error) => void\n  }>()\n  private requestIdCounter = 0\n  private connected = false\n  private readonly targetOrigin: string\n\n  constructor(targetOrigin = '*') {\n    this.targetOrigin = targetOrigin\n    this.setupMessageListener()\n    this.connect()\n  }\n\n  private setupMessageListener(): void {\n    window.addEventListener('message', this.handleMessage.bind(this))\n  }\n\n  private handleMessage(event: MessageEvent): void {\n    const data = event.data as HostMessage\n    if (!data || typeof data !== 'object') return\n\n    if (data.type === 'bio_response') {\n      this.handleResponse(data)\n    } else if (data.type === 'bio_event') {\n      this.handleEvent(data)\n    }\n  }\n\n  private handleResponse(message: ResponseMessage): void {\n    const pending = this.pendingRequests.get(message.id)\n    if (!pending) return\n\n    this.pendingRequests.delete(message.id)\n\n    if (message.success) {\n      pending.resolve(message.result)\n    } else {\n      const error = message.error ?? { code: BioErrorCodes.INTERNAL_ERROR, message: 'Unknown error' }\n      pending.reject(createProviderError(error.code, error.message, error.data))\n    }\n  }\n\n  private handleEvent(message: EventMessage): void {\n    this.events.emit(message.event, ...message.args)\n\n    // Handle built-in events\n    if (message.event === 'connect') {\n      this.connected = true\n    } else if (message.event === 'disconnect') {\n      this.connected = false\n    }\n  }\n\n  private connect(): void {\n    // Send handshake to host\n    this.postMessage({\n      type: 'bio_request',\n      id: this.generateId(),\n      method: 'bio_connect',\n      params: [],\n    })\n  }\n\n  private generateId(): string {\n    return `bio_${Date.now()}_${++this.requestIdCounter}`\n  }\n\n  private postMessage(message: RequestMessage): void {\n    if (window.parent === window) {\n      console.warn('[BioSDK] Not running in iframe, cannot communicate with host')\n      return\n    }\n    window.parent.postMessage(message, this.targetOrigin)\n  }\n\n  async request<T = unknown>(args: RequestArguments): Promise<T> {\n    const id = this.generateId()\n\n    return new Promise<T>((resolve, reject) => {\n      this.pendingRequests.set(id, {\n        resolve: resolve as (value: unknown) => void,\n        reject,\n      })\n\n      this.postMessage({\n        type: 'bio_request',\n        id,\n        method: args.method,\n        params: args.params,\n      })\n\n      // Timeout after 5 minutes (for user interactions)\n      setTimeout(() => {\n        if (this.pendingRequests.has(id)) {\n          this.pendingRequests.delete(id)\n          reject(createProviderError(BioErrorCodes.INTERNAL_ERROR, 'Request timeout'))\n        }\n      }, 5 * 60 * 1000)\n    })\n  }\n\n  on(event: string, handler: EventHandler): void {\n    this.events.on(event, handler)\n  }\n\n  off(event: string, handler: EventHandler): void {\n    this.events.off(event, handler)\n  }\n\n  isConnected(): boolean {\n    return this.connected\n  }\n}\n","/**\n * Bio SDK - Client SDK for Bio Ecosystem MiniApps\n *\n * Injects `window.bio` provider similar to `window.ethereum` in Web3 DApps.\n *\n * @example\n * ```typescript\n * import '@biochain/bio-sdk'\n *\n * // Now window.bio is available\n * const accounts = await window.bio.request({ method: 'bio_requestAccounts' })\n * ```\n */\n\nimport { BioProviderImpl } from './provider'\nimport type { BioProvider } from './types'\n\n// Re-export types\nexport * from './types'\nexport { EventEmitter } from './events'\nexport { BioProviderImpl } from './provider'\n\n// Extend Window interface\ndeclare global {\n  interface Window {\n    bio?: BioProvider\n  }\n}\n\n/**\n * Initialize and inject the Bio provider into window.bio\n */\nexport function initBioProvider(targetOrigin = '*'): BioProvider {\n  if (typeof window === 'undefined') {\n    throw new Error('[BioSDK] Cannot initialize: window is not defined')\n  }\n\n  if (window.bio) {\n    console.warn('[BioSDK] Provider already exists, returning existing instance')\n    return window.bio\n  }\n\n  const provider = new BioProviderImpl(targetOrigin)\n  window.bio = provider\n\n  console.log('[BioSDK] Provider initialized')\n  return provider\n}\n\n// Auto-initialize if running in browser\nif (typeof window !== 'undefined') {\n  // Use a slight delay to ensure DOM is ready\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => initBioProvider())\n  } else {\n    initBioProvider()\n  }\n}\n"],"names":[],"mappings":";;;;AAmIO,QAAM,gBAAgB;AAAA,IAC3B,eAAe;AAAA,IACf,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,EACpB;AAGO,WAAS,oBAAoB,MAAc,SAAiB,MAAkC;AACnG,UAAM,QAAQ,IAAI,MAAM,OAAO;AAC/B,UAAM,OAAO;AACb,UAAM,OAAO;AACb,WAAO;AAAA,EACT;AAAA,EC9IO,MAAM,aAAa;AAAA,IAChB,+BAAe,IAAA;AAAA,IAEvB,GAAG,OAAe,SAA6B;AAC7C,UAAI,WAAW,KAAK,SAAS,IAAI,KAAK;AACtC,UAAI,CAAC,UAAU;AACb,uCAAe,IAAA;AACf,aAAK,SAAS,IAAI,OAAO,QAAQ;AAAA,MACnC;AACA,eAAS,IAAI,OAAO;AAAA,IACtB;AAAA,IAEA,IAAI,OAAe,SAA6B;AAC9C,YAAM,WAAW,KAAK,SAAS,IAAI,KAAK;AACxC,UAAI,UAAU;AACZ,iBAAS,OAAO,OAAO;AACvB,YAAI,SAAS,SAAS,GAAG;AACvB,eAAK,SAAS,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IAEA,KAAK,UAAkB,MAAuB;AAC5C,YAAM,WAAW,KAAK,SAAS,IAAI,KAAK;AACxC,UAAI,UAAU;AACZ,iBAAS,QAAQ,CAAC,YAAY;AAC5B,cAAI;AACF,oBAAQ,GAAG,IAAI;AAAA,UACjB,SAAS,OAAO;AACd,oBAAQ,MAAM,wCAAwC,KAAK,MAAM,KAAK;AAAA,UACxE;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IAEA,mBAAmB,OAAsB;AACvC,UAAI,OAAO;AACT,aAAK,SAAS,OAAO,KAAK;AAAA,MAC5B,OAAO;AACL,aAAK,SAAS,MAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA,ECbO,MAAM,gBAAuC;AAAA,IAC1C,SAAS,IAAI,aAAA;AAAA,IACb,sCAAsB,IAAA;AAAA,IAItB,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACH;AAAA,IAEjB,YAAY,eAAe,KAAK;AAC9B,WAAK,eAAe;AACpB,WAAK,qBAAA;AACL,WAAK,QAAA;AAAA,IACP;AAAA,IAEQ,uBAA6B;AACnC,aAAO,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA,IAClE;AAAA,IAEQ,cAAc,OAA2B;AAC/C,YAAM,OAAO,MAAM;AACnB,UAAI,CAAC,QAAQ,OAAO,SAAS,SAAU;AAEvC,UAAI,KAAK,SAAS,gBAAgB;AAChC,aAAK,eAAe,IAAI;AAAA,MAC1B,WAAW,KAAK,SAAS,aAAa;AACpC,aAAK,YAAY,IAAI;AAAA,MACvB;AAAA,IACF;AAAA,IAEQ,eAAe,SAAgC;AACrD,YAAM,UAAU,KAAK,gBAAgB,IAAI,QAAQ,EAAE;AACnD,UAAI,CAAC,QAAS;AAEd,WAAK,gBAAgB,OAAO,QAAQ,EAAE;AAEtC,UAAI,QAAQ,SAAS;AACnB,gBAAQ,QAAQ,QAAQ,MAAM;AAAA,MAChC,OAAO;AACL,cAAM,QAAQ,QAAQ,SAAS,EAAE,MAAM,cAAc,gBAAgB,SAAS,gBAAA;AAC9E,gBAAQ,OAAO,oBAAoB,MAAM,MAAM,MAAM,SAAS,MAAM,IAAI,CAAC;AAAA,MAC3E;AAAA,IACF;AAAA,IAEQ,YAAY,SAA6B;AAC/C,WAAK,OAAO,KAAK,QAAQ,OAAO,GAAG,QAAQ,IAAI;AAG/C,UAAI,QAAQ,UAAU,WAAW;AAC/B,aAAK,YAAY;AAAA,MACnB,WAAW,QAAQ,UAAU,cAAc;AACzC,aAAK,YAAY;AAAA,MACnB;AAAA,IACF;AAAA,IAEQ,UAAgB;AAEtB,WAAK,YAAY;AAAA,QACf,MAAM;AAAA,QACN,IAAI,KAAK,WAAA;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,CAAA;AAAA,MAAC,CACV;AAAA,IACH;AAAA,IAEQ,aAAqB;AAC3B,aAAO,OAAO,KAAK,IAAA,CAAK,IAAI,EAAE,KAAK,gBAAgB;AAAA,IACrD;AAAA,IAEQ,YAAY,SAA+B;AACjD,UAAI,OAAO,WAAW,QAAQ;AAC5B,gBAAQ,KAAK,8DAA8D;AAC3E;AAAA,MACF;AACA,aAAO,OAAO,YAAY,SAAS,KAAK,YAAY;AAAA,IACtD;AAAA,IAEA,MAAM,QAAqB,MAAoC;AAC7D,YAAM,KAAK,KAAK,WAAA;AAEhB,aAAO,IAAI,QAAW,CAAC,SAAS,WAAW;AACzC,aAAK,gBAAgB,IAAI,IAAI;AAAA,UAC3B;AAAA,UACA;AAAA,QAAA,CACD;AAED,aAAK,YAAY;AAAA,UACf,MAAM;AAAA,UACN;AAAA,UACA,QAAQ,KAAK;AAAA,UACb,QAAQ,KAAK;AAAA,QAAA,CACd;AAGD,mBAAW,MAAM;AACf,cAAI,KAAK,gBAAgB,IAAI,EAAE,GAAG;AAChC,iBAAK,gBAAgB,OAAO,EAAE;AAC9B,mBAAO,oBAAoB,cAAc,gBAAgB,iBAAiB,CAAC;AAAA,UAC7E;AAAA,QACF,GAAG,IAAI,KAAK,GAAI;AAAA,MAClB,CAAC;AAAA,IACH;AAAA,IAEA,GAAG,OAAe,SAA6B;AAC7C,WAAK,OAAO,GAAG,OAAO,OAAO;AAAA,IAC/B;AAAA,IAEA,IAAI,OAAe,SAA6B;AAC9C,WAAK,OAAO,IAAI,OAAO,OAAO;AAAA,IAChC;AAAA,IAEA,cAAuB;AACrB,aAAO,KAAK;AAAA,IACd;AAAA,EACF;ACtHO,WAAS,gBAAgB,eAAe,KAAkB;AAC/D,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAEA,QAAI,OAAO,KAAK;AACd,cAAQ,KAAK,+DAA+D;AAC5E,aAAO,OAAO;AAAA,IAChB;AAEA,UAAM,WAAW,IAAI,gBAAgB,YAAY;AACjD,WAAO,MAAM;AAEb,YAAQ,IAAI,+BAA+B;AAC3C,WAAO;AAAA,EACT;AAGA,MAAI,OAAO,WAAW,aAAa;AAEjC,QAAI,SAAS,eAAe,WAAW;AACrC,eAAS,iBAAiB,oBAAoB,MAAM,gBAAA,CAAiB;AAAA,IACvE,OAAO;AACL,sBAAA;AAAA,IACF;AAAA,EACF;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/bio-sdk/package.json b/packages/bio-sdk/package.json
new file mode 100644
index 00000000..807a50df
--- /dev/null
+++ b/packages/bio-sdk/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@biochain/bio-sdk",
+  "version": "0.1.0",
+  "description": "Bio Ecosystem SDK for MiniApps - window.bio provider",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:storybook": "echo 'SDK has no storybook'",
+    "i18n:run": "echo 'SDK has no i18n'",
+    "theme:run": "echo 'SDK has no theme'"
+  },
+  "devDependencies": {
+    "jsdom": "^26.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.0"
+  },
+  "keywords": [
+    "bio",
+    "sdk",
+    "miniapp",
+    "wallet",
+    "web3"
+  ],
+  "license": "MIT"
+}
diff --git a/packages/bio-sdk/src/events.test.ts b/packages/bio-sdk/src/events.test.ts
new file mode 100644
index 00000000..6cd07d5a
--- /dev/null
+++ b/packages/bio-sdk/src/events.test.ts
@@ -0,0 +1,94 @@
+import { describe, it, expect, vi } from 'vitest'
+import { EventEmitter } from './events'
+
+describe('EventEmitter', () => {
+  it('should add and trigger event handlers', () => {
+    const emitter = new EventEmitter()
+    const handler = vi.fn()
+
+    emitter.on('test', handler)
+    emitter.emit('test', 'arg1', 'arg2')
+
+    expect(handler).toHaveBeenCalledWith('arg1', 'arg2')
+  })
+
+  it('should support multiple handlers for the same event', () => {
+    const emitter = new EventEmitter()
+    const handler1 = vi.fn()
+    const handler2 = vi.fn()
+
+    emitter.on('test', handler1)
+    emitter.on('test', handler2)
+    emitter.emit('test', 'data')
+
+    expect(handler1).toHaveBeenCalledWith('data')
+    expect(handler2).toHaveBeenCalledWith('data')
+  })
+
+  it('should remove event handlers with off()', () => {
+    const emitter = new EventEmitter()
+    const handler = vi.fn()
+
+    emitter.on('test', handler)
+    emitter.off('test', handler)
+    emitter.emit('test', 'data')
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('should not throw if removing non-existent handler', () => {
+    const emitter = new EventEmitter()
+    const handler = vi.fn()
+
+    expect(() => emitter.off('test', handler)).not.toThrow()
+  })
+
+  it('should handle errors in handlers gracefully', () => {
+    const emitter = new EventEmitter()
+    const errorHandler = vi.fn(() => {
+      throw new Error('Handler error')
+    })
+    const normalHandler = vi.fn()
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    emitter.on('test', errorHandler)
+    emitter.on('test', normalHandler)
+    emitter.emit('test', 'data')
+
+    expect(errorHandler).toHaveBeenCalled()
+    expect(normalHandler).toHaveBeenCalled()
+    expect(consoleSpy).toHaveBeenCalled()
+
+    consoleSpy.mockRestore()
+  })
+
+  it('should remove all listeners for a specific event', () => {
+    const emitter = new EventEmitter()
+    const handler1 = vi.fn()
+    const handler2 = vi.fn()
+
+    emitter.on('test1', handler1)
+    emitter.on('test2', handler2)
+    emitter.removeAllListeners('test1')
+    emitter.emit('test1', 'data')
+    emitter.emit('test2', 'data')
+
+    expect(handler1).not.toHaveBeenCalled()
+    expect(handler2).toHaveBeenCalled()
+  })
+
+  it('should remove all listeners when no event specified', () => {
+    const emitter = new EventEmitter()
+    const handler1 = vi.fn()
+    const handler2 = vi.fn()
+
+    emitter.on('test1', handler1)
+    emitter.on('test2', handler2)
+    emitter.removeAllListeners()
+    emitter.emit('test1', 'data')
+    emitter.emit('test2', 'data')
+
+    expect(handler1).not.toHaveBeenCalled()
+    expect(handler2).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/bio-sdk/src/events.ts b/packages/bio-sdk/src/events.ts
new file mode 100644
index 00000000..221228d9
--- /dev/null
+++ b/packages/bio-sdk/src/events.ts
@@ -0,0 +1,49 @@
+/**
+ * Event emitter for Bio SDK
+ */
+
+import type { EventHandler } from './types'
+
+export class EventEmitter {
+  private handlers = new Map<string, Set<EventHandler>>()
+
+  on(event: string, handler: EventHandler): void {
+    let handlers = this.handlers.get(event)
+    if (!handlers) {
+      handlers = new Set()
+      this.handlers.set(event, handlers)
+    }
+    handlers.add(handler)
+  }
+
+  off(event: string, handler: EventHandler): void {
+    const handlers = this.handlers.get(event)
+    if (handlers) {
+      handlers.delete(handler)
+      if (handlers.size === 0) {
+        this.handlers.delete(event)
+      }
+    }
+  }
+
+  emit(event: string, ...args: unknown[]): void {
+    const handlers = this.handlers.get(event)
+    if (handlers) {
+      handlers.forEach((handler) => {
+        try {
+          handler(...args)
+        } catch (error) {
+          console.error(`[BioSDK] Error in event handler for "${event}":`, error)
+        }
+      })
+    }
+  }
+
+  removeAllListeners(event?: string): void {
+    if (event) {
+      this.handlers.delete(event)
+    } else {
+      this.handlers.clear()
+    }
+  }
+}
diff --git a/packages/bio-sdk/src/index.ts b/packages/bio-sdk/src/index.ts
new file mode 100644
index 00000000..a9dfbf8f
--- /dev/null
+++ b/packages/bio-sdk/src/index.ts
@@ -0,0 +1,58 @@
+/**
+ * Bio SDK - Client SDK for Bio Ecosystem MiniApps
+ *
+ * Injects `window.bio` provider similar to `window.ethereum` in Web3 DApps.
+ *
+ * @example
+ * ```typescript
+ * import '@biochain/bio-sdk'
+ *
+ * // Now window.bio is available
+ * const accounts = await window.bio.request({ method: 'bio_requestAccounts' })
+ * ```
+ */
+
+import { BioProviderImpl } from './provider'
+import type { BioProvider } from './types'
+
+// Re-export types
+export * from './types'
+export { EventEmitter } from './events'
+export { BioProviderImpl } from './provider'
+
+// Extend Window interface
+declare global {
+  interface Window {
+    bio?: BioProvider
+  }
+}
+
+/**
+ * Initialize and inject the Bio provider into window.bio
+ */
+export function initBioProvider(targetOrigin = '*'): BioProvider {
+  if (typeof window === 'undefined') {
+    throw new Error('[BioSDK] Cannot initialize: window is not defined')
+  }
+
+  if (window.bio) {
+    console.warn('[BioSDK] Provider already exists, returning existing instance')
+    return window.bio
+  }
+
+  const provider = new BioProviderImpl(targetOrigin)
+  window.bio = provider
+
+  console.log('[BioSDK] Provider initialized')
+  return provider
+}
+
+// Auto-initialize if running in browser
+if (typeof window !== 'undefined') {
+  // Use a slight delay to ensure DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initBioProvider())
+  } else {
+    initBioProvider()
+  }
+}
diff --git a/packages/bio-sdk/src/provider.test.ts b/packages/bio-sdk/src/provider.test.ts
new file mode 100644
index 00000000..23b9c74e
--- /dev/null
+++ b/packages/bio-sdk/src/provider.test.ts
@@ -0,0 +1,193 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { BioProviderImpl } from './provider'
+import { BioErrorCodes } from './types'
+
+describe('BioProviderImpl', () => {
+  let mockParent: { postMessage: ReturnType<typeof vi.fn> }
+  let originalParent: Window
+
+  beforeEach(() => {
+    mockParent = { postMessage: vi.fn() }
+    originalParent = window.parent
+    Object.defineProperty(window, 'parent', {
+      value: mockParent,
+      writable: true,
+    })
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'parent', {
+      value: originalParent,
+      writable: true,
+    })
+    vi.clearAllMocks()
+  })
+
+  it('should send connect message on initialization', () => {
+    new BioProviderImpl()
+
+    expect(mockParent.postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'bio_request',
+        method: 'bio_connect',
+      }),
+      '*'
+    )
+  })
+
+  it('should use custom target origin', () => {
+    new BioProviderImpl('https://example.com')
+
+    expect(mockParent.postMessage).toHaveBeenCalledWith(
+      expect.anything(),
+      'https://example.com'
+    )
+  })
+
+  it('should send request and receive response', async () => {
+    const provider = new BioProviderImpl()
+    mockParent.postMessage.mockClear()
+
+    const requestPromise = provider.request({
+      method: 'bio_accounts',
+      params: [],
+    })
+
+    // Get the request ID from the posted message
+    const postedMessage = mockParent.postMessage.mock.calls[0][0]
+    const requestId = postedMessage.id
+
+    // Simulate response from host
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'bio_response',
+          id: requestId,
+          success: true,
+          result: [{ address: '0x123', chain: 'eth' }],
+        },
+      })
+    )
+
+    const result = await requestPromise
+    expect(result).toEqual([{ address: '0x123', chain: 'eth' }])
+  })
+
+  it('should reject on error response', async () => {
+    const provider = new BioProviderImpl()
+    mockParent.postMessage.mockClear()
+
+    const requestPromise = provider.request({
+      method: 'bio_signMessage',
+      params: [{ message: 'test', address: '0x123' }],
+    })
+
+    const postedMessage = mockParent.postMessage.mock.calls[0][0]
+    const requestId = postedMessage.id
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'bio_response',
+          id: requestId,
+          success: false,
+          error: {
+            code: BioErrorCodes.USER_REJECTED,
+            message: 'User rejected the request',
+          },
+        },
+      })
+    )
+
+    await expect(requestPromise).rejects.toMatchObject({
+      code: BioErrorCodes.USER_REJECTED,
+      message: 'User rejected the request',
+    })
+  })
+
+  it('should emit events from host', () => {
+    const provider = new BioProviderImpl()
+    const handler = vi.fn()
+
+    provider.on('accountsChanged', handler)
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'bio_event',
+          event: 'accountsChanged',
+          args: [[{ address: '0x456', chain: 'eth' }]],
+        },
+      })
+    )
+
+    // args are spread, so the handler receives the array
+    expect(handler).toHaveBeenCalledWith([{ address: '0x456', chain: 'eth' }])
+  })
+
+  it('should track connection state', () => {
+    const provider = new BioProviderImpl()
+
+    expect(provider.isConnected()).toBe(false)
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'bio_event',
+          event: 'connect',
+          args: [{ chainId: 'eth' }],
+        },
+      })
+    )
+
+    expect(provider.isConnected()).toBe(true)
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'bio_event',
+          event: 'disconnect',
+          args: [{ code: 4900, message: 'Disconnected' }],
+        },
+      })
+    )
+
+    expect(provider.isConnected()).toBe(false)
+  })
+
+  it('should remove event listeners with off()', () => {
+    const provider = new BioProviderImpl()
+    const handler = vi.fn()
+
+    provider.on('chainChanged', handler)
+    provider.off('chainChanged', handler)
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'bio_event',
+          event: 'chainChanged',
+          args: ['btc'],
+        },
+      })
+    )
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('should warn when not in iframe', () => {
+    Object.defineProperty(window, 'parent', {
+      value: window,
+      writable: true,
+    })
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    new BioProviderImpl()
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Not running in iframe')
+    )
+
+    warnSpy.mockRestore()
+  })
+})
diff --git a/packages/bio-sdk/src/provider.ts b/packages/bio-sdk/src/provider.ts
new file mode 100644
index 00000000..c6c1b9e1
--- /dev/null
+++ b/packages/bio-sdk/src/provider.ts
@@ -0,0 +1,151 @@
+/**
+ * Bio Provider Implementation
+ * Communicates with KeyApp host via postMessage
+ */
+
+import type { BioProvider, RequestArguments, EventHandler } from './types'
+import { BioErrorCodes, createProviderError } from './types'
+import { EventEmitter } from './events'
+
+/** Message sent to host */
+interface RequestMessage {
+  type: 'bio_request'
+  id: string
+  method: string
+  params?: unknown[]
+}
+
+/** Response from host */
+interface ResponseMessage {
+  type: 'bio_response'
+  id: string
+  success: boolean
+  result?: unknown
+  error?: { code: number; message: string; data?: unknown }
+}
+
+/** Event from host */
+interface EventMessage {
+  type: 'bio_event'
+  event: string
+  args: unknown[]
+}
+
+type HostMessage = ResponseMessage | EventMessage
+
+export class BioProviderImpl implements BioProvider {
+  private events = new EventEmitter()
+  private pendingRequests = new Map<string, {
+    resolve: (value: unknown) => void
+    reject: (error: Error) => void
+  }>()
+  private requestIdCounter = 0
+  private connected = false
+  private readonly targetOrigin: string
+
+  constructor(targetOrigin = '*') {
+    this.targetOrigin = targetOrigin
+    this.setupMessageListener()
+    this.connect()
+  }
+
+  private setupMessageListener(): void {
+    window.addEventListener('message', this.handleMessage.bind(this))
+  }
+
+  private handleMessage(event: MessageEvent): void {
+    const data = event.data as HostMessage
+    if (!data || typeof data !== 'object') return
+
+    if (data.type === 'bio_response') {
+      this.handleResponse(data)
+    } else if (data.type === 'bio_event') {
+      this.handleEvent(data)
+    }
+  }
+
+  private handleResponse(message: ResponseMessage): void {
+    const pending = this.pendingRequests.get(message.id)
+    if (!pending) return
+
+    this.pendingRequests.delete(message.id)
+
+    if (message.success) {
+      pending.resolve(message.result)
+    } else {
+      const error = message.error ?? { code: BioErrorCodes.INTERNAL_ERROR, message: 'Unknown error' }
+      pending.reject(createProviderError(error.code, error.message, error.data))
+    }
+  }
+
+  private handleEvent(message: EventMessage): void {
+    this.events.emit(message.event, ...message.args)
+
+    // Handle built-in events
+    if (message.event === 'connect') {
+      this.connected = true
+    } else if (message.event === 'disconnect') {
+      this.connected = false
+    }
+  }
+
+  private connect(): void {
+    // Send handshake to host
+    this.postMessage({
+      type: 'bio_request',
+      id: this.generateId(),
+      method: 'bio_connect',
+      params: [],
+    })
+  }
+
+  private generateId(): string {
+    return `bio_${Date.now()}_${++this.requestIdCounter}`
+  }
+
+  private postMessage(message: RequestMessage): void {
+    if (window.parent === window) {
+      console.warn('[BioSDK] Not running in iframe, cannot communicate with host')
+      return
+    }
+    window.parent.postMessage(message, this.targetOrigin)
+  }
+
+  async request<T = unknown>(args: RequestArguments): Promise<T> {
+    const id = this.generateId()
+
+    return new Promise<T>((resolve, reject) => {
+      this.pendingRequests.set(id, {
+        resolve: resolve as (value: unknown) => void,
+        reject,
+      })
+
+      this.postMessage({
+        type: 'bio_request',
+        id,
+        method: args.method,
+        params: args.params,
+      })
+
+      // Timeout after 5 minutes (for user interactions)
+      setTimeout(() => {
+        if (this.pendingRequests.has(id)) {
+          this.pendingRequests.delete(id)
+          reject(createProviderError(BioErrorCodes.INTERNAL_ERROR, 'Request timeout'))
+        }
+      }, 5 * 60 * 1000)
+    })
+  }
+
+  on(event: string, handler: EventHandler): void {
+    this.events.on(event, handler)
+  }
+
+  off(event: string, handler: EventHandler): void {
+    this.events.off(event, handler)
+  }
+
+  isConnected(): boolean {
+    return this.connected
+  }
+}
diff --git a/packages/bio-sdk/src/types.test.ts b/packages/bio-sdk/src/types.test.ts
new file mode 100644
index 00000000..481dc2b5
--- /dev/null
+++ b/packages/bio-sdk/src/types.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest'
+import { BioErrorCodes, createProviderError } from './types'
+
+describe('BioErrorCodes', () => {
+  it('should have correct error code values', () => {
+    expect(BioErrorCodes.USER_REJECTED).toBe(4001)
+    expect(BioErrorCodes.UNAUTHORIZED).toBe(4100)
+    expect(BioErrorCodes.UNSUPPORTED_METHOD).toBe(4200)
+    expect(BioErrorCodes.DISCONNECTED).toBe(4900)
+    expect(BioErrorCodes.CHAIN_DISCONNECTED).toBe(4901)
+    expect(BioErrorCodes.INTERNAL_ERROR).toBe(-32603)
+    expect(BioErrorCodes.INVALID_PARAMS).toBe(-32602)
+    expect(BioErrorCodes.METHOD_NOT_FOUND).toBe(-32601)
+  })
+})
+
+describe('createProviderError', () => {
+  it('should create an error with code and message', () => {
+    const error = createProviderError(4001, 'User rejected')
+
+    expect(error).toBeInstanceOf(Error)
+    expect(error.code).toBe(4001)
+    expect(error.message).toBe('User rejected')
+    expect(error.data).toBeUndefined()
+  })
+
+  it('should include data when provided', () => {
+    const data = { reason: 'test' }
+    const error = createProviderError(4100, 'Unauthorized', data)
+
+    expect(error.code).toBe(4100)
+    expect(error.message).toBe('Unauthorized')
+    expect(error.data).toEqual(data)
+  })
+})
diff --git a/packages/bio-sdk/src/types.ts b/packages/bio-sdk/src/types.ts
new file mode 100644
index 00000000..711f76de
--- /dev/null
+++ b/packages/bio-sdk/src/types.ts
@@ -0,0 +1,149 @@
+/**
+ * Bio SDK Types
+ * EIP-1193 style provider interface for Bio ecosystem
+ */
+
+/** Account information */
+export interface BioAccount {
+  address: string
+  chain: string
+  name?: string
+}
+
+/** Transfer parameters */
+export interface TransferParams {
+  from: string
+  to: string
+  amount: string
+  chain: string
+  asset?: string
+}
+
+/** Unsigned transaction payload (chain-specific) */
+export interface BioUnsignedTransaction {
+  chainId: string
+  data: unknown
+}
+
+/** Signed transaction payload (chain-specific) */
+export interface BioSignedTransaction {
+  chainId: string
+  data: unknown
+  signature: string
+}
+
+/** Provider request arguments */
+export interface RequestArguments {
+  method: string
+  params?: unknown[]
+}
+
+/** Provider RPC error */
+export interface ProviderRpcError extends Error {
+  code: number
+  data?: unknown
+}
+
+/** Event handler type */
+export type EventHandler<T = unknown> = (...args: T[]) => void
+
+/**
+ * Bio Provider Interface (EIP-1193 style)
+ */
+export interface BioProvider {
+  /** Make a request to the provider */
+  request<T = unknown>(args: RequestArguments): Promise<T>
+
+  /** Subscribe to an event */
+  on(event: string, handler: EventHandler): void
+
+  /** Unsubscribe from an event */
+  off(event: string, handler: EventHandler): void
+
+  /** Check if connected */
+  isConnected(): boolean
+}
+
+/**
+ * Bio method definitions
+ */
+export interface BioMethods {
+  /** Request wallet accounts (shows connection UI) */
+  bio_requestAccounts: () => Promise<BioAccount[]>
+
+  /** Get connected accounts (no UI) */
+  bio_accounts: () => Promise<BioAccount[]>
+
+  /** Select an account (shows account picker UI) */
+  bio_selectAccount: (opts?: { chain?: string }) => Promise<BioAccount>
+
+  /** Pick another wallet address (shows wallet picker UI) */
+  bio_pickWallet: (opts?: { chain?: string; exclude?: string }) => Promise<BioAccount>
+
+  /** Sign a message */
+  bio_signMessage: (params: { message: string; address: string }) => Promise<string>
+
+  /** Sign typed data */
+  bio_signTypedData: (params: { data: object; address: string }) => Promise<string>
+
+  /** Create an unsigned transaction (no signature, no broadcast) */
+  bio_createTransaction: (params: TransferParams) => Promise<BioUnsignedTransaction>
+
+  /** Sign an unsigned transaction (requires user confirmation) */
+  bio_signTransaction: (params: { from: string; chain: string; unsignedTx: BioUnsignedTransaction }) => Promise<BioSignedTransaction>
+
+  /** Send a transaction */
+  bio_sendTransaction: (params: TransferParams) => Promise<{ txHash: string }>
+
+  /** Get current chain ID */
+  bio_chainId: () => Promise<string>
+
+  /** Get balance */
+  bio_getBalance: (params: { address: string; chain: string }) => Promise<string>
+
+  /** Close splash screen (indicates app is ready) */
+  bio_closeSplashScreen: () => Promise<void>
+}
+
+/**
+ * Bio event definitions
+ */
+export interface BioEvents {
+  /** Emitted when accounts change */
+  accountsChanged: (accounts: BioAccount[]) => void
+
+  /** Emitted when chain changes */
+  chainChanged: (chainId: string) => void
+
+  /** Emitted when connected */
+  connect: (info: { chainId: string }) => void
+
+  /** Emitted when disconnected */
+  disconnect: (error: { code: number; message: string }) => void
+}
+
+/** Method names */
+export type BioMethodName = keyof BioMethods
+
+/** Event names */
+export type BioEventName = keyof BioEvents
+
+/** RPC error codes */
+export const BioErrorCodes = {
+  USER_REJECTED: 4001,
+  UNAUTHORIZED: 4100,
+  UNSUPPORTED_METHOD: 4200,
+  DISCONNECTED: 4900,
+  CHAIN_DISCONNECTED: 4901,
+  INTERNAL_ERROR: -32603,
+  INVALID_PARAMS: -32602,
+  METHOD_NOT_FOUND: -32601,
+} as const
+
+/** Create a provider RPC error */
+export function createProviderError(code: number, message: string, data?: unknown): ProviderRpcError {
+  const error = new Error(message) as ProviderRpcError
+  error.code = code
+  error.data = data
+  return error
+}
diff --git a/packages/bio-sdk/tsconfig.json b/packages/bio-sdk/tsconfig.json
new file mode 100644
index 00000000..4f5e346d
--- /dev/null
+++ b/packages/bio-sdk/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "declaration": true,
+    "declarationMap": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/bio-sdk/vite.config.ts b/packages/bio-sdk/vite.config.ts
new file mode 100644
index 00000000..a370479a
--- /dev/null
+++ b/packages/bio-sdk/vite.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    dts({
+      include: ['src/**/*'],
+      rollupTypes: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'BioSDK',
+      formats: ['es', 'cjs', 'umd'],
+      fileName: (format) => {
+        if (format === 'es') return 'index.js'
+        if (format === 'cjs') return 'index.cjs'
+        return `index.${format}.js`
+      },
+    },
+    rollupOptions: {
+      output: {
+        globals: {},
+      },
+    },
+    minify: false,
+    sourcemap: true,
+  },
+})
diff --git a/packages/bio-sdk/vitest.config.ts b/packages/bio-sdk/vitest.config.ts
new file mode 100644
index 00000000..451cdab3
--- /dev/null
+++ b/packages/bio-sdk/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.test.ts'],
+  },
+})
diff --git a/packages/e2e-tools/package.json b/packages/e2e-tools/package.json
new file mode 100644
index 00000000..c691f819
--- /dev/null
+++ b/packages/e2e-tools/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@biochain/e2e-tools",
+  "version": "0.1.0",
+  "description": "E2E 测试工具 - 截图审计、残留检测",
+  "type": "module",
+  "bin": {
+    "e2e-tools": "./src/cli.ts"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "echo 'Package has no tests'",
+    "test:run": "echo 'Package has no tests'",
+    "test:storybook": "echo 'Package has no storybook'",
+    "i18n:run": "echo 'Package has no i18n'",
+    "theme:run": "echo 'Package has no theme'",
+    "e2e:audit": "echo 'Package is e2e-tools itself'"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.0"
+  }
+}
diff --git a/packages/e2e-tools/src/auditor.ts b/packages/e2e-tools/src/auditor.ts
new file mode 100644
index 00000000..073aeb09
--- /dev/null
+++ b/packages/e2e-tools/src/auditor.ts
@@ -0,0 +1,74 @@
+import { unlinkSync } from 'node:fs'
+import { join } from 'node:path'
+import type { AuditResult, AuditOptions, OrphanedScreenshot, ScreenshotFile, ScreenshotRef } from './types'
+import { findE2eRoot, scanScreenshots, scanSpecFiles } from './scanner'
+import { parseAllSpecs } from './parser'
+
+export function audit(options: AuditOptions): AuditResult {
+  const e2eRoot = findE2eRoot(options.root)
+
+  if (!e2eRoot) {
+    return {
+      root: options.root,
+      specsScanned: 0,
+      screenshotsReferenced: 0,
+      screenshotsOnDisk: 0,
+      orphaned: [],
+      missing: [],
+      success: true,
+    }
+  }
+
+  const specFiles = scanSpecFiles(e2eRoot)
+  const screenshots = scanScreenshots(e2eRoot)
+  const refsBySpec = parseAllSpecs(specFiles)
+
+  const allRefs = new Set<string>()
+  let totalRefs = 0
+
+  for (const [, refs] of refsBySpec) {
+    for (const ref of refs) {
+      allRefs.add(`${ref.specFile}:${ref.name}`)
+      totalRefs++
+    }
+  }
+
+  const orphaned: OrphanedScreenshot[] = []
+
+  for (const screenshot of screenshots) {
+    const key = `${screenshot.specDir}:${screenshot.name}`
+    if (!allRefs.has(key)) {
+      orphaned.push({
+        path: screenshot.path,
+        browser: screenshot.browser,
+        specDir: screenshot.specDir,
+        name: screenshot.name,
+      })
+    }
+  }
+
+  const success = options.strict ? orphaned.length === 0 : true
+
+  return {
+    root: e2eRoot,
+    specsScanned: specFiles.length,
+    screenshotsReferenced: totalRefs,
+    screenshotsOnDisk: screenshots.length,
+    orphaned,
+    missing: [],
+    success,
+  }
+}
+
+export function removeOrphaned(e2eRoot: string, orphaned: OrphanedScreenshot[]): number {
+  let removed = 0
+  for (const o of orphaned) {
+    try {
+      unlinkSync(join(e2eRoot, o.path))
+      removed++
+    } catch {
+      // ignore
+    }
+  }
+  return removed
+}
diff --git a/packages/e2e-tools/src/cli.ts b/packages/e2e-tools/src/cli.ts
new file mode 100755
index 00000000..b5934de6
--- /dev/null
+++ b/packages/e2e-tools/src/cli.ts
@@ -0,0 +1,149 @@
+#!/usr/bin/env bun
+/**
+ * E2E Tools CLI
+ *
+ * Usage:
+ *   bunx @biochain/e2e-tools audit           # 审计当前目录
+ *   bunx @biochain/e2e-tools audit --strict  # 有残留则 exit 1
+ *   bunx @biochain/e2e-tools audit --fix     # 删除残留文件
+ *   bunx @biochain/e2e-tools audit --verbose # 显示详细信息
+ */
+
+import { audit, removeOrphaned } from './auditor'
+import type { AuditResult, OrphanedScreenshot } from './types'
+
+const colors = {
+  reset: '\x1b[0m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  cyan: '\x1b[36m',
+  dim: '\x1b[2m',
+  bold: '\x1b[1m',
+}
+
+const log = {
+  info: (msg: string) => console.log(`${colors.cyan}ℹ${colors.reset} ${msg}`),
+  success: (msg: string) => console.log(`${colors.green}✓${colors.reset} ${msg}`),
+  warn: (msg: string) => console.log(`${colors.yellow}⚠${colors.reset} ${msg}`),
+  error: (msg: string) => console.log(`${colors.red}✗${colors.reset} ${msg}`),
+  dim: (msg: string) => console.log(`${colors.dim}  ${msg}${colors.reset}`),
+}
+
+function parseArgs(args: string[]) {
+  return {
+    command: args[0] || 'audit',
+    strict: args.includes('--strict'),
+    verbose: args.includes('--verbose'),
+    fix: args.includes('--fix'),
+  }
+}
+
+function groupBySpecDir(orphaned: OrphanedScreenshot[]): Map<string, OrphanedScreenshot[]> {
+  const grouped = new Map<string, OrphanedScreenshot[]>()
+  for (const o of orphaned) {
+    const key = `${o.browser}/${o.specDir}`
+    if (!grouped.has(key)) {
+      grouped.set(key, [])
+    }
+    grouped.get(key)!.push(o)
+  }
+  return grouped
+}
+
+function printResult(result: AuditResult, verbose: boolean) {
+  console.log(`
+${colors.cyan}╔════════════════════════════════════════╗
+║     E2E Screenshot Audit               ║
+╚════════════════════════════════════════╝${colors.reset}
+`)
+
+  log.info(`Scanned: ${result.root}`)
+  log.info(`Specs: ${result.specsScanned} files, ${result.screenshotsReferenced} screenshots referenced`)
+  log.info(`On disk: ${result.screenshotsOnDisk} screenshot files`)
+
+  if (result.orphaned.length === 0) {
+    console.log('')
+    log.success('No orphaned screenshots found!')
+    console.log(`\n${colors.green}✓ All screenshots are referenced in tests${colors.reset}\n`)
+    return
+  }
+
+  console.log('')
+  log.error(`Found ${result.orphaned.length} orphaned screenshots:`)
+
+  const grouped = groupBySpecDir(result.orphaned)
+  for (const [dir, items] of grouped) {
+    console.log(`\n  ${colors.bold}${dir}/${colors.reset}`)
+    for (const item of items) {
+      console.log(`    ${colors.yellow}•${colors.reset} ${item.name}`)
+    }
+  }
+
+  console.log(`
+${colors.bold}Summary:${colors.reset}
+  ${colors.yellow}Orphaned: ${result.orphaned.length}${colors.reset}
+  ${colors.dim}These screenshots are not referenced by any test${colors.reset}
+`)
+}
+
+function printHelp() {
+  console.log(`
+${colors.cyan}E2E Tools${colors.reset} - Screenshot audit utility
+
+${colors.bold}Usage:${colors.reset}
+  bunx @biochain/e2e-tools audit [options]
+
+${colors.bold}Options:${colors.reset}
+  --strict   Exit with code 1 if orphaned screenshots found
+  --fix      Remove orphaned screenshot files
+  --verbose  Show detailed information
+
+${colors.bold}Examples:${colors.reset}
+  bunx @biochain/e2e-tools audit
+  bunx @biochain/e2e-tools audit --strict
+  bunx @biochain/e2e-tools audit --fix
+`)
+}
+
+async function main() {
+  const args = process.argv.slice(2)
+  const options = parseArgs(args)
+
+  if (args.includes('--help') || args.includes('-h')) {
+    printHelp()
+    process.exit(0)
+  }
+
+  if (options.command !== 'audit') {
+    log.error(`Unknown command: ${options.command}`)
+    printHelp()
+    process.exit(1)
+  }
+
+  const result = audit({
+    root: process.cwd(),
+    strict: options.strict,
+    verbose: options.verbose,
+    fix: options.fix,
+  })
+
+  if (result.specsScanned === 0) {
+    log.warn('No e2e/ directory found in current path')
+    process.exit(0)
+  }
+
+  printResult(result, options.verbose)
+
+  if (options.fix && result.orphaned.length > 0) {
+    const removed = removeOrphaned(result.root, result.orphaned)
+    log.success(`Removed ${removed} orphaned screenshots`)
+  }
+
+  if (!result.success) {
+    console.log(`${colors.dim}Run with --fix to remove orphaned files${colors.reset}\n`)
+    process.exit(1)
+  }
+}
+
+main()
diff --git a/packages/e2e-tools/src/index.ts b/packages/e2e-tools/src/index.ts
new file mode 100644
index 00000000..c9c1edd6
--- /dev/null
+++ b/packages/e2e-tools/src/index.ts
@@ -0,0 +1,4 @@
+export { audit, removeOrphaned } from './auditor'
+export { scanScreenshots, scanSpecFiles, findE2eRoot } from './scanner'
+export { parseSpecFile, parseAllSpecs } from './parser'
+export type * from './types'
diff --git a/packages/e2e-tools/src/parser.ts b/packages/e2e-tools/src/parser.ts
new file mode 100644
index 00000000..d9a37ea6
--- /dev/null
+++ b/packages/e2e-tools/src/parser.ts
@@ -0,0 +1,43 @@
+import { readFileSync } from 'node:fs'
+import { basename } from 'node:path'
+import type { ScreenshotRef } from './types'
+
+const SCREENSHOT_REGEX = /toHaveScreenshot\s*\(\s*['"]([^'"]+)['"]/g
+
+export function parseSpecFile(filePath: string): ScreenshotRef[] {
+  const content = readFileSync(filePath, 'utf-8')
+  const lines = content.split('\n')
+  const refs: ScreenshotRef[] = []
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    let match: RegExpExecArray | null
+
+    SCREENSHOT_REGEX.lastIndex = 0
+    while ((match = SCREENSHOT_REGEX.exec(line)) !== null) {
+      refs.push({
+        name: match[1],
+        specFile: basename(filePath),
+        line: i + 1,
+      })
+    }
+  }
+
+  return refs
+}
+
+export function parseAllSpecs(specFiles: string[]): Map<string, ScreenshotRef[]> {
+  const result = new Map<string, ScreenshotRef[]>()
+
+  for (const file of specFiles) {
+    const specName = basename(file)
+    const refs = parseSpecFile(file)
+    
+    if (!result.has(specName)) {
+      result.set(specName, [])
+    }
+    result.get(specName)!.push(...refs)
+  }
+
+  return result
+}
diff --git a/packages/e2e-tools/src/scanner.ts b/packages/e2e-tools/src/scanner.ts
new file mode 100644
index 00000000..20068e4a
--- /dev/null
+++ b/packages/e2e-tools/src/scanner.ts
@@ -0,0 +1,71 @@
+import { readdirSync, statSync, existsSync } from 'node:fs'
+import { join, relative, basename, dirname } from 'node:path'
+import type { ScreenshotFile } from './types'
+
+export function findE2eRoot(cwd: string): string | null {
+  const e2eDir = join(cwd, 'e2e')
+  if (existsSync(e2eDir) && statSync(e2eDir).isDirectory()) {
+    return e2eDir
+  }
+  return null
+}
+
+export function scanScreenshots(e2eRoot: string): ScreenshotFile[] {
+  const screenshotsDir = join(e2eRoot, '__screenshots__')
+  if (!existsSync(screenshotsDir)) {
+    return []
+  }
+
+  const results: ScreenshotFile[] = []
+
+  function walk(dir: string, browser?: string, specDir?: string) {
+    const entries = readdirSync(dir, { withFileTypes: true })
+
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name)
+
+      if (entry.isDirectory()) {
+        if (!browser) {
+          walk(fullPath, entry.name)
+        } else if (!specDir) {
+          walk(fullPath, browser, entry.name)
+        }
+      } else if (entry.isFile() && entry.name.endsWith('.png')) {
+        if (browser && specDir) {
+          results.push({
+            path: relative(e2eRoot, fullPath),
+            name: entry.name,
+            browser,
+            specDir,
+          })
+        }
+      }
+    }
+  }
+
+  walk(screenshotsDir)
+  return results
+}
+
+export function scanSpecFiles(e2eRoot: string): string[] {
+  const results: string[] = []
+
+  function walk(dir: string) {
+    if (!existsSync(dir)) return
+
+    const entries = readdirSync(dir, { withFileTypes: true })
+
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name)
+
+      if (entry.isDirectory() && entry.name !== '__screenshots__' && entry.name !== 'test-results') {
+        walk(fullPath)
+      } else if (entry.isFile() && entry.name.endsWith('.spec.ts')) {
+        results.push(fullPath)
+      }
+    }
+  }
+
+  walk(e2eRoot)
+  return results
+}
diff --git a/packages/e2e-tools/src/types.ts b/packages/e2e-tools/src/types.ts
new file mode 100644
index 00000000..7a275345
--- /dev/null
+++ b/packages/e2e-tools/src/types.ts
@@ -0,0 +1,43 @@
+export interface ScreenshotRef {
+  name: string
+  specFile: string
+  line: number
+}
+
+export interface ScreenshotFile {
+  path: string
+  name: string
+  browser: string
+  specDir: string
+}
+
+export interface AuditResult {
+  root: string
+  specsScanned: number
+  screenshotsReferenced: number
+  screenshotsOnDisk: number
+  orphaned: OrphanedScreenshot[]
+  missing: MissingScreenshot[]
+  success: boolean
+}
+
+export interface OrphanedScreenshot {
+  path: string
+  browser: string
+  specDir: string
+  name: string
+}
+
+export interface MissingScreenshot {
+  name: string
+  specFile: string
+  line: number
+  expectedPaths: string[]
+}
+
+export interface AuditOptions {
+  root: string
+  strict: boolean
+  verbose: boolean
+  fix: boolean
+}
diff --git a/packages/e2e-tools/tsconfig.json b/packages/e2e-tools/tsconfig.json
new file mode 100644
index 00000000..37605965
--- /dev/null
+++ b/packages/e2e-tools/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "declaration": true,
+    "declarationMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/i18n-tools/package.json b/packages/i18n-tools/package.json
new file mode 100644
index 00000000..845288c2
--- /dev/null
+++ b/packages/i18n-tools/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@biochain/i18n-tools",
+  "version": "0.1.0",
+  "description": "i18n 工具集 - 检查、验证、同步翻译",
+  "type": "module",
+  "bin": {
+    "i18n-tools": "./src/cli.ts"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "echo 'Package has no tests'",
+    "test:run": "echo 'Package has no tests'",
+    "test:storybook": "echo 'Package has no storybook'",
+    "i18n:run": "echo 'Package has no i18n'",
+    "theme:run": "echo 'Package has no theme'"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.0"
+  }
+}
diff --git a/packages/i18n-tools/src/checker.ts b/packages/i18n-tools/src/checker.ts
new file mode 100644
index 00000000..ee681247
--- /dev/null
+++ b/packages/i18n-tools/src/checker.ts
@@ -0,0 +1,177 @@
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'node:fs'
+import { join } from 'node:path'
+import { extractKeys, setNestedValue, type TranslationFile } from './utils'
+
+export interface CheckOptions {
+  /** 项目根目录 */
+  root: string
+  /** i18n 目录相对路径，默认 'src/i18n' */
+  i18nDir?: string
+  /** 翻译文件目录名，默认 'locales' */
+  localesDir?: string
+  /** 必需的语言列表，默认 ['zh', 'en'] */
+  requiredLocales?: string[]
+  /** 是否自动修复缺失的 key */
+  fix?: boolean
+  /** 中文缺失占位符 */
+  zhPlaceholder?: string
+  /** 英文缺失占位符 */
+  enPlaceholder?: string
+  /** Fallback 规则检查（检查 i18n 配置文件） */
+  checkFallback?: boolean
+  /** 期望的 fallback 规则 */
+  fallbackRules?: {
+    /** 应该 fallback 到 zh 的语言 */
+    toZh?: string[]
+    /** 默认 fallback 语言 */
+    default?: string
+  }
+}
+
+export interface CheckResult {
+  success: boolean
+  errors: string[]
+  warnings: string[]
+  fixes: string[]
+}
+
+const DEFAULT_OPTIONS: Required<Omit<CheckOptions, 'root'>> = {
+  i18nDir: 'src/i18n',
+  localesDir: 'locales',
+  requiredLocales: ['zh', 'en'],
+  fix: false,
+  zhPlaceholder: '[缺失]',
+  enPlaceholder: '[MISSING]',
+  checkFallback: true,
+  fallbackRules: {
+    toZh: ['zh-CN', 'zh-TW', 'zh-HK'],
+    default: 'en',
+  },
+}
+
+/**
+ * 检查 i18n 配置和翻译文件完整性
+ */
+export function checkI18n(options: CheckOptions): CheckResult {
+  const opts = { ...DEFAULT_OPTIONS, ...options }
+  const result: CheckResult = {
+    success: true,
+    errors: [],
+    warnings: [],
+    fixes: [],
+  }
+
+  const localesPath = join(opts.root, opts.i18nDir, opts.localesDir)
+
+  // 1. 检查目录存在
+  if (!existsSync(localesPath)) {
+    result.errors.push(`Locales directory not found: ${localesPath}`)
+    result.success = false
+    return result
+  }
+
+  // 2. 检查必需的语言文件
+  const localeFiles: Map<string, string> = new Map()
+  for (const locale of opts.requiredLocales) {
+    const filePath = join(localesPath, `${locale}.json`)
+    if (!existsSync(filePath)) {
+      result.errors.push(`Missing required locale file: ${locale}.json`)
+      result.success = false
+    } else {
+      localeFiles.set(locale, filePath)
+    }
+  }
+
+  if (!result.success) return result
+
+  // 3. 检查 fallback 配置
+  if (opts.checkFallback) {
+    const configPath = join(opts.root, opts.i18nDir, 'index.ts')
+    if (existsSync(configPath)) {
+      const configContent = readFileSync(configPath, 'utf-8')
+      
+      // 检查 zh 系列语言的 fallback
+      for (const lang of opts.fallbackRules.toZh || []) {
+        const pattern1 = `'${lang}': ['zh']`
+        const pattern2 = `"${lang}": ["zh"]`
+        if (!configContent.includes(pattern1) && !configContent.includes(pattern2)) {
+          result.errors.push(`Missing fallback rule: ${lang} → zh`)
+          result.success = false
+        }
+      }
+
+      // 检查默认 fallback
+      const defaultLang = opts.fallbackRules.default || 'en'
+      const defaultPattern1 = `'default': ['${defaultLang}']`
+      const defaultPattern2 = `"default": ["${defaultLang}"]`
+      if (!configContent.includes(defaultPattern1) && !configContent.includes(defaultPattern2)) {
+        result.errors.push(`Missing default fallback rule: default → ${defaultLang}`)
+        result.success = false
+      }
+    } else {
+      result.warnings.push(`i18n config not found: ${configPath}`)
+    }
+  }
+
+  // 4. 检查 key 一致性
+  const localeData: Map<string, TranslationFile> = new Map()
+  const allKeys: Map<string, Set<string>> = new Map()
+
+  for (const [locale, filePath] of localeFiles) {
+    try {
+      const data = JSON.parse(readFileSync(filePath, 'utf-8')) as TranslationFile
+      localeData.set(locale, data)
+      allKeys.set(locale, new Set(extractKeys(data)))
+    } catch (e) {
+      result.errors.push(`Failed to parse ${locale}.json: ${e}`)
+      result.success = false
+    }
+  }
+
+  if (!result.success) return result
+
+  // 以 zh 为基准检查 en
+  const zhKeys = allKeys.get('zh')!
+  const enKeys = allKeys.get('en')!
+  const zhData = localeData.get('zh')!
+  const enData = localeData.get('en')!
+
+  const missingInEn = [...zhKeys].filter(k => !enKeys.has(k))
+  const missingInZh = [...enKeys].filter(k => !zhKeys.has(k))
+
+  if (missingInEn.length > 0) {
+    result.warnings.push(`en.json missing ${missingInEn.length} key(s) from zh.json`)
+    for (const key of missingInEn) {
+      result.warnings.push(`  - ${key}`)
+    }
+
+    if (opts.fix) {
+      for (const key of missingInEn) {
+        setNestedValue(enData, key, `${opts.enPlaceholder} ${key}`)
+      }
+      writeFileSync(localeFiles.get('en')!, JSON.stringify(enData, null, 2) + '\n')
+      result.fixes.push(`Added ${missingInEn.length} placeholder(s) to en.json`)
+    } else {
+      result.success = false
+    }
+  }
+
+  if (missingInZh.length > 0) {
+    result.warnings.push(`zh.json missing ${missingInZh.length} key(s) from en.json`)
+    for (const key of missingInZh) {
+      result.warnings.push(`  - ${key}`)
+    }
+
+    if (opts.fix) {
+      for (const key of missingInZh) {
+        setNestedValue(zhData, key, `${opts.zhPlaceholder} ${key}`)
+      }
+      writeFileSync(localeFiles.get('zh')!, JSON.stringify(zhData, null, 2) + '\n')
+      result.fixes.push(`Added ${missingInZh.length} placeholder(s) to zh.json`)
+    } else {
+      result.success = false
+    }
+  }
+
+  return result
+}
diff --git a/packages/i18n-tools/src/cli.ts b/packages/i18n-tools/src/cli.ts
new file mode 100755
index 00000000..ec8217e7
--- /dev/null
+++ b/packages/i18n-tools/src/cli.ts
@@ -0,0 +1,87 @@
+#!/usr/bin/env bun
+/**
+ * i18n-check CLI
+ * 
+ * Usage:
+ *   bun packages/i18n-tools/src/cli.ts              # Check current directory
+ *   bun packages/i18n-tools/src/cli.ts --fix        # Auto-fix missing keys
+ *   bun packages/i18n-tools/src/cli.ts --i18n-dir src/i18n
+ */
+
+import { resolve } from 'node:path'
+import { checkI18n } from './checker'
+
+const colors = {
+  reset: '\x1b[0m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+}
+
+const log = {
+  info: (msg: string) => console.log(`${colors.blue}ℹ${colors.reset} ${msg}`),
+  success: (msg: string) => console.log(`${colors.green}✓${colors.reset} ${msg}`),
+  warn: (msg: string) => console.log(`${colors.yellow}⚠${colors.reset} ${msg}`),
+  error: (msg: string) => console.log(`${colors.red}✗${colors.reset} ${msg}`),
+}
+
+function parseArgs(args: string[]) {
+  const options = {
+    root: process.cwd(),
+    fix: false,
+    i18nDir: 'src/i18n',
+  }
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+    if (arg === '--fix') {
+      options.fix = true
+    } else if (arg === '--i18n-dir' && args[i + 1]) {
+      options.i18nDir = args[++i]
+    } else if (arg === '--root' && args[i + 1]) {
+      options.root = resolve(args[++i])
+    }
+  }
+
+  return options
+}
+
+function main() {
+  const args = process.argv.slice(2)
+  const options = parseArgs(args)
+
+  console.log('\n📦 i18n Check\n')
+  console.log('Fallback rules:')
+  console.log('  • zh-CN, zh-TW, zh-HK → zh')
+  console.log('  • other languages → en\n')
+
+  const result = checkI18n(options)
+
+  for (const error of result.errors) {
+    log.error(error)
+  }
+
+  for (const warning of result.warnings) {
+    log.warn(warning)
+  }
+
+  for (const fix of result.fixes) {
+    log.success(fix)
+  }
+
+  console.log('\n' + '─'.repeat(40))
+
+  if (result.success) {
+    log.success('All i18n checks passed!')
+    process.exit(0)
+  } else {
+    log.error('i18n check failed')
+    if (!options.fix) {
+      log.info('Run with --fix to add missing keys')
+    }
+    process.exit(1)
+  }
+}
+
+main()
diff --git a/packages/i18n-tools/src/index.ts b/packages/i18n-tools/src/index.ts
new file mode 100644
index 00000000..6d07eab0
--- /dev/null
+++ b/packages/i18n-tools/src/index.ts
@@ -0,0 +1,2 @@
+export { checkI18n, type CheckOptions, type CheckResult } from './checker'
+export { extractKeys, setNestedValue, type TranslationFile } from './utils'
diff --git a/packages/i18n-tools/src/utils.ts b/packages/i18n-tools/src/utils.ts
new file mode 100644
index 00000000..c488aaf2
--- /dev/null
+++ b/packages/i18n-tools/src/utils.ts
@@ -0,0 +1,50 @@
+export type TranslationValue = string | { [key: string]: TranslationValue }
+export type TranslationFile = Record<string, TranslationValue>
+
+/**
+ * 递归提取翻译文件中的所有 key
+ * @returns 扁平化的 key 列表，如 "app.title", "error.notFound"
+ */
+export function extractKeys(obj: TranslationFile, prefix = ''): string[] {
+  const keys: string[] = []
+  for (const [key, value] of Object.entries(obj)) {
+    const fullKey = prefix ? `${prefix}.${key}` : key
+    if (typeof value === 'object' && value !== null) {
+      keys.push(...extractKeys(value as TranslationFile, fullKey))
+    } else {
+      keys.push(fullKey)
+    }
+  }
+  return keys
+}
+
+/**
+ * 在嵌套对象中设置值
+ */
+export function setNestedValue(obj: TranslationFile, path: string, value: string): void {
+  const parts = path.split('.')
+  let current = obj
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i]
+    if (!(part in current) || typeof current[part] !== 'object') {
+      current[part] = {}
+    }
+    current = current[part] as TranslationFile
+  }
+  current[parts[parts.length - 1]] = value
+}
+
+/**
+ * 获取嵌套对象中的值
+ */
+export function getNestedValue(obj: TranslationFile, path: string): TranslationValue | undefined {
+  const parts = path.split('.')
+  let current: TranslationValue = obj
+  for (const part of parts) {
+    if (typeof current !== 'object' || current === null || !(part in current)) {
+      return undefined
+    }
+    current = (current as TranslationFile)[part]
+  }
+  return current
+}
diff --git a/packages/i18n-tools/tsconfig.json b/packages/i18n-tools/tsconfig.json
new file mode 100644
index 00000000..790761bc
--- /dev/null
+++ b/packages/i18n-tools/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts", "bin/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/keyapp-sdk/package.json b/packages/keyapp-sdk/package.json
new file mode 100644
index 00000000..8717c83a
--- /dev/null
+++ b/packages/keyapp-sdk/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@biochain/keyapp-sdk",
+  "version": "0.1.0",
+  "description": "KeyApp 小程序 SDK - 应用上下文 API",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./react": {
+      "types": "./src/react.tsx",
+      "import": "./src/react.tsx"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:storybook": "echo 'SDK has no storybook'"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.0"
+  }
+}
diff --git a/packages/keyapp-sdk/src/ctx.ts b/packages/keyapp-sdk/src/ctx.ts
new file mode 100644
index 00000000..159b8c9b
--- /dev/null
+++ b/packages/keyapp-sdk/src/ctx.ts
@@ -0,0 +1,189 @@
+/**
+ * KeyApp Context - 应用上下文管理
+ * 
+ * 提供主题、语言、平台等上下文信息，支持事件监听
+ */
+
+import type {
+  KeyAppContextState,
+  KeyAppContextEventMap,
+  KeyAppContextEventType,
+  ThemeContext,
+  LocaleContext,
+  EnvContext,
+  A11yContext,
+} from './types'
+
+const DEFAULT_STATE: KeyAppContextState = {
+  theme: {
+    colorMode: 'light',
+    primaryHue: 323,
+    primarySaturation: 0.26,
+  },
+  locale: {
+    lang: 'en-US',
+    rtl: false,
+  },
+  env: {
+    platform: 'web',
+    version: '1.0.0',
+    safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
+  },
+  a11y: {
+    fontScale: 1.0,
+    reduceMotion: false,
+  },
+}
+
+function parseInitialContext(): KeyAppContextState {
+  if (typeof window === 'undefined') {
+    return DEFAULT_STATE
+  }
+
+  const params = new URLSearchParams(window.location.search)
+  
+  return {
+    theme: {
+      colorMode: (params.get('colorMode') as 'light' | 'dark') || DEFAULT_STATE.theme.colorMode,
+      primaryHue: Number(params.get('primaryHue')) || DEFAULT_STATE.theme.primaryHue,
+      primarySaturation: Number(params.get('primarySaturation')) || DEFAULT_STATE.theme.primarySaturation,
+    },
+    locale: {
+      lang: params.get('lang') || DEFAULT_STATE.locale.lang,
+      rtl: params.get('rtl') === 'true',
+    },
+    env: {
+      platform: (params.get('platform') as KeyAppContextState['env']['platform']) || DEFAULT_STATE.env.platform,
+      version: params.get('version') || DEFAULT_STATE.env.version,
+      safeAreaInsets: {
+        top: Number(params.get('safeAreaTop')) || 0,
+        bottom: Number(params.get('safeAreaBottom')) || 0,
+        left: Number(params.get('safeAreaLeft')) || 0,
+        right: Number(params.get('safeAreaRight')) || 0,
+      },
+    },
+    a11y: {
+      fontScale: Number(params.get('fontScale')) || DEFAULT_STATE.a11y.fontScale,
+      reduceMotion: params.get('reduceMotion') === 'true',
+    },
+  }
+}
+
+class KeyAppContext extends EventTarget {
+  #state: KeyAppContextState
+
+  constructor() {
+    super()
+    this.#state = parseInitialContext()
+    this.#setupMessageListener()
+    this.#applyThemeToDocument()
+  }
+
+  #setupMessageListener() {
+    if (typeof window === 'undefined') return
+
+    window.addEventListener('message', (event) => {
+      if (event.data?.type === 'keyapp:context-update') {
+        this.#handleContextUpdate(event.data.payload)
+      }
+    })
+  }
+
+  #handleContextUpdate(payload: Partial<KeyAppContextState>) {
+    const oldState = this.#state
+    
+    if (payload.theme) {
+      this.#state = { ...this.#state, theme: { ...this.#state.theme, ...payload.theme } }
+      if (JSON.stringify(oldState.theme) !== JSON.stringify(this.#state.theme)) {
+        this.dispatchEvent(new CustomEvent('themechange', { detail: this.#state.theme }))
+        this.#applyThemeToDocument()
+      }
+    }
+    
+    if (payload.locale) {
+      this.#state = { ...this.#state, locale: { ...this.#state.locale, ...payload.locale } }
+      if (JSON.stringify(oldState.locale) !== JSON.stringify(this.#state.locale)) {
+        this.dispatchEvent(new CustomEvent('localechange', { detail: this.#state.locale }))
+        this.#applyLocaleToDocument()
+      }
+    }
+    
+    if (payload.env) {
+      this.#state = { ...this.#state, env: { ...this.#state.env, ...payload.env } }
+      if (JSON.stringify(oldState.env) !== JSON.stringify(this.#state.env)) {
+        this.dispatchEvent(new CustomEvent('envchange', { detail: this.#state.env }))
+      }
+    }
+    
+    if (payload.a11y) {
+      this.#state = { ...this.#state, a11y: { ...this.#state.a11y, ...payload.a11y } }
+      if (JSON.stringify(oldState.a11y) !== JSON.stringify(this.#state.a11y)) {
+        this.dispatchEvent(new CustomEvent('a11ychange', { detail: this.#state.a11y }))
+      }
+    }
+    
+    this.dispatchEvent(new CustomEvent('change', { detail: this.#state }))
+  }
+
+  #applyThemeToDocument() {
+    if (typeof document === 'undefined') return
+
+    const { colorMode, primaryHue, primarySaturation } = this.#state.theme
+    
+    // 设置 dark class
+    document.documentElement.classList.toggle('dark', colorMode === 'dark')
+    
+    // 设置 CSS 变量
+    document.documentElement.style.setProperty('--primary-hue', String(primaryHue))
+    document.documentElement.style.setProperty('--primary-saturation', String(primarySaturation))
+  }
+
+  #applyLocaleToDocument() {
+    if (typeof document === 'undefined') return
+
+    const { lang, rtl } = this.#state.locale
+    
+    document.documentElement.lang = lang
+    document.documentElement.dir = rtl ? 'rtl' : 'ltr'
+  }
+
+  get theme(): ThemeContext {
+    return { ...this.#state.theme }
+  }
+
+  get locale(): LocaleContext {
+    return { ...this.#state.locale }
+  }
+
+  get env(): EnvContext {
+    return { ...this.#state.env }
+  }
+
+  get a11y(): A11yContext {
+    return { ...this.#state.a11y }
+  }
+
+  snapshot(): KeyAppContextState {
+    return JSON.parse(JSON.stringify(this.#state))
+  }
+
+  // 类型安全的事件监听方法
+  on<K extends KeyAppContextEventType>(
+    type: K,
+    listener: (event: KeyAppContextEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void {
+    super.addEventListener(type, listener as EventListener, options)
+  }
+
+  off<K extends KeyAppContextEventType>(
+    type: K,
+    listener: (event: KeyAppContextEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void {
+    super.removeEventListener(type, listener as EventListener, options)
+  }
+}
+
+// 单例导出
+export const ctx = new KeyAppContext()
diff --git a/packages/keyapp-sdk/src/index.ts b/packages/keyapp-sdk/src/index.ts
new file mode 100644
index 00000000..7dae6c73
--- /dev/null
+++ b/packages/keyapp-sdk/src/index.ts
@@ -0,0 +1,19 @@
+/**
+ * @biochain/keyapp-sdk - KeyApp 小程序 SDK
+ * 
+ * 提供应用上下文 API（主题、语言、平台等）
+ */
+
+export { ctx } from './ctx'
+export type {
+  KeyAppContextState,
+  KeyAppContextEventMap,
+  KeyAppContextEventType,
+  ThemeContext,
+  LocaleContext,
+  EnvContext,
+  A11yContext,
+  SafeAreaInsets,
+  ColorMode,
+  Platform,
+} from './types'
diff --git a/packages/keyapp-sdk/src/react.tsx b/packages/keyapp-sdk/src/react.tsx
new file mode 100644
index 00000000..86ece3c3
--- /dev/null
+++ b/packages/keyapp-sdk/src/react.tsx
@@ -0,0 +1,92 @@
+/**
+ * KeyApp SDK React Hooks
+ */
+
+import { useSyncExternalStore, useCallback } from 'react'
+import { ctx } from './ctx'
+import type { KeyAppContextState, ThemeContext, LocaleContext, EnvContext, A11yContext } from './types'
+
+function subscribe(callback: () => void): () => void {
+  ctx.on('change', callback as (event: CustomEvent) => void)
+  return () => ctx.off('change', callback as (event: CustomEvent) => void)
+}
+
+export function useKeyAppContext(): KeyAppContextState {
+  return useSyncExternalStore(
+    subscribe,
+    () => ctx.snapshot(),
+    () => ctx.snapshot()
+  )
+}
+
+export function useKeyAppTheme(): ThemeContext {
+  const subscribeTheme = useCallback((callback: () => void) => {
+    ctx.on('themechange', callback as (event: CustomEvent) => void)
+    return () => ctx.off('themechange', callback as (event: CustomEvent) => void)
+  }, [])
+
+  return useSyncExternalStore(
+    subscribeTheme,
+    () => ctx.theme,
+    () => ctx.theme
+  )
+}
+
+export function useKeyAppLocale(): LocaleContext {
+  const subscribeLocale = useCallback((callback: () => void) => {
+    ctx.on('localechange', callback as (event: CustomEvent) => void)
+    return () => ctx.off('localechange', callback as (event: CustomEvent) => void)
+  }, [])
+
+  return useSyncExternalStore(
+    subscribeLocale,
+    () => ctx.locale,
+    () => ctx.locale
+  )
+}
+
+export function useKeyAppEnv(): EnvContext {
+  const subscribeEnv = useCallback((callback: () => void) => {
+    ctx.on('envchange', callback as (event: CustomEvent) => void)
+    return () => ctx.off('envchange', callback as (event: CustomEvent) => void)
+  }, [])
+
+  return useSyncExternalStore(
+    subscribeEnv,
+    () => ctx.env,
+    () => ctx.env
+  )
+}
+
+export function useKeyAppA11y(): A11yContext {
+  const subscribeA11y = useCallback((callback: () => void) => {
+    ctx.on('a11ychange', callback as (event: CustomEvent) => void)
+    return () => ctx.off('a11ychange', callback as (event: CustomEvent) => void)
+  }, [])
+
+  return useSyncExternalStore(
+    subscribeA11y,
+    () => ctx.a11y,
+    () => ctx.a11y
+  )
+}
+
+export function useColorMode(): 'light' | 'dark' {
+  const theme = useKeyAppTheme()
+  return theme.colorMode
+}
+
+export function usePrimaryHue(): number {
+  const theme = useKeyAppTheme()
+  return theme.primaryHue
+}
+
+// Re-export ctx and types for convenience
+export { ctx } from './ctx'
+export type {
+  KeyAppContextState,
+  ThemeContext,
+  LocaleContext,
+  EnvContext,
+  A11yContext,
+} from './types'
diff --git a/packages/keyapp-sdk/src/types.ts b/packages/keyapp-sdk/src/types.ts
new file mode 100644
index 00000000..8cb7865c
--- /dev/null
+++ b/packages/keyapp-sdk/src/types.ts
@@ -0,0 +1,52 @@
+/**
+ * KeyApp SDK 类型定义
+ */
+
+export type ColorMode = 'light' | 'dark'
+export type Platform = 'ios' | 'android' | 'web' | 'dweb'
+
+export interface ThemeContext {
+  colorMode: ColorMode
+  primaryHue: number
+  primarySaturation: number
+}
+
+export interface LocaleContext {
+  lang: string
+  rtl: boolean
+}
+
+export interface SafeAreaInsets {
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
+export interface EnvContext {
+  platform: Platform
+  version: string
+  safeAreaInsets: SafeAreaInsets
+}
+
+export interface A11yContext {
+  fontScale: number
+  reduceMotion: boolean
+}
+
+export interface KeyAppContextState {
+  theme: ThemeContext
+  locale: LocaleContext
+  env: EnvContext
+  a11y: A11yContext
+}
+
+export interface KeyAppContextEventMap {
+  change: CustomEvent<KeyAppContextState>
+  themechange: CustomEvent<ThemeContext>
+  localechange: CustomEvent<LocaleContext>
+  envchange: CustomEvent<EnvContext>
+  a11ychange: CustomEvent<A11yContext>
+}
+
+export type KeyAppContextEventType = keyof KeyAppContextEventMap
diff --git a/packages/keyapp-sdk/tsconfig.json b/packages/keyapp-sdk/tsconfig.json
new file mode 100644
index 00000000..d089be00
--- /dev/null
+++ b/packages/keyapp-sdk/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/keyapp-sdk/vite.config.ts b/packages/keyapp-sdk/vite.config.ts
new file mode 100644
index 00000000..a8627e81
--- /dev/null
+++ b/packages/keyapp-sdk/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    passWithNoTests: true,
+  },
+})
diff --git a/packages/plugin-navigation-sync/package.json b/packages/plugin-navigation-sync/package.json
new file mode 100644
index 00000000..da32c6f9
--- /dev/null
+++ b/packages/plugin-navigation-sync/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@biochain/plugin-navigation-sync",
+  "private": true,
+  "version": "0.1.0",
+  "description": "KeyApp maintained Stackflow navigation sync plugin (URLPattern based)",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "echo 'plugin has no tests'",
+    "test:run": "echo 'plugin has no tests'",
+    "test:storybook": "echo 'plugin has no storybook'",
+    "i18n:run": "echo 'plugin has no i18n'",
+    "theme:run": "echo 'plugin has no theme'"
+  },
+  "dependencies": {
+    "flatted": "^3.3.1",
+    "history": "^5.3.0",
+    "urlpattern-polyfill": "^10.1.0"
+  },
+  "peerDependencies": {
+    "@stackflow/config": "^1.0.1-canary.0",
+    "@stackflow/core": "^1.1.0-canary.0",
+    "@stackflow/react": "^1.3.2-canary.0",
+    "react": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
+}
+
diff --git a/packages/plugin-navigation-sync/src/ActivityActivationCountsContext.ts b/packages/plugin-navigation-sync/src/ActivityActivationCountsContext.ts
new file mode 100644
index 00000000..c34dc927
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/ActivityActivationCountsContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export const ActivityActivationCountsContext = createContext<
+  { activityId: string; activationCount: number }[]
+>([]);
diff --git a/packages/plugin-navigation-sync/src/ActivityActivationMonitor/ActivityActivationMonitor.ts b/packages/plugin-navigation-sync/src/ActivityActivationMonitor/ActivityActivationMonitor.ts
new file mode 100644
index 00000000..802ed037
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/ActivityActivationMonitor/ActivityActivationMonitor.ts
@@ -0,0 +1,7 @@
+import type { Stack } from "@stackflow/core";
+
+export interface ActivityActivationMonitor {
+  captureStackChange(stack: Stack): void;
+  getActivationCount(): number;
+  getTargetId(): string;
+}
diff --git a/packages/plugin-navigation-sync/src/ActivityActivationMonitor/CountPublishingActivityActivationMonitor.ts b/packages/plugin-navigation-sync/src/ActivityActivationMonitor/CountPublishingActivityActivationMonitor.ts
new file mode 100644
index 00000000..26f03029
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/ActivityActivationMonitor/CountPublishingActivityActivationMonitor.ts
@@ -0,0 +1,40 @@
+import type { Stack } from "@stackflow/core";
+import type { Publisher } from "../Publisher";
+import type { ActivityActivationMonitor } from "./ActivityActivationMonitor";
+
+export class CountPublishingActivityActivationMonitor
+  implements ActivityActivationMonitor
+{
+  private activityActivationMonitor: ActivityActivationMonitor;
+  private publisher: Publisher<number>;
+
+  constructor(
+    activityActivationMonitor: ActivityActivationMonitor,
+    publisher: Publisher<number>,
+  ) {
+    this.activityActivationMonitor = activityActivationMonitor;
+    this.publisher = publisher;
+  }
+
+  captureStackChange(stack: Stack): void {
+    const previousActivationCount =
+      this.activityActivationMonitor.getActivationCount();
+
+    this.activityActivationMonitor.captureStackChange(stack);
+
+    const currentActivationCount =
+      this.activityActivationMonitor.getActivationCount();
+
+    if (currentActivationCount !== previousActivationCount) {
+      this.publisher.publish(currentActivationCount);
+    }
+  }
+
+  getActivationCount(): number {
+    return this.activityActivationMonitor.getActivationCount();
+  }
+
+  getTargetId(): string {
+    return this.activityActivationMonitor.getTargetId();
+  }
+}
diff --git a/packages/plugin-navigation-sync/src/ActivityActivationMonitor/DefaultHistoryActivityActivationMonitor.ts b/packages/plugin-navigation-sync/src/ActivityActivationMonitor/DefaultHistoryActivityActivationMonitor.ts
new file mode 100644
index 00000000..eb40255e
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/ActivityActivationMonitor/DefaultHistoryActivityActivationMonitor.ts
@@ -0,0 +1,61 @@
+import type { Stack } from "@stackflow/core";
+import {
+  type ActivityNavigationEvent,
+  isActivityNavigationEvent,
+} from "../NavigationEvent";
+import {
+  isTerminated,
+  type NavigationProcess,
+} from "../NavigationProcess/NavigationProcess";
+import type { ActivityActivationMonitor } from "./ActivityActivationMonitor";
+
+export class DefaultHistoryActivityActivationMonitor
+  implements ActivityActivationMonitor
+{
+  private targetId: string;
+  private initialSetupProcess: NavigationProcess;
+  private focusCount: number;
+  private previousActivationTrigger: ActivityNavigationEvent | null;
+
+  constructor(targetId: string, initialSetupProcess: NavigationProcess) {
+    this.targetId = targetId;
+    this.initialSetupProcess = initialSetupProcess;
+    this.focusCount = 0;
+    this.previousActivationTrigger = null;
+  }
+
+  captureStackChange(stack: Stack): void {
+    const navigationProcessStatus = this.initialSetupProcess.getStatus();
+
+    if (!isTerminated(navigationProcessStatus)) return;
+
+    const targetActivity = stack.activities.find(
+      (activity) => activity.id === this.targetId,
+    );
+
+    if (!targetActivity || !targetActivity.isActive) return;
+
+    const latestActivityNavigation = stack.events.findLast(
+      isActivityNavigationEvent,
+    );
+
+    if (
+      !latestActivityNavigation ||
+      (this.previousActivationTrigger &&
+        latestActivityNavigation.eventDate <=
+          this.previousActivationTrigger.eventDate)
+    )
+      return;
+
+    this.focusCount++;
+    this.previousActivationTrigger = latestActivityNavigation;
+  }
+
+  getActivationCount(): number {
+    return this.focusCount;
+  }
+
+  getTargetId(): string {
+    return this.targetId;
+  }
+}
diff --git a/packages/plugin-navigation-sync/src/ActivityRoute.ts b/packages/plugin-navigation-sync/src/ActivityRoute.ts
new file mode 100644
index 00000000..d5b99300
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/ActivityRoute.ts
@@ -0,0 +1,5 @@
+import type { Route } from "./RouteLike";
+
+export interface ActivityRoute<T> extends Route<T> {
+  activityName: string;
+}
diff --git a/packages/plugin-navigation-sync/src/ActivityRouteMapInput.ts b/packages/plugin-navigation-sync/src/ActivityRouteMapInput.ts
new file mode 100644
index 00000000..d3a313b8
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/ActivityRouteMapInput.ts
@@ -0,0 +1,5 @@
+import type { RouteLike } from "./RouteLike";
+
+export type ActivityRouteMapInput<T> = {
+  [activityName in string]?: RouteLike<T>;
+};
diff --git a/packages/plugin-navigation-sync/src/HistoryQueueContext.tsx b/packages/plugin-navigation-sync/src/HistoryQueueContext.tsx
new file mode 100644
index 00000000..a402fc05
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/HistoryQueueContext.tsx
@@ -0,0 +1,31 @@
+import { createContext, useContext, useMemo } from "react";
+
+export type HistoryQueueContextValue = {
+  requestHistoryTick: (cb: (resolve: () => void) => void) => void;
+};
+
+export const HistoryQueueContext = createContext<HistoryQueueContextValue>({
+  requestHistoryTick: () => {},
+});
+
+export const HistoryQueueProvider = ({
+  children,
+  requestHistoryTick,
+}: {
+  children: React.ReactNode;
+} & HistoryQueueContextValue) => {
+  const ctx = useMemo(
+    () => ({
+      requestHistoryTick,
+    }),
+    [requestHistoryTick],
+  );
+
+  return (
+    <HistoryQueueContext.Provider value={ctx}>
+      {children}
+    </HistoryQueueContext.Provider>
+  );
+};
+
+export const useHistoryTick = () => useContext(HistoryQueueContext);
diff --git a/packages/plugin-navigation-sync/src/Mutex.ts b/packages/plugin-navigation-sync/src/Mutex.ts
new file mode 100644
index 00000000..ab4637c5
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/Mutex.ts
@@ -0,0 +1,24 @@
+export class Mutex {
+  private latestlyBookedSession: Promise<void> = Promise.resolve();
+
+  acquire(): Promise<{ release: () => void }> {
+    return new Promise((resolveSessionHandle) => {
+      this.latestlyBookedSession = this.latestlyBookedSession.then(
+        () =>
+          new Promise((resolveSession) =>
+            resolveSessionHandle({ release: () => resolveSession() }),
+          ),
+      );
+    });
+  }
+
+  async runExclusively<T>(thunk: () => Promise<T>): Promise<Awaited<T>> {
+    const { release } = await this.acquire();
+
+    try {
+      return await thunk();
+    } finally {
+      release();
+    }
+  }
+}
diff --git a/packages/plugin-navigation-sync/src/NavigationEvent.ts b/packages/plugin-navigation-sync/src/NavigationEvent.ts
new file mode 100644
index 00000000..ab5abbea
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/NavigationEvent.ts
@@ -0,0 +1,44 @@
+import type {
+  DomainEvent,
+  PoppedEvent,
+  PushedEvent,
+  ReplacedEvent,
+  StepPoppedEvent,
+  StepPushedEvent,
+  StepReplacedEvent,
+} from "@stackflow/core";
+
+export type ActivityNavigationEvent = PushedEvent | PoppedEvent | ReplacedEvent;
+
+export type StepNavigationEvent =
+  | StepPushedEvent
+  | StepPoppedEvent
+  | StepReplacedEvent;
+
+export type NavigationEvent = ActivityNavigationEvent | StepNavigationEvent;
+
+export function isActivityNavigationEvent(
+  event: DomainEvent,
+): event is ActivityNavigationEvent {
+  return (
+    event.name === "Pushed" ||
+    event.name === "Popped" ||
+    event.name === "Replaced"
+  );
+}
+
+export function isStepNavigationEvent(
+  event: DomainEvent,
+): event is StepNavigationEvent {
+  return (
+    event.name === "StepPushed" ||
+    event.name === "StepPopped" ||
+    event.name === "StepReplaced"
+  );
+}
+
+export function isNavigationEvent(
+  event: DomainEvent,
+): event is NavigationEvent {
+  return isActivityNavigationEvent(event) || isStepNavigationEvent(event);
+}
diff --git a/packages/plugin-navigation-sync/src/NavigationProcess/NavigationProcess.ts b/packages/plugin-navigation-sync/src/NavigationProcess/NavigationProcess.ts
new file mode 100644
index 00000000..27d84857
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/NavigationProcess/NavigationProcess.ts
@@ -0,0 +1,26 @@
+import type { PushedEvent, Stack, StepPushedEvent } from "@stackflow/core";
+
+export interface NavigationProcess {
+  captureNavigationOpportunity(
+    stack: Stack | null,
+  ): (Omit<PushedEvent, "eventDate"> | Omit<StepPushedEvent, "eventDate">)[];
+
+  getStatus(): NavigationProcessStatus;
+}
+
+export const NavigationProcessStatus = {
+  IDLE: "idle",
+  PROGRESS: "progress",
+  SUCCEEDED: "succeeded",
+  FAILED: "failed",
+} as const;
+
+export type NavigationProcessStatus =
+  (typeof NavigationProcessStatus)[keyof typeof NavigationProcessStatus];
+
+export function isTerminated(status: NavigationProcessStatus): boolean {
+  return (
+    status === NavigationProcessStatus.SUCCEEDED ||
+    status === NavigationProcessStatus.FAILED
+  );
+}
diff --git a/packages/plugin-navigation-sync/src/NavigationProcess/SerialNavigationProcess.ts b/packages/plugin-navigation-sync/src/NavigationProcess/SerialNavigationProcess.ts
new file mode 100644
index 00000000..9dc4c602
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/NavigationProcess/SerialNavigationProcess.ts
@@ -0,0 +1,105 @@
+import type { PushedEvent, Stack, StepPushedEvent } from "@stackflow/core";
+import { isNavigationEvent, type NavigationEvent } from "../NavigationEvent";
+import {
+  isTerminated,
+  type NavigationProcess,
+  NavigationProcessStatus,
+} from "./NavigationProcess";
+
+export class SerialNavigationProcess implements NavigationProcess {
+  private status: NavigationProcessStatus;
+  private pendingNavigations: (() => (
+    | Omit<PushedEvent, "eventDate">
+    | Omit<StepPushedEvent, "eventDate">
+  )[])[];
+  private dispatchedEvents: (
+    | Omit<PushedEvent, "eventDate">
+    | Omit<StepPushedEvent, "eventDate">
+  )[];
+  private baseNavigationEvents: NavigationEvent[];
+
+  constructor(
+    navigations: (() => (
+      | Omit<PushedEvent, "eventDate">
+      | Omit<StepPushedEvent, "eventDate">
+    )[])[],
+    baseNavigationEvents: NavigationEvent[] = [],
+  ) {
+    this.status =
+      navigations.length > 0
+        ? NavigationProcessStatus.IDLE
+        : NavigationProcessStatus.SUCCEEDED;
+    this.pendingNavigations = navigations.slice();
+    this.dispatchedEvents = [];
+    this.baseNavigationEvents = baseNavigationEvents;
+  }
+
+  captureNavigationOpportunity(
+    stack: Stack | null,
+  ): (Omit<PushedEvent, "eventDate"> | Omit<StepPushedEvent, "eventDate">)[] {
+    if (isTerminated(this.status)) return [];
+    if (stack && stack.globalTransitionState !== "idle") return [];
+
+    if (this.pendingNavigations.length === 0) {
+      this.status = NavigationProcessStatus.SUCCEEDED;
+
+      return [];
+    }
+
+    const navigationHistory = stack
+      ? stack.events.filter(isNavigationEvent)
+      : [];
+
+    if (
+      !(
+        this.verifyAllDispatchedEventsAreInNavigationHistory(
+          navigationHistory,
+        ) && this.verifyNoUnknownNavigationEvents(navigationHistory)
+      )
+    ) {
+      this.pendingNavigations = [];
+      this.status = NavigationProcessStatus.FAILED;
+
+      return [];
+    }
+
+    const nextNavigation = this.pendingNavigations.shift();
+
+    if (!nextNavigation) return [];
+
+    const nextNavigationEvents = nextNavigation();
+
+    this.dispatchedEvents.push(...nextNavigationEvents);
+    this.status = NavigationProcessStatus.PROGRESS;
+
+    return nextNavigationEvents;
+  }
+
+  getStatus(): NavigationProcessStatus {
+    return this.status;
+  }
+
+  private verifyAllDispatchedEventsAreInNavigationHistory(
+    navigationHistory: NavigationEvent[],
+  ): boolean {
+    const navigationHistoryEventIds = new Set(
+      navigationHistory.map((e) => e.id),
+    );
+
+    return this.dispatchedEvents.every((event) =>
+      navigationHistoryEventIds.has(event.id),
+    );
+  }
+
+  private verifyNoUnknownNavigationEvents(
+    navigationHistory: NavigationEvent[],
+  ): boolean {
+    const knownNavigationEvents = new Set(
+      [...this.baseNavigationEvents, ...this.dispatchedEvents].map((e) => e.id),
+    );
+
+    return navigationHistory.every((event) =>
+      knownNavigationEvents.has(event.id),
+    );
+  }
+}
diff --git a/packages/plugin-navigation-sync/src/Publisher.ts b/packages/plugin-navigation-sync/src/Publisher.ts
new file mode 100644
index 00000000..d81ad27e
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/Publisher.ts
@@ -0,0 +1,24 @@
+import { Mutex } from "./Mutex";
+
+export class Publisher<T> {
+  private subscribers: ((value: T) => Promise<void>)[] = [];
+  private publishLock: Mutex = new Mutex();
+
+  subscribe(subscriber: (value: T) => Promise<void>): () => void {
+    this.subscribers.push(subscriber);
+
+    return () => {
+      this.subscribers = this.subscribers.filter((s) => s !== subscriber);
+    };
+  }
+
+  publish(value: T): Promise<PromiseSettledResult<void>[]> {
+    const targetSubscribers = this.subscribers.slice();
+
+    return this.publishLock.runExclusively(() =>
+      Promise.allSettled(
+        targetSubscribers.map((subscriber) => subscriber(value)),
+      ),
+    );
+  }
+}
diff --git a/packages/plugin-navigation-sync/src/RouteLike.ts b/packages/plugin-navigation-sync/src/RouteLike.ts
new file mode 100644
index 00000000..104fd3a8
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/RouteLike.ts
@@ -0,0 +1,30 @@
+import type {
+  RegisteredActivityName,
+  RegisteredActivityParamTypes,
+} from "@stackflow/config";
+import type { ActivityComponentType } from "@stackflow/react";
+
+export type Route<ComponentType> = {
+  path: string;
+  decode?: (
+    params: Record<string, string>,
+  ) => ComponentType extends ActivityComponentType<infer U> ? U : {};
+  defaultHistory?: (params: Record<string, string>) => HistoryEntry[];
+};
+
+export type HistoryEntry = {
+  [K in RegisteredActivityName]: {
+    activityName: K;
+    activityParams: RegisteredActivityParamTypes[K];
+    additionalSteps?: {
+      stepParams: RegisteredActivityParamTypes[K];
+      hasZIndex?: boolean;
+    }[];
+  };
+}[RegisteredActivityName];
+
+export type RouteLike<ComponentType> =
+  | string
+  | string[]
+  | Route<ComponentType>
+  | Route<ComponentType>[];
diff --git a/packages/plugin-navigation-sync/src/RoutesContext.tsx b/packages/plugin-navigation-sync/src/RoutesContext.tsx
new file mode 100644
index 00000000..561a5022
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/RoutesContext.tsx
@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+
+import type { ActivityRoute } from "./ActivityRoute";
+
+export const RoutesContext = createContext<ActivityRoute<unknown>[]>([]);
+
+interface RoutesProviderProps<T> {
+  routes: ActivityRoute<T>[];
+  children: React.ReactNode;
+}
+export const RoutesProvider = <T,>(props: RoutesProviderProps<T>) => (
+  <RoutesContext.Provider value={props.routes}>
+    {props.children}
+  </RoutesContext.Provider>
+);
+
+RoutesProvider.displayName = "RoutesProvider";
+
+export function useRoutes() {
+  return useContext(RoutesContext);
+}
diff --git a/packages/plugin-navigation-sync/src/historyState.ts b/packages/plugin-navigation-sync/src/historyState.ts
new file mode 100644
index 00000000..3f8cd13b
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/historyState.ts
@@ -0,0 +1,81 @@
+import type { Activity, ActivityStep } from "@stackflow/core";
+import { parse, stringify } from "flatted";
+import type { History } from "history";
+
+const STATE_TAG = "@biochain/plugin-navigation-sync";
+
+interface State {
+  activity: Activity;
+  step?: ActivityStep;
+}
+
+interface SerializedState {
+  _TAG: typeof STATE_TAG;
+  flattedState: string;
+}
+
+function serializeState(state: State): SerializedState {
+  return {
+    _TAG: STATE_TAG,
+    flattedState: stringify({
+      activity: state.activity,
+      step: state.step,
+    }),
+  };
+}
+
+function isSerializedState(input: unknown): input is SerializedState {
+  return (
+    typeof input === "object" &&
+    input !== null &&
+    "_TAG" in input &&
+    "flattedState" in input &&
+    typeof input._TAG === "string" &&
+    input._TAG === STATE_TAG &&
+    typeof input.flattedState === "string"
+  );
+}
+
+export function parseState(input: unknown): State | null {
+  try {
+    return isSerializedState(input) ? parse(input.flattedState) : null;
+  } catch {
+    return null;
+  }
+}
+
+export function pushState({
+  history,
+  pathname,
+  state,
+  useHash,
+}: {
+  history: History;
+  pathname: string;
+  state: State;
+  useHash?: boolean;
+}) {
+  const nextPathname = useHash
+    ? `${history.location.pathname}#${pathname}`
+    : pathname;
+
+  history.push(nextPathname, serializeState(state));
+}
+
+export function replaceState({
+  history,
+  pathname,
+  state,
+  useHash,
+}: {
+  history: History;
+  pathname: string;
+  state: State;
+  useHash?: boolean;
+}) {
+  const nextPathname = useHash
+    ? `${history.location.pathname}#${pathname}`
+    : pathname;
+
+  history.replace(nextPathname, serializeState(state));
+}
diff --git a/packages/plugin-navigation-sync/src/historySyncPlugin.spec.ts b/packages/plugin-navigation-sync/src/historySyncPlugin.spec.ts
new file mode 100644
index 00000000..5ba28d37
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/historySyncPlugin.spec.ts
@@ -0,0 +1,1466 @@
+import type {
+  CoreStore,
+  PushedEvent,
+  Stack,
+  StackflowPlugin,
+  StepPushedEvent,
+} from "@stackflow/core";
+import { makeCoreStore, makeEvent } from "@stackflow/core";
+import type { Location, MemoryHistory } from "history";
+import { createMemoryHistory } from "history";
+import { loadQuery } from "react-relay";
+import { makeRelayEnvironment } from "./fixtures/graphql";
+import { default as getHelloQueryNode } from "./fixtures/graphql/__generated__/getHelloQuery.graphql";
+import { historySyncPlugin } from "./historySyncPlugin";
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+
+declare global {
+  interface ProxyConstructor {
+    new <TSource extends object, TTarget extends object>(
+      target: TSource,
+      handler: ProxyHandler<TSource>,
+    ): TTarget;
+  }
+}
+
+type PromiseProxy<T extends Record<string, (...args: any[]) => any>> = {
+  [K in keyof T]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
+};
+
+const makeActionsProxy = <T extends CoreStore["actions"]>({
+  actions,
+}: {
+  actions: T;
+}): PromiseProxy<T> =>
+  new Proxy(actions, {
+    get<K extends keyof CoreStore["actions"]>(target: typeof actions, p: K) {
+      return (...args: Parameters<(typeof target)[K]>) =>
+        new Promise<ReturnType<(typeof target)[K]>>((resolve) => {
+          // @ts-ignore
+          const ret: ReturnType<(typeof target)[K]> = target[p](...args);
+
+          setTimeout(() => {
+            // @ts-ignore
+            resolve(p === "getStack" ? target[p](...args) : ret);
+          }, 16 + 32);
+        });
+    },
+  });
+
+let dt = 0;
+
+const enoughPastTime = () => {
+  dt += 1;
+  return new Date(Date.now() - MINUTE).getTime() + dt;
+};
+
+const path = (location: Location) =>
+  location.pathname + location.search + location.hash;
+
+const stackflow = ({
+  activityNames,
+  plugins,
+}: {
+  activityNames: string[];
+  plugins: StackflowPlugin[];
+}) => {
+  /**
+   * `@stackflow/react`에서 복사됨
+   */
+  const pluginInstances = plugins.map((plugin) => plugin());
+  const initialPushedEvents = pluginInstances.reduce<
+    (PushedEvent | StepPushedEvent)[]
+  >(
+    (initialEvents, pluginInstance) =>
+      pluginInstance.overrideInitialEvents?.({
+        initialEvents,
+        initialContext: {},
+      }) ?? initialEvents,
+    [],
+  );
+
+  const coreStore = makeCoreStore({
+    initialEvents: [
+      makeEvent("Initialized", {
+        /**
+         * 약 2프레임
+         */
+        transitionDuration: 32,
+        eventDate: enoughPastTime(),
+      }),
+      ...activityNames.map((activityName) =>
+        makeEvent("ActivityRegistered", {
+          activityName,
+          eventDate: enoughPastTime(),
+        }),
+      ),
+      ...initialPushedEvents,
+    ],
+    plugins: [...plugins],
+  });
+
+  /**
+   * 렌더링 시작
+   */
+  coreStore.init();
+
+  return coreStore;
+};
+
+const activeActivity = (stack: Stack) =>
+  stack.activities.find((a) => a.isActive);
+
+describe("historySyncPlugin", () => {
+  let history: MemoryHistory;
+  let actions: PromiseProxy<CoreStore["actions"]>;
+
+  /**
+   * 매 테스트마다 history와 coreStore를 초기화합니다
+   */
+  beforeEach(() => {
+    history = createMemoryHistory();
+
+    const coreStore = stackflow({
+      activityNames: ["Home", "Article", "ThirdActivity", "FourthActivity"],
+      plugins: [
+        historySyncPlugin({
+          history,
+          routes: {
+            Home: "/home/",
+            Article: "/articles/:articleId",
+            ThirdActivity: "/third/:thirdId",
+            FourthActivity: "/fourth/:fourthId",
+          },
+          fallbackActivity: () => "Home",
+        }),
+      ],
+    });
+
+    actions = makeActionsProxy({
+      actions: coreStore.actions,
+    });
+  });
+
+  test("historySyncPlugin - 초기에 매칭하는 라우트가 없는 경우 fallbackActivity에 설정한 액티비티의 URL로 이동합니다", async () => {
+    expect(path(history.location)).toEqual("/home/");
+  });
+
+  test("historySyncPlugin - 초기에 매칭하는 라우트가 있는 경우 해당 액티비티의 URL로 이동합니다", async () => {
+    history = createMemoryHistory({
+      initialEntries: ["/articles/123/?title=hello"],
+    });
+
+    const { actions } = stackflow({
+      activityNames: ["Home", "Article"],
+      plugins: [
+        historySyncPlugin({
+          history,
+          routes: {
+            Home: "/home",
+            Article: "/articles/:articleId",
+          },
+          fallbackActivity: () => "Home",
+        }),
+      ],
+    });
+
+    expect(activeActivity(actions.getStack())?.params.articleId).toEqual("123");
+    expect(activeActivity(actions.getStack())?.params.title).toEqual("hello");
+  });
+
+  test("historySyncPlugin - actions.push() 후에, URL 상태가 알맞게 바뀝니다", async () => {
+    await actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1234",
+        title: "hello",
+      },
+    });
+
+    expect(path(history.location)).toEqual("/articles/1234/?title=hello");
+  });
+
+  test("historySyncPlugin - useHash: true이더라도, actions.push() 후에, URL 상태가 알맞게 바뀝니다", async () => {
+    history = createMemoryHistory();
+
+    const coreStore = stackflow({
+      activityNames: ["Home", "Article"],
+      plugins: [
+        historySyncPlugin({
+          history,
+          routes: {
+            Home: "/home",
+            Article: "/articles/:articleId",
+          },
+          fallbackActivity: () => "Home",
+          useHash: true,
+        }),
+      ],
+    });
+
+    actions = makeActionsProxy({
+      actions: coreStore.actions,
+    });
+
+    await actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1234",
+        title: "hello",
+      },
+    });
+
+    expect(path(history.location)).toEqual("/#/articles/1234/?title=hello");
+  });
+
+  test("historySyncPlugin - actions.replace() 후에, URL 상태가 알맞게 바뀝니다", async () => {
+    await actions.replace({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1234",
+        title: "hello",
+      },
+    });
+
+    expect(path(history.location)).toEqual("/articles/1234/?title=hello");
+    expect(history.index).toEqual(0);
+  });
+
+  test("historySyncPlugin - actions.push(), actions.pop()을 여러번 하더라도, URL 상태가 알맞게 바뀝니다", async () => {
+    await actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+        title: "hello",
+      },
+    });
+    expect(path(history.location)).toEqual("/articles/1/?title=hello");
+
+    await actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "2",
+        title: "hello",
+      },
+    });
+    expect(path(history.location)).toEqual("/articles/2/?title=hello");
+
+    await actions.push({
+      activityId: "a3",
+      activityName: "Article",
+      activityParams: {
+        articleId: "3",
+        title: "hello",
+      },
+    });
+    expect(path(history.location)).toEqual("/articles/3/?title=hello");
+    expect(history.index).toEqual(3);
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/articles/2/?title=hello");
+    expect(history.index).toEqual(2);
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/articles/1/?title=hello");
+    expect(history.index).toEqual(1);
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/home/");
+    expect(history.index).toEqual(0);
+  });
+
+  test("historySyncPlugin - 히스토리를 back하는 경우, 스택 상태가 알맞게 바뀝니다", async () => {
+    await actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1234",
+        title: "hello",
+      },
+    });
+
+    history.back();
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - 히스토리를 여러번 back하더라도, 스택 상태가 알맞게 바뀝니다", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+        title: "hello",
+      },
+    });
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "2",
+        title: "hello",
+      },
+    });
+    await actions.push({
+      activityId: "a3",
+      activityName: "Article",
+      activityParams: {
+        articleId: "3",
+        title: "hello",
+      },
+    });
+
+    history.back();
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Article");
+    expect(activeActivity(await actions.getStack())?.params?.articleId).toEqual(
+      "2",
+    );
+
+    history.back();
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Article");
+    expect(activeActivity(await actions.getStack())?.params?.articleId).toEqual(
+      "1",
+    );
+
+    history.back();
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - 앞으로 가기를 해도, 스택 상태가 알맞게 바뀝니다", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+        title: "hello",
+      },
+    });
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "2",
+        title: "hello",
+      },
+    });
+    await actions.push({
+      activityId: "a3",
+      activityName: "Article",
+      activityParams: {
+        articleId: "3",
+        title: "hello",
+      },
+    });
+
+    history.back();
+    history.back();
+    history.back();
+
+    history.go(1);
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Article");
+    expect(activeActivity(await actions.getStack())?.params?.articleId).toEqual(
+      "1",
+    );
+
+    history.go(1);
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Article");
+    expect(activeActivity(await actions.getStack())?.params?.articleId).toEqual(
+      "2",
+    );
+
+    history.go(1);
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Article");
+    expect(activeActivity(await actions.getStack())?.params?.articleId).toEqual(
+      "3",
+    );
+  });
+
+  test("historySyncPlugin - actions.stepPush()를 하면, 스택 상태가 알맞게 바뀌고, pop을 하면 한번에 여러 URL 상태가 사라집니다", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "10",
+        title: "hello",
+      },
+    });
+    await actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "11",
+        title: "hello",
+      },
+    });
+    expect(path(history.location)).toEqual("/articles/11/?title=hello");
+    expect(history.index).toEqual(2);
+
+    await actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "12",
+        title: "hello",
+      },
+    });
+    expect(path(history.location)).toEqual("/articles/12/?title=hello");
+    expect(history.index).toEqual(3);
+
+    await actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "20",
+        title: "world",
+      },
+    });
+    expect(path(history.location)).toEqual("/articles/20/?title=world");
+    expect(history.index).toEqual(4);
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/articles/12/?title=hello");
+    expect(history.index).toEqual(3);
+
+    await actions.pop();
+
+    expect(path(history.location)).toEqual("/home/");
+    expect(history.index).toEqual(0);
+  });
+
+  test("historySyncPlugin - actions.stepPop()을 여러번 하더라도 남은 스텝이 없으면 아무일도 일어나지 않습니다", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "10",
+        title: "hello",
+      },
+    });
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "11",
+        title: "hello",
+      },
+    });
+    await actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "12",
+        title: "hello",
+      },
+    });
+
+    actions.stepPop();
+    actions.stepPop();
+
+    await actions.stepPop();
+    expect(path(history.location)).toEqual("/articles/10/?title=hello");
+    expect(history.index).toEqual(1);
+
+    await actions.stepPop();
+    expect(path(history.location)).toEqual("/articles/10/?title=hello");
+    expect(history.index).toEqual(1);
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/home/");
+    expect(history.index).toEqual(0);
+  });
+
+  test("historySyncPlugin - actions.stepReplace()를 하면, 스택 상태가 알맞게 바뀌고, pop을 하면 한번에 여러 URL 상태가 사라집니다", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "10",
+        title: "hello",
+      },
+    });
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "11",
+        title: "hello",
+      },
+    });
+
+    await actions.stepReplace({
+      stepId: "s2",
+      stepParams: {
+        articleId: "12",
+        title: "hello",
+      },
+    });
+    expect(path(history.location)).toEqual("/articles/12/?title=hello");
+    expect(history.index).toEqual(2);
+
+    await actions.stepPop();
+    expect(path(history.location)).toEqual("/articles/10/?title=hello");
+    expect(history.index).toEqual(1);
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/home/");
+    expect(history.index).toEqual(0);
+  });
+
+  test("historySyncPlugin - actions.stepPush()를 한 상태에서, 뒤로 가기, 앞으로 가기를 하면 스택 상태가 알맞게 바뀌고, pop을 하면 한번에 여러 URL 상태가 사라집니다", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "10",
+        title: "hello",
+      },
+    });
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "11",
+        title: "hello",
+      },
+    });
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "12",
+        title: "hello",
+      },
+    });
+    await actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "20",
+        title: "world",
+      },
+    });
+
+    history.back();
+    expect(activeActivity(await actions.getStack())?.params.articleId).toEqual(
+      "12",
+    );
+
+    history.back();
+    expect(activeActivity(await actions.getStack())?.params.articleId).toEqual(
+      "11",
+    );
+
+    history.back();
+    expect(activeActivity(await actions.getStack())?.params.articleId).toEqual(
+      "10",
+    );
+
+    history.go(1);
+    expect(activeActivity(await actions.getStack())?.params.articleId).toEqual(
+      "11",
+    );
+
+    history.go(1);
+    expect(activeActivity(await actions.getStack())?.params.articleId).toEqual(
+      "12",
+    );
+
+    history.go(1);
+    expect(activeActivity(await actions.getStack())?.params.articleId).toEqual(
+      "20",
+    );
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/articles/12/?title=hello");
+
+    await actions.stepPop();
+    expect(path(history.location)).toEqual("/articles/11/?title=hello");
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/home/");
+    expect(history.index).toEqual(0);
+  });
+
+  test("historySyncPlugin - 여러 행동 후에 새로고침을 하고 히스토리 조작을 하더라도, 스택 상태가 알맞게 바뀝니다", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "10",
+        title: "hello",
+      },
+    });
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "20",
+        title: "hello",
+      },
+    });
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "21",
+        title: "hello",
+      },
+    });
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "22",
+        title: "hello",
+      },
+    });
+    actions.stepReplace({
+      stepId: "s3",
+      stepParams: {
+        articleId: "23",
+        title: "hello",
+      },
+    });
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        articleId: "24",
+        title: "hello",
+      },
+    });
+    await actions.push({
+      activityId: "a3",
+      activityName: "Article",
+      activityParams: {
+        articleId: "30",
+        title: "hello",
+      },
+    });
+
+    // 새로고침 후
+    await (async () => {
+      const { actions } = stackflow({
+        activityNames: ["Home", "Article"],
+        plugins: [
+          historySyncPlugin({
+            history,
+            routes: {
+              Home: "/home",
+              Article: "/articles/:articleId",
+            },
+            fallbackActivity: () => "Home",
+          }),
+        ],
+      });
+
+      const proxyActions = makeActionsProxy({
+        actions,
+      });
+
+      await proxyActions.getStack();
+
+      history.back();
+
+      expect(
+        activeActivity(await proxyActions.getStack())?.params.articleId,
+      ).toEqual("24");
+      expect(history.index).toEqual(5);
+
+      history.back();
+
+      expect(
+        activeActivity(await proxyActions.getStack())?.params.articleId,
+      ).toEqual("23");
+      expect(history.index).toEqual(4);
+
+      history.back();
+
+      expect(
+        activeActivity(await proxyActions.getStack())?.params.articleId,
+      ).toEqual("21");
+      expect(history.index).toEqual(3);
+
+      history.back();
+
+      expect(
+        activeActivity(await proxyActions.getStack())?.params.articleId,
+      ).toEqual("20");
+      expect(history.index).toEqual(2);
+
+      history.back();
+
+      expect(
+        activeActivity(await proxyActions.getStack())?.params.articleId,
+      ).toEqual("10");
+      expect(history.index).toEqual(1);
+
+      history.back();
+
+      expect(activeActivity(await proxyActions.getStack())?.name).toEqual(
+        "Home",
+      );
+      expect(history.index).toEqual(0);
+    })();
+  });
+
+  test("historySyncPlugin - push 후 stepPush 를 반복한 뒤, replace 를 하고 pop 을 수행하면 첫번째 stack 을 가리킵니다.", async () => {
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    await actions.replace({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "234",
+      },
+    });
+
+    await actions.pop();
+
+    expect(path(history.location)).toEqual("/home/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - push 후 *push 를 한 번 더 수행한 뒤*, stepPush 를 반복한 뒤, replace 를 하고 pop 을 수행하면 *두번째 stack* 을 가리킵니다.", async () => {
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+    actions.push({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "234",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        thirdId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        thirdId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        thirdId: "4",
+      },
+    });
+
+    actions.replace({
+      activityId: "a4",
+      activityName: "FourthActivity",
+      activityParams: {
+        fourthId: "567",
+      },
+    });
+
+    await actions.pop();
+    expect(path(history.location)).toEqual("/articles/1/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Article");
+  });
+
+  test("historySyncPlugin - push 후 stepPush 를 반복한 뒤, push 와 pop 을 1회 수행하고 replace를 수행하고 pop 을 진행하면 첫번째 stack 을 가리킵니다.", async () => {
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    actions.push({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "234",
+      },
+    });
+
+    actions.pop();
+
+    actions.replace({
+      activityId: "a4",
+      activityName: "FourthActivity",
+      activityParams: {
+        fourthId: "345",
+      },
+    });
+
+    await actions.pop();
+
+    expect(path(history.location)).toEqual("/home/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - push 후 stepPush 를 반복한 뒤, replace 를 한 뒤 stepPush 를 반복하고 pop 을 진행해도 첫번째 stack 을 가리킵니다.", async () => {
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    actions.replace({
+      activityId: "a4",
+      activityName: "FourthActivity",
+      activityParams: {
+        fourthId: "345",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s5",
+      stepParams: {
+        fourthId: "5",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s6",
+      stepParams: {
+        fourthId: "6",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s7",
+      stepParams: {
+        fourthId: "7",
+      },
+    });
+
+    await actions.pop();
+
+    expect(path(history.location)).toEqual("/home/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - push 후 stepPush 를 반복한 뒤, replace 를 수행하고 stepPush 를 반복하고 replace를 수행하고 pop을 진행해도 첫번째 stack을 가리킵니다.(for Hugh)", async () => {
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    actions.replace({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "234",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        thirdId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        thirdId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        thirdId: "4",
+      },
+    });
+
+    actions.replace({
+      activityId: "a4",
+      activityName: "FourthActivity",
+      activityParams: {
+        fourthId: "345",
+      },
+    });
+    await actions.pop();
+    expect(path(history.location)).toEqual("/home/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - push 후 stepPush 를 반복한 뒤, push 를 수행하고 stepPush 를 반복한 뒤 pop 을 수행, 그 후 replace 를 수행하고 pop을 진행해도 첫번째 stack을 가리킵니다.", async () => {
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    actions.push({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "234",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        thirdId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        thirdId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        thirdId: "4",
+      },
+    });
+    actions.pop();
+
+    actions.replace({
+      activityId: "a4",
+      activityName: "FourthActivity",
+      activityParams: {
+        fourthId: "345",
+      },
+    });
+    await actions.pop();
+
+    expect(path(history.location)).toEqual("/home/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - 2회 반복:push 후 stepPush 를 반복한 뒤, push 를 수행하고 stepPush 를 반복한 뒤 pop 을 수행, 그 후 replace 를 수행하고 pop을 진행해도 첫번째 stack을 가리킵니다.", async () => {
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    actions.push({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "234",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        thirdId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        thirdId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        thirdId: "4",
+      },
+    });
+    actions.pop();
+
+    actions.replace({
+      activityId: "a4",
+      activityName: "FourthActivity",
+      activityParams: {
+        fourthId: "345",
+      },
+    });
+    actions.pop();
+
+    actions.push({
+      activityId: "a5",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        thirdId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        thirdId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        thirdId: "4",
+      },
+    });
+
+    actions.push({
+      activityId: "a6",
+      activityName: "FourthActivity",
+      activityParams: {
+        fourthId: "234",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        fourthId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        fourthId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s4",
+      stepParams: {
+        fourthId: "4",
+      },
+    });
+    actions.pop();
+
+    actions.replace({
+      activityId: "a7",
+      activityName: "Article",
+      activityParams: {
+        articleId: "345",
+      },
+    });
+    await actions.pop();
+
+    expect(path(history.location)).toEqual("/home/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Home");
+  });
+
+  test("historySyncPlugin - push > push > stepPush > pop", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "5",
+      },
+    });
+
+    actions.replace({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        thirdId: "2",
+      },
+    });
+
+    await actions.pop();
+
+    expect(path(history.location)).toEqual("/articles/2/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual("Article");
+    expect(history.index).toEqual(2);
+  });
+
+  test("historySyncPlugin - push > stepPush > stepPush > replace", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    await actions.replace({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "1",
+      },
+    });
+
+    expect(path(history.location)).toEqual("/third/1/");
+    expect(activeActivity(await actions.getStack())?.name).toEqual(
+      "ThirdActivity",
+    );
+    expect(history.index).toEqual(1);
+  });
+
+  test("historySyncPlugin - search param이 붙은 채로 fallback activity로 이동하는 경우 activity params로 만들어줍니다", async () => {
+    history = createMemoryHistory({
+      initialEntries: ["/not/found/route/?foo=1&bar=2"],
+    });
+
+    const coreStore = stackflow({
+      activityNames: ["Home", "Article"],
+      plugins: [
+        historySyncPlugin({
+          history,
+          routes: {
+            Home: "/home",
+            Article: "/articles/:articleId",
+          },
+          fallbackActivity: () => "Home",
+        }),
+      ],
+    });
+
+    actions = makeActionsProxy({
+      actions: coreStore.actions,
+    });
+
+    const stack = await actions.getStack();
+
+    expect(activeActivity(stack)?.name).toEqual("Home");
+    expect(activeActivity(stack)?.params.foo).toEqual("1");
+    expect(activeActivity(stack)?.params.bar).toEqual("2");
+    expect(path(history.location)).toEqual("/home/?foo=1&bar=2");
+  });
+
+  test("historySyncPlugin - activity.context에 cyclic dependency가 있어도 정상적으로 로드됩니다", async () => {
+    history = createMemoryHistory({
+      initialEntries: ["/home"],
+    });
+
+    const coreStore = stackflow({
+      activityNames: ["Home", "Article"],
+      plugins: [
+        historySyncPlugin({
+          history,
+          routes: {
+            Home: "/home",
+            Article: "/articles/:articleId",
+          },
+          fallbackActivity: () => "Home",
+        }),
+      ],
+    });
+
+    actions = makeActionsProxy({
+      actions: coreStore.actions,
+    });
+
+    const cyclic: any = {};
+    cyclic.self = cyclic;
+
+    await actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+      activityContext: {
+        cyclic,
+      },
+    });
+
+    const stack = await actions.getStack();
+    const topActivity = stack.activities[1];
+
+    expect(
+      (topActivity.context as any).cyclic ===
+        (topActivity.context as any).cyclic.self,
+    ).toEqual(true);
+  });
+
+  test("historySyncPlugin - activity.context에 Promise가 있어도 정상적으로 로드됩니다", async () => {
+    history = createMemoryHistory({
+      initialEntries: ["/home"],
+    });
+
+    const coreStore = stackflow({
+      activityNames: ["Home", "Article"],
+      plugins: [
+        historySyncPlugin({
+          history,
+          routes: {
+            Home: "/home",
+            Article: "/articles/:articleId",
+          },
+          fallbackActivity: () => "Home",
+        }),
+      ],
+    });
+
+    actions = makeActionsProxy({
+      actions: coreStore.actions,
+    });
+
+    await actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+      activityContext: {
+        promise: new Promise<void>((resolve, reject) => resolve()),
+      },
+    });
+
+    const stack = await actions.getStack();
+    const topActivity = stack.activities[1];
+
+    expect((topActivity.context as any).promise).toBeInstanceOf(Promise);
+  });
+
+  test("historySyncPlugin - activity.context에 relay loadRef가 있어도 정상적으로 로드됩니다", async () => {
+    const environment = makeRelayEnvironment();
+
+    const loadRef = loadQuery(environment, getHelloQueryNode, {});
+
+    history = createMemoryHistory({
+      initialEntries: ["/home"],
+    });
+
+    const coreStore = stackflow({
+      activityNames: ["Home", "Article"],
+      plugins: [
+        historySyncPlugin({
+          history,
+          routes: {
+            Home: "/home",
+            Article: "/articles/:articleId",
+          },
+          fallbackActivity: () => "Home",
+        }),
+      ],
+    });
+
+    actions = makeActionsProxy({
+      actions: coreStore.actions,
+    });
+
+    await actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+      activityContext: {
+        loadRef,
+      },
+    });
+
+    const stack = await actions.getStack();
+    const topActivity = stack.activities[1];
+
+    const queryResponse = await (
+      topActivity.context as any
+    ).loadRef?.source?.toPromise();
+
+    /**
+     * Successfully queried with relay
+     */
+    expect(queryResponse.data.hello).toEqual("world");
+  });
+});
diff --git a/packages/plugin-navigation-sync/src/historySyncPlugin.tsx b/packages/plugin-navigation-sync/src/historySyncPlugin.tsx
new file mode 100644
index 00000000..873dcb49
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/historySyncPlugin.tsx
@@ -0,0 +1,723 @@
+import type {
+  ActivityDefinition,
+  Config,
+  RegisteredActivityName,
+} from "@stackflow/config";
+import {
+  id,
+  type PushedEvent,
+  type Stack,
+  type StepPushedEvent,
+} from "@stackflow/core";
+import type { StackflowReactPlugin } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react/future";
+import type { History, Listener } from "history";
+import { createBrowserHistory, createMemoryHistory } from "history";
+import { useSyncExternalStore } from "react";
+import { ActivityActivationCountsContext } from "./ActivityActivationCountsContext";
+import type { ActivityActivationMonitor } from "./ActivityActivationMonitor/ActivityActivationMonitor";
+import { DefaultHistoryActivityActivationMonitor } from "./ActivityActivationMonitor/DefaultHistoryActivityActivationMonitor";
+import { HistoryQueueProvider } from "./HistoryQueueContext";
+import { parseState, pushState, replaceState } from "./historyState";
+import { last } from "./last";
+import { makeHistoryTaskQueue } from "./makeHistoryTaskQueue";
+import type { UrlPatternOptions } from "./makeTemplate";
+import { makeTemplate, pathToUrl, urlSearchParamsToMap } from "./makeTemplate";
+import type { NavigationProcess } from "./NavigationProcess/NavigationProcess";
+import { SerialNavigationProcess } from "./NavigationProcess/SerialNavigationProcess";
+import { normalizeActivityRouteMap } from "./normalizeActivityRouteMap";
+import { Publisher } from "./Publisher";
+import type { RouteLike } from "./RouteLike";
+import { RoutesProvider } from "./RoutesContext";
+import { sortActivityRoutes } from "./sortActivityRoutes";
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+
+type ConfigHistorySync = {
+  makeTemplate: typeof makeTemplate;
+  urlPatternOptions?: UrlPatternOptions;
+};
+
+declare module "@stackflow/config" {
+  interface ActivityDefinition<ActivityName extends RegisteredActivityName> {
+    route: RouteLike<ActivityComponentType<RegisteredActivityName>>;
+  }
+
+  interface Config<T extends ActivityDefinition<RegisteredActivityName>> {
+    historySync?: ConfigHistorySync;
+  }
+}
+
+type HistorySyncPluginOptions<T, K extends Extract<keyof T, string>> = (
+  | {
+      routes: {
+        [key in keyof T]: RouteLike<T[key]>;
+      };
+    }
+  | {
+      config: Config<ActivityDefinition<RegisteredActivityName>>;
+    }
+) & {
+  fallbackActivity: (args: { initialContext: any }) => K;
+  useHash?: boolean;
+  history?: History;
+  urlPatternOptions?: UrlPatternOptions;
+};
+
+export function historySyncPlugin<
+  T extends { [activityName: string]: unknown },
+  K extends Extract<keyof T, string>,
+>(options: HistorySyncPluginOptions<T, K>): StackflowReactPlugin<T> {
+  if ("config" in options) {
+    options.config.decorate("historySync", {
+      makeTemplate,
+      urlPatternOptions: options.urlPatternOptions,
+    });
+  }
+
+  const history =
+    options.history ??
+    (typeof window === "undefined"
+      ? createMemoryHistory({})
+      : createBrowserHistory({
+          window,
+        }));
+
+  const { location } = history;
+
+  const routes =
+    "routes" in options
+      ? options.routes
+      : options.config.activities.reduce(
+          (acc, a) => ({ ...acc, [a.name]: a.route }),
+          {},
+        );
+
+  const activityRoutes = sortActivityRoutes(normalizeActivityRouteMap(routes));
+
+  return () => {
+    let pushFlag = 0;
+    let silentFlag = false;
+    let initialSetupProcess: NavigationProcess | null = null;
+    const activityActivationMonitors: ActivityActivationMonitor[] = [];
+    const activityActivationCountsChangeNotifier = new Publisher<void>();
+
+    const { requestHistoryTick } = makeHistoryTaskQueue(history);
+
+    const subscribeActivityActivationCountsChange = (
+      subscriber: () => void,
+    ) => {
+      return activityActivationCountsChangeNotifier.subscribe(async () =>
+        subscriber(),
+      );
+    };
+
+    let cachedActivityActivationCounts:
+      | { activityId: string; activationCount: number }[]
+      | null = null;
+    const getActivityActivationCounts = () => {
+      const currentActivityActivationCounts = activityActivationMonitors.map(
+        (activityActivationMonitor) => ({
+          activityId: activityActivationMonitor.getTargetId(),
+          activationCount: activityActivationMonitor.getActivationCount(),
+        }),
+      );
+
+      if (
+        !cachedActivityActivationCounts ||
+        cachedActivityActivationCounts.length !==
+          currentActivityActivationCounts.length ||
+        cachedActivityActivationCounts.some(
+          ({
+            activityId: cachedActivityId,
+            activationCount: cachedActivationCount,
+          }) =>
+            currentActivityActivationCounts.some(
+              ({ activityId, activationCount }) =>
+                activityId === cachedActivityId &&
+                activationCount !== cachedActivationCount,
+            ),
+        )
+      ) {
+        cachedActivityActivationCounts = currentActivityActivationCounts;
+      }
+
+      return cachedActivityActivationCounts;
+    };
+
+    const runActivityActivationMonitors = (stack: Stack) => {
+      let changeOccurred = false;
+
+      for (const activityActivationMonitor of activityActivationMonitors) {
+        const previousActivationCount =
+          activityActivationMonitor.getActivationCount();
+
+        activityActivationMonitor.captureStackChange(stack);
+
+        if (
+          previousActivationCount !==
+          activityActivationMonitor.getActivationCount()
+        ) {
+          changeOccurred = true;
+        }
+      }
+
+      if (changeOccurred) {
+        activityActivationCountsChangeNotifier.publish();
+      }
+    };
+
+    return {
+      key: "plugin-history-sync",
+      wrapStack({ stack }) {
+        const activityActivationCounts = useSyncExternalStore(
+          subscribeActivityActivationCountsChange,
+          getActivityActivationCounts,
+          getActivityActivationCounts,
+        );
+
+        return (
+          <HistoryQueueProvider requestHistoryTick={requestHistoryTick}>
+            <RoutesProvider routes={activityRoutes}>
+              <ActivityActivationCountsContext.Provider
+                value={activityActivationCounts}
+              >
+                {stack.render()}
+              </ActivityActivationCountsContext.Provider>
+            </RoutesProvider>
+          </HistoryQueueProvider>
+        );
+      },
+      overrideInitialEvents({ initialContext }) {
+        const initialState = parseState(history.location.state);
+
+        if (initialState) {
+          return [
+            {
+              ...initialState.activity.enteredBy,
+              name: "Pushed",
+            },
+            ...(initialState.step?.enteredBy.name === "StepPushed" ||
+            initialState.step?.enteredBy.name === "StepReplaced"
+              ? [
+                  {
+                    ...initialState.step.enteredBy,
+                    name: "StepPushed" as const,
+                  },
+                ]
+              : []),
+          ];
+        }
+
+        function resolveCurrentPath() {
+          if (
+            initialContext?.req?.path &&
+            typeof initialContext.req.path === "string"
+          ) {
+            return initialContext.req.path;
+          }
+
+          if (options.useHash) {
+            return location.hash.split("#")[1] ?? "/";
+          }
+
+          return location.pathname + location.search;
+        }
+
+        const currentPath = resolveCurrentPath();
+        const fallbackActivityName = options.fallbackActivity({
+          initialContext,
+        });
+        const targetActivityRoute =
+          activityRoutes.find((activityRoute) => {
+            const template = makeTemplate(
+              activityRoute,
+              options.urlPatternOptions,
+            );
+            const activityParams = template.parse(currentPath);
+
+            return activityParams !== null;
+          }) ??
+          activityRoutes.find(
+            (activityRoute) =>
+              activityRoute.activityName === fallbackActivityName,
+          )!;
+        const template = makeTemplate(targetActivityRoute, options.urlPatternOptions);
+        const parsedParams =
+          template.parse(currentPath) ?? {};
+        const params: Record<string, string> = Object.entries(parsedParams).reduce(
+          (acc, [key, value]) => {
+            if (typeof value === "string") acc[key] = value;
+            return acc;
+          },
+          {} as Record<string, string>,
+        );
+        const defaultHistory =
+          targetActivityRoute.defaultHistory?.(params) ?? [];
+
+        initialSetupProcess = new SerialNavigationProcess([
+          ...defaultHistory.map(
+            ({ activityName, activityParams, additionalSteps = [] }) =>
+              () => {
+                const events: (
+                  | Omit<PushedEvent, "eventDate">
+                  | Omit<StepPushedEvent, "eventDate">
+                )[] = [
+                  {
+                    name: "Pushed",
+                    id: id(),
+                    activityId: id(),
+                    activityName,
+                    activityParams: {
+                      ...activityParams,
+                    } as { [key: string]: string | undefined },
+                    activityContext: {
+                      path: currentPath,
+                      lazyActivityComponentRenderContext: {
+                        shouldRenderImmediately: true,
+                      },
+                    },
+                  },
+                  ...additionalSteps.map(
+                    ({
+                      stepParams,
+                      hasZIndex,
+                    }): Omit<StepPushedEvent, "eventDate"> => ({
+                      name: "StepPushed",
+                      id: id(),
+                      stepId: id(),
+                      stepParams,
+                      hasZIndex,
+                    }),
+                  ),
+                ];
+
+                for (const event of events) {
+                  if (event.name === "Pushed") {
+                    activityActivationMonitors.push(
+                      new DefaultHistoryActivityActivationMonitor(
+                        event.activityId,
+                        initialSetupProcess!,
+                      ),
+                    );
+                  }
+                }
+
+                return events;
+              },
+          ),
+          () => [
+            {
+              name: "Pushed",
+              id: id(),
+              activityId: id(),
+              activityName: targetActivityRoute.activityName,
+              activityParams: (
+                makeTemplate(
+                  targetActivityRoute,
+                  options.urlPatternOptions,
+                ).parse(currentPath) ??
+                urlSearchParamsToMap(pathToUrl(currentPath).searchParams)
+              ) as { [key: string]: string | undefined },
+              activityContext: {
+                path: currentPath,
+                lazyActivityComponentRenderContext: {
+                  shouldRenderImmediately: true,
+                },
+              },
+            },
+          ],
+        ]);
+
+        return initialSetupProcess
+          .captureNavigationOpportunity(null)
+          .map((event) => ({
+            ...event,
+            eventDate: Date.now() - MINUTE,
+          }));
+      },
+      onInit({ actions: { getStack, dispatchEvent, push, stepPush } }) {
+        const stack = getStack();
+        const rootActivity = stack.activities[0];
+
+        const match = activityRoutes.find(
+          (r) => r.activityName === rootActivity.name,
+        )!;
+        const template = makeTemplate(match, options.urlPatternOptions);
+
+        const lastStep = last(rootActivity.steps);
+
+        requestHistoryTick(() => {
+          silentFlag = true;
+          replaceState({
+            history,
+            pathname: template.fill(rootActivity.params),
+            state: {
+              activity: rootActivity,
+              step: lastStep,
+            },
+            useHash: options.useHash,
+          });
+        });
+
+        const onPopState: Listener = (e) => {
+          if (silentFlag) {
+            silentFlag = false;
+            return;
+          }
+
+          const state = parseState(e.location.state);
+
+          if (!state) {
+            return;
+          }
+
+          const targetActivity = state.activity;
+          const targetActivityId = state.activity.id;
+          const targetStep = state.step;
+
+          const { activities } = getStack();
+          const currentActivity = activities.find(
+            (activity) => activity.isActive,
+          );
+
+          if (!currentActivity) {
+            return;
+          }
+
+          const currentStep = last(currentActivity.steps);
+
+          const nextActivity = activities.find(
+            (activity) => activity.id === targetActivityId,
+          );
+          const nextStep = currentActivity.steps.find(
+            (step) => step.id === targetStep?.id,
+          );
+
+          const isBackward = () => currentActivity.id > targetActivityId;
+          const isForward = () => currentActivity.id < targetActivityId;
+          const isStep = () => currentActivity.id === targetActivityId;
+
+          const isStepBackward = () => {
+            if (!isStep()) {
+              return false;
+            }
+
+            if (!targetStep) {
+              return true;
+            }
+            if (currentStep && currentStep.id > targetStep.id) {
+              return true;
+            }
+
+            return false;
+          };
+          const isStepForward = () => {
+            if (!isStep()) {
+              return false;
+            }
+
+            if (!currentStep) {
+              return true;
+            }
+            if (targetStep && currentStep.id < targetStep.id) {
+              return true;
+            }
+
+            return false;
+          };
+
+          if (isBackward()) {
+            dispatchEvent("Popped", {});
+
+            if (!nextActivity) {
+              pushFlag += 1;
+              push({
+                ...targetActivity.enteredBy,
+              });
+
+              if (
+                targetStep?.enteredBy.name === "StepPushed" ||
+                targetStep?.enteredBy.name === "StepReplaced"
+              ) {
+                const { enteredBy } = targetStep;
+                pushFlag += 1;
+                stepPush({
+                  ...enteredBy,
+                });
+              }
+            }
+          }
+          if (isStepBackward()) {
+            if (
+              !nextStep &&
+              targetStep &&
+              (targetStep?.enteredBy.name === "StepPushed" ||
+                targetStep?.enteredBy.name === "StepReplaced")
+            ) {
+              const { enteredBy } = targetStep;
+
+              pushFlag += 1;
+              stepPush({
+                ...enteredBy,
+              });
+            }
+
+            dispatchEvent("StepPopped", {});
+          }
+
+          if (isForward()) {
+            pushFlag += 1;
+            push({
+              activityId: targetActivity.id,
+              activityName: targetActivity.name,
+              activityParams: targetActivity.params,
+            });
+          }
+          if (isStepForward()) {
+            if (!targetStep) {
+              return;
+            }
+
+            pushFlag += 1;
+            stepPush({
+              stepId: targetStep.id,
+              stepParams: targetStep.params,
+            });
+          }
+        };
+
+        history.listen(onPopState);
+
+        initialSetupProcess
+          ?.captureNavigationOpportunity(stack)
+          .forEach((event) =>
+            event.name === "Pushed" ? push(event) : stepPush(event),
+          );
+
+        runActivityActivationMonitors(stack);
+      },
+      onPushed({ effect: { activity } }) {
+        if (pushFlag) {
+          pushFlag -= 1;
+          return;
+        }
+
+        const match = activityRoutes.find(
+          (r) => r.activityName === activity.name,
+        )!;
+
+        const template = makeTemplate(match, options.urlPatternOptions);
+
+        requestHistoryTick(() => {
+          silentFlag = true;
+          pushState({
+            history,
+            pathname: template.fill(activity.params),
+            state: {
+              activity,
+            },
+            useHash: options.useHash,
+          });
+        });
+      },
+      onStepPushed({ effect: { activity, step } }) {
+        if (pushFlag) {
+          pushFlag -= 1;
+          return;
+        }
+
+        const match = activityRoutes.find(
+          (r) => r.activityName === activity.name,
+        )!;
+
+        const template = makeTemplate(match, options.urlPatternOptions);
+
+        requestHistoryTick(() => {
+          silentFlag = true;
+          pushState({
+            history,
+            pathname: template.fill(activity.params),
+            state: {
+              activity,
+              step,
+            },
+            useHash: options.useHash,
+          });
+        });
+      },
+      onReplaced({ effect: { activity } }) {
+        if (!activity.isActive) {
+          return;
+        }
+
+        const match = activityRoutes.find(
+          (r) => r.activityName === activity.name,
+        )!;
+
+        const template = makeTemplate(match, options.urlPatternOptions);
+
+        requestHistoryTick(() => {
+          silentFlag = true;
+          replaceState({
+            history,
+            pathname: template.fill(activity.params),
+            state: {
+              activity,
+            },
+            useHash: options.useHash,
+          });
+        });
+      },
+      onStepReplaced({ effect: { activity, step } }) {
+        if (!activity.isActive) {
+          return;
+        }
+
+        const match = activityRoutes.find(
+          (r) => r.activityName === activity.name,
+        )!;
+
+        const template = makeTemplate(match, options.urlPatternOptions);
+
+        requestHistoryTick(() => {
+          silentFlag = true;
+          replaceState({
+            history,
+            pathname: template.fill(activity.params),
+            state: {
+              activity,
+              step,
+            },
+            useHash: options.useHash,
+          });
+        });
+      },
+      onBeforePush({ actionParams, actions: { overrideActionParams } }) {
+        if (
+          !actionParams.activityContext ||
+          "path" in actionParams.activityContext === false
+        ) {
+          const match = activityRoutes.find(
+            (r) => r.activityName === actionParams.activityName,
+          )!;
+          const template = makeTemplate(match, options.urlPatternOptions);
+          const path = template.fill(actionParams.activityParams);
+
+          overrideActionParams({
+            ...actionParams,
+            activityContext: {
+              ...actionParams.activityContext,
+              path,
+            },
+          });
+        }
+      },
+      onBeforeReplace({
+        actionParams,
+        actions: { overrideActionParams, getStack },
+      }) {
+        if (
+          !actionParams.activityContext ||
+          "path" in actionParams.activityContext === false
+        ) {
+          const match = activityRoutes.find(
+            (r) => r.activityName === actionParams.activityName,
+          )!;
+          const template = makeTemplate(match, options.urlPatternOptions);
+          const path = template.fill(actionParams.activityParams);
+
+          overrideActionParams({
+            ...actionParams,
+            activityContext: {
+              ...actionParams.activityContext,
+              path,
+            },
+          });
+        }
+
+        const { activities } = getStack();
+        const enteredActivities = activities.filter(
+          (currentActivity) =>
+            currentActivity.transitionState === "enter-active" ||
+            currentActivity.transitionState === "enter-done",
+        );
+        const previousActivity =
+          enteredActivities.length > 0
+            ? enteredActivities[enteredActivities.length - 1]
+            : null;
+
+        if (previousActivity) {
+          for (let i = 0; i < previousActivity.steps.length - 1; i += 1) {
+            requestHistoryTick((resolve) => {
+              if (!parseState(history.location.state)) {
+                silentFlag = true;
+                history.back();
+              } else {
+                resolve();
+              }
+            });
+
+            requestHistoryTick(() => {
+              silentFlag = true;
+              history.back();
+            });
+          }
+        }
+      },
+      onBeforeStepPop({ actions: { getStack } }) {
+        const { activities } = getStack();
+        const currentActivity = activities.find(
+          (activity) => activity.isActive,
+        );
+
+        if ((currentActivity?.steps.length ?? 0) > 1) {
+          requestHistoryTick(() => {
+            silentFlag = true;
+            history.back();
+          });
+        }
+      },
+      onBeforePop({ actions: { getStack } }) {
+        const { activities } = getStack();
+        const currentActivity = activities.find(
+          (activity) => activity.isActive,
+        );
+
+        if (currentActivity) {
+          const { isRoot, steps } = currentActivity;
+
+          const popCount = isRoot ? 0 : steps.length;
+
+          for (let i = 0; i < popCount; i += 1) {
+            requestHistoryTick((resolve) => {
+              if (!parseState(history.location.state)) {
+                silentFlag = true;
+                history.back();
+              } else {
+                resolve();
+              }
+            });
+
+            requestHistoryTick(() => {
+              silentFlag = true;
+              history.back();
+            });
+          }
+        }
+      },
+      onChanged({ actions: { getStack, push, stepPush } }) {
+        const stack = getStack();
+
+        initialSetupProcess
+          ?.captureNavigationOpportunity(stack)
+          .forEach((event) =>
+            event.name === "Pushed" ? push(event) : stepPush(event),
+          );
+
+        runActivityActivationMonitors(stack);
+      },
+    };
+  };
+}
diff --git a/packages/plugin-navigation-sync/src/index.ts b/packages/plugin-navigation-sync/src/index.ts
new file mode 100644
index 00000000..21d5def6
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/index.ts
@@ -0,0 +1,9 @@
+import "urlpattern-polyfill";
+
+export { useHistoryTick } from "./HistoryQueueContext";
+export * from "./historySyncPlugin";
+export { makeTemplate } from "./makeTemplate";
+export type { UrlPatternOptions } from "./makeTemplate";
+export type { Route, RouteLike } from "./RouteLike";
+export { useRoutes } from "./RoutesContext";
+export { useIsActivatedActivity } from "./useIsActivatedActivity";
diff --git a/packages/plugin-navigation-sync/src/last.spec.ts b/packages/plugin-navigation-sync/src/last.spec.ts
new file mode 100644
index 00000000..a3228dd4
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/last.spec.ts
@@ -0,0 +1,9 @@
+import { last } from "./last";
+
+test("last - 아무것도 없는 경우 undefined를 반환합니다", () => {
+  expect(last([])).toEqual(undefined);
+});
+
+test("last - 마지막 element를 반환합니다", () => {
+  expect(last([1, 2, 3])).toEqual(3);
+});
diff --git a/packages/plugin-navigation-sync/src/last.ts b/packages/plugin-navigation-sync/src/last.ts
new file mode 100644
index 00000000..662a543a
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/last.ts
@@ -0,0 +1,3 @@
+export function last<T>(arr: T[]) {
+  return arr.length === 0 ? undefined : arr[arr.length - 1];
+}
diff --git a/packages/plugin-navigation-sync/src/makeHistoryTaskQueue.ts b/packages/plugin-navigation-sync/src/makeHistoryTaskQueue.ts
new file mode 100644
index 00000000..d14027e7
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/makeHistoryTaskQueue.ts
@@ -0,0 +1,30 @@
+import type { HistoryQueueContextValue } from "./HistoryQueueContext";
+import type { History } from "history";
+
+/**
+ * This function is required to avoid any race conditions caused by asynchronous history updates.
+ */
+export const makeHistoryTaskQueue = (history: History) => {
+  let previousTask = Promise.resolve();
+
+  const requestHistoryTick: HistoryQueueContextValue["requestHistoryTick"] = (
+    cb,
+  ) => {
+    previousTask = previousTask.then(
+      () =>
+        new Promise<void>((resolve) => {
+          const clean = history.listen(() => {
+            clean();
+            resolve();
+          });
+
+          cb(() => {
+            clean();
+            resolve();
+          });
+        }),
+    );
+  };
+
+  return { requestHistoryTick };
+};
diff --git a/packages/plugin-navigation-sync/src/makeTemplate.spec.ts b/packages/plugin-navigation-sync/src/makeTemplate.spec.ts
new file mode 100644
index 00000000..1c6c23cf
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/makeTemplate.spec.ts
@@ -0,0 +1,78 @@
+import { makeTemplate } from "./makeTemplate";
+
+test("makeTemplate - 패스 파라미터만 있을 때는 패스 파라미터로 붙입니다", () => {
+  const template = makeTemplate({ path: "/articles/:articleId" });
+
+  expect(
+    template.fill({
+      articleId: "1234",
+    }),
+  ).toEqual("/articles/1234/");
+});
+
+test("makeTemplate - 패스 파라미터에 추가 파라미터가 주어질 때는 쿼리 파라미터로 붙입니다", () => {
+  const template = makeTemplate({ path: "/articles/:articleId" });
+
+  expect(
+    template.fill({
+      articleId: "1234",
+      title: "hello",
+    }),
+  ).toEqual("/articles/1234/?title=hello");
+});
+
+test("makeTemplate - 추가 파라미터만 있을 때는 모두 쿼리 파라미터로 붙입니다", () => {
+  const template = makeTemplate({ path: "/home/" });
+
+  expect(
+    template.fill({
+      articleId: "1234",
+      title: "hello",
+    }),
+  ).toEqual("/home/?articleId=1234&title=hello");
+});
+
+test("makeTemplate - 패스가 같으면 빈 객체를 내려줍니다", () => {
+  const template = makeTemplate({ path: "/articles/" });
+
+  expect(template.parse("/articles/")).toStrictEqual({});
+});
+
+test("makeTemplate - 패스가 다르면 null을 내려줍니다", () => {
+  const template = makeTemplate({ path: "/articles/" });
+
+  expect(template.parse("/not-articles/")).toEqual(null);
+});
+
+test("makeTemplate - 패스 파라미터와 쿼리 파라미터를 적절하게 파싱합니다", () => {
+  const template = makeTemplate({ path: "/articles/:articleId" });
+
+  expect(template.parse("/articles/1234/?title=hello")).toStrictEqual({
+    articleId: "1234",
+    title: "hello",
+  });
+});
+
+test("makeTemplate - 패스 파라미터에 `undefined` 값이 포함된 경우 삭제합니다", () => {
+  const template = makeTemplate({ path: "/articles" });
+
+  expect(
+    template.fill({
+      articleId: "1234",
+      test: undefined,
+    }),
+  ).toEqual("/articles/?articleId=1234");
+});
+
+test("makeTemplate - parse with given decode function", () => {
+  const template = makeTemplate({
+    path: "/articles/:articleId",
+    decode: ({ articleId }) => ({
+      articleId: Number(articleId),
+    }),
+  });
+
+  expect(template.parse("/articles/1234")).toStrictEqual({
+    articleId: 1234,
+  });
+});
diff --git a/packages/plugin-navigation-sync/src/makeTemplate.ts b/packages/plugin-navigation-sync/src/makeTemplate.ts
new file mode 100644
index 00000000..e1464253
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/makeTemplate.ts
@@ -0,0 +1,147 @@
+import type { Route } from "./RouteLike";
+
+export function pathToUrl(path: string) {
+  return new URL(path, "file://");
+}
+
+export function urlSearchParamsToMap(urlSearchParams: URLSearchParams) {
+  const map: Record<string, string> = {};
+
+  urlSearchParams.forEach((value, key) => {
+    map[key] = value;
+  });
+
+  return map;
+}
+
+function appendTrailingSlashInPathname(pathname: string) {
+  if (pathname.endsWith("/")) {
+    return pathname;
+  }
+  return `${pathname}/`;
+}
+
+function prependQuestionMarkInSearchParams(searchParams: URLSearchParams) {
+  const searchParamsStr = searchParams.toString();
+
+  if (searchParamsStr.length > 0) {
+    return `?${searchParams}`;
+  }
+  return searchParams;
+}
+
+/**
+ * import { UrlPatternOptions } from "url-pattern"
+ */
+export interface UrlPatternOptions {
+  escapeChar?: string;
+  segmentNameStartChar?: string;
+  segmentValueCharset?: string;
+  segmentNameCharset?: string;
+  optionalSegmentStartChar?: string;
+  optionalSegmentEndChar?: string;
+  wildcardChar?: string;
+}
+
+export function makeTemplate<T>(
+  { path, decode }: Route<T>,
+  _urlPatternOptions?: UrlPatternOptions,
+) {
+  const onlyAsterisk = path === "*" || path === "/*";
+
+  const paramNames = onlyAsterisk
+    ? []
+    : Array.from(path.matchAll(/:([A-Za-z0-9_]+)/g)).map((m) => m[1]!).filter(Boolean);
+
+  const uniqueParamNames = Array.from(new Set(paramNames));
+
+  const variableCount = onlyAsterisk ? Number.POSITIVE_INFINITY : uniqueParamNames.length;
+
+  const patternPathname = onlyAsterisk ? "*" : appendTrailingSlashInPathname(path);
+  const urlPattern = onlyAsterisk
+    ? null
+    : new URLPattern({
+        pathname: patternPathname,
+      });
+
+  return {
+    fill(params: { [key: string]: string | undefined }) {
+      if (onlyAsterisk) {
+        const searchParams = new URLSearchParams(
+          Object.entries(params).reduce((acc, [key, value]) => {
+            if (!value) return acc;
+            return { ...acc, [key]: value };
+          }, {} as Record<string, string>),
+        );
+        return appendTrailingSlashInPathname("/") + prependQuestionMarkInSearchParams(searchParams);
+      }
+
+      let pathname = path;
+      for (const name of uniqueParamNames) {
+        const value = params[name];
+        if (value === undefined) {
+          throw new Error(`Missing route param: ${name}`);
+        }
+        pathname = pathname.replace(`:${name}`, encodeURIComponent(value));
+      }
+      pathname = appendTrailingSlashInPathname(pathname);
+
+      const searchParamsMap = { ...params };
+
+      uniqueParamNames.forEach((key) => {
+        delete searchParamsMap[key];
+      });
+
+      const searchParams = new URLSearchParams(
+        Object.entries(searchParamsMap).reduce(
+          (acc, [key, value]) => ({
+            ...acc,
+            ...(value
+              ? {
+                  [key]: value,
+                }
+              : null),
+          }),
+          {} as Record<string, string>,
+        ),
+      );
+
+      return (
+        pathname + prependQuestionMarkInSearchParams(searchParams)
+      );
+    },
+    parse(path: string): T | null {
+      const url = pathToUrl(path);
+      if (onlyAsterisk) {
+        const searchParams = urlSearchParamsToMap(url.searchParams);
+        const params = {
+          ...searchParams,
+        };
+        return (decode ? decode(params) : params) as T;
+      }
+
+      if (!urlPattern) return null;
+
+      const pathname = appendTrailingSlashInPathname(url.pathname);
+      const match = urlPattern.exec({ pathname });
+      const searchParams = urlSearchParamsToMap(url.searchParams);
+
+      if (!match) {
+        return null;
+      }
+
+      const pathParams = match.pathname.groups as Record<string, string | undefined>;
+
+      // Filter out undefined values for decode compatibility
+      const params: Record<string, string> = { ...searchParams };
+      for (const [key, value] of Object.entries(pathParams)) {
+        if (value !== undefined) {
+          params[key] = value;
+        }
+      }
+
+      return (decode ? decode(params) : params) as T;
+    },
+    variableCount,
+  };
+}
diff --git a/packages/plugin-navigation-sync/src/normalizeActivityRouteMap.spec.ts b/packages/plugin-navigation-sync/src/normalizeActivityRouteMap.spec.ts
new file mode 100644
index 00000000..62ec9d0c
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/normalizeActivityRouteMap.spec.ts
@@ -0,0 +1,23 @@
+import { normalizeActivityRouteMap } from "./normalizeActivityRouteMap";
+
+test("normalizeActivityRouteMap", () => {
+  expect(
+    normalizeActivityRouteMap({
+      Hello: ["/hello", "/hello-2"],
+      World: "/world",
+    }),
+  ).toStrictEqual([
+    {
+      activityName: "Hello",
+      path: "/hello",
+    },
+    {
+      activityName: "Hello",
+      path: "/hello-2",
+    },
+    {
+      activityName: "World",
+      path: "/world",
+    },
+  ]);
+});
diff --git a/packages/plugin-navigation-sync/src/normalizeActivityRouteMap.ts b/packages/plugin-navigation-sync/src/normalizeActivityRouteMap.ts
new file mode 100644
index 00000000..0a7f7588
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/normalizeActivityRouteMap.ts
@@ -0,0 +1,23 @@
+import type { ActivityRoute } from "./ActivityRoute";
+import type { ActivityRouteMapInput } from "./ActivityRouteMapInput";
+import { normalizeRouteInput } from "./normalizeRouteInput";
+
+export function normalizeActivityRouteMap<
+  K,
+  T extends ActivityRouteMapInput<K>,
+>(activityRouteMap: T): ActivityRoute<K>[] {
+  const routes = Object.keys(activityRouteMap).flatMap((activityName) => {
+    const routeInput = activityRouteMap[activityName];
+
+    if (!routeInput) {
+      return [];
+    }
+
+    return normalizeRouteInput(routeInput).map((route) => ({
+      activityName,
+      ...route,
+    }));
+  });
+
+  return routes;
+}
diff --git a/packages/plugin-navigation-sync/src/normalizeRouteInput.spec.ts b/packages/plugin-navigation-sync/src/normalizeRouteInput.spec.ts
new file mode 100644
index 00000000..95244381
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/normalizeRouteInput.spec.ts
@@ -0,0 +1,25 @@
+import { normalizeRouteInput } from "./normalizeRouteInput";
+
+test("normalizeRoute - string이 들어오면 [Route]으로 만듭니다", () => {
+  expect(normalizeRouteInput("/home")).toEqual([
+    {
+      path: "/home",
+    },
+  ]);
+});
+
+test("normalizeRoute - string[]이 들어오면 Route[]인채로 반환합니다", () => {
+  expect(normalizeRouteInput(["/home"])).toEqual([
+    {
+      path: "/home",
+    },
+  ]);
+});
+
+test("normalizeRoute - Route가 들어오면 Route[]로 만듭니다", () => {
+  expect(normalizeRouteInput({ path: "/home" })).toEqual([{ path: "/home" }]);
+});
+
+test("normalizeRoute - Route[]가 들어오면 Route[]인채로 반환합니다", () => {
+  expect(normalizeRouteInput([{ path: "/home" }])).toEqual([{ path: "/home" }]);
+});
diff --git a/packages/plugin-navigation-sync/src/normalizeRouteInput.ts b/packages/plugin-navigation-sync/src/normalizeRouteInput.ts
new file mode 100644
index 00000000..99f943b4
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/normalizeRouteInput.ts
@@ -0,0 +1,9 @@
+import type { Route, RouteLike } from "./RouteLike";
+
+function makeRoute<T>(path: string | Route<T>): Route<T> {
+  return typeof path === "string" ? { path } : path;
+}
+
+export function normalizeRouteInput<T>(route: RouteLike<T>): Route<T>[] {
+  return (Array.isArray(route) ? route : [route]).map(makeRoute);
+}
diff --git a/packages/plugin-navigation-sync/src/sortActivityRoutes.spec.ts b/packages/plugin-navigation-sync/src/sortActivityRoutes.spec.ts
new file mode 100644
index 00000000..a422ebb0
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/sortActivityRoutes.spec.ts
@@ -0,0 +1,43 @@
+import { sortActivityRoutes } from "./sortActivityRoutes";
+
+test("sortActivityRoutes - 우선순위가 높은 라우트가 먼저 놓여집니다", () => {
+  const routes = sortActivityRoutes([
+    { activityName: "B", path: "/hello/:param" },
+    { activityName: "A", path: "/hello/world" },
+  ]);
+
+  expect(routes).toStrictEqual([
+    { activityName: "A", path: "/hello/world" },
+    { activityName: "B", path: "/hello/:param" },
+  ]);
+});
+
+test("sortActivityRoutes - 한 액티비티가 여러 라우트를 가지는 경우, 여러번 route에 등록됩니다", () => {
+  const routes = sortActivityRoutes([
+    { activityName: "B", path: "/hello/:param" },
+    { activityName: "B", path: "/hello/second" },
+    { activityName: "A", path: "/hello/world" },
+  ]);
+
+  expect(routes).toStrictEqual([
+    { activityName: "B", path: "/hello/second" },
+    { activityName: "A", path: "/hello/world" },
+    { activityName: "B", path: "/hello/:param" },
+  ]);
+});
+
+test("sortActivityRoutes - *이 들어간 경우 해당 라우트를 맨 뒤로 옮깁니다", () => {
+  const routes = sortActivityRoutes([
+    { activityName: "A", path: "*" },
+    { activityName: "A", path: "/detailed/*" },
+    { activityName: "B", path: "/:hello/:world" },
+    { activityName: "C", path: "/:hello/:world/:foo/:bar" },
+  ]);
+
+  expect(routes).toStrictEqual([
+    { activityName: "C", path: "/:hello/:world/:foo/:bar" },
+    { activityName: "A", path: "/detailed/*" },
+    { activityName: "B", path: "/:hello/:world" },
+    { activityName: "A", path: "*" },
+  ]);
+});
diff --git a/packages/plugin-navigation-sync/src/sortActivityRoutes.ts b/packages/plugin-navigation-sync/src/sortActivityRoutes.ts
new file mode 100644
index 00000000..8831120d
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/sortActivityRoutes.ts
@@ -0,0 +1,40 @@
+import type { ActivityRoute } from "./ActivityRoute";
+
+const paramRe = /^:[\w-]+$/;
+const dynamicSegmentValue = 3;
+const emptySegmentValue = 1;
+const staticSegmentValue = 10;
+const splatPenalty = -2;
+const isSplat = (s: string) => s === "*";
+
+/**
+ * https://github.com/remix-run/react-router/blob/0f2b167e9b862d5e6b3425438787c8e7b39197f4/packages/router/utils.ts#L742-L773
+ */
+function computeScore(path: string): number {
+  const segments = path.split("/");
+  let initialScore = segments.length;
+  if (segments.some(isSplat)) {
+    initialScore += splatPenalty;
+  }
+
+  return segments
+    .filter((s) => !isSplat(s))
+    .reduce(
+      (score, segment) =>
+        score +
+        (paramRe.test(segment)
+          ? dynamicSegmentValue
+          : segment === ""
+            ? emptySegmentValue
+            : staticSegmentValue),
+      initialScore,
+    );
+}
+
+export function sortActivityRoutes<T>(
+  routes: ActivityRoute<T>[],
+): ActivityRoute<T>[] {
+  return [...routes].sort(
+    (a, b) => computeScore(b.path) - computeScore(a.path),
+  );
+}
diff --git a/packages/plugin-navigation-sync/src/useIsActivatedActivity.ts b/packages/plugin-navigation-sync/src/useIsActivatedActivity.ts
new file mode 100644
index 00000000..081cb781
--- /dev/null
+++ b/packages/plugin-navigation-sync/src/useIsActivatedActivity.ts
@@ -0,0 +1,13 @@
+import { useActivity } from "@stackflow/react";
+import { useContext } from "react";
+import { ActivityActivationCountsContext } from "./ActivityActivationCountsContext";
+
+export function useIsActivatedActivity() {
+  const { id } = useActivity();
+  const activityActivationCounts = useContext(ActivityActivationCountsContext);
+  const activityActivationCount = activityActivationCounts.find(
+    (activityActivationCount) => activityActivationCount.activityId === id,
+  )?.activationCount;
+
+  return activityActivationCount === undefined || activityActivationCount > 0;
+}
diff --git a/packages/plugin-navigation-sync/tsconfig.json b/packages/plugin-navigation-sync/tsconfig.json
new file mode 100644
index 00000000..05b2371c
--- /dev/null
+++ b/packages/plugin-navigation-sync/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023", "DOM"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.spec.ts", "src/**/__tests__/**"]
+}
+
diff --git a/packages/theme-tools/package.json b/packages/theme-tools/package.json
new file mode 100644
index 00000000..5d0777f7
--- /dev/null
+++ b/packages/theme-tools/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@biochain/theme-tools",
+  "version": "0.1.0",
+  "description": "主题检查工具 - 验证暗色模式最佳实践",
+  "type": "module",
+  "bin": {
+    "theme-tools": "./src/cli.ts"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "echo 'Package has no tests'",
+    "test:run": "echo 'Package has no tests'",
+    "test:storybook": "echo 'Package has no storybook'",
+    "i18n:run": "echo 'Package has no i18n'",
+    "theme:run": "echo 'Package is theme-tools itself'"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.0"
+  }
+}
diff --git a/packages/theme-tools/src/checker.ts b/packages/theme-tools/src/checker.ts
new file mode 100644
index 00000000..eb0c02cb
--- /dev/null
+++ b/packages/theme-tools/src/checker.ts
@@ -0,0 +1,74 @@
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import type { CheckOptions, CheckResult, Issue } from './types'
+import { allRules } from './rules'
+
+const DEFAULT_SKIP_PATTERNS = [
+  '/node_modules/',
+  '/.git/',
+  '/dist/',
+  '/coverage/',
+  '/__tests__/',
+  '.stories.',
+  '.test.',
+]
+
+function shouldSkipFile(filePath: string, patterns: string[]): boolean {
+  return patterns.some(pattern => filePath.includes(pattern))
+}
+
+function getAllFiles(dir: string, patterns: string[], files: string[] = []): string[] {
+  let entries: string[]
+  try {
+    entries = readdirSync(dir)
+  } catch {
+    return files
+  }
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry)
+    if (shouldSkipFile(fullPath, patterns)) continue
+
+    let stat
+    try {
+      stat = statSync(fullPath)
+    } catch {
+      continue
+    }
+    
+    if (stat.isDirectory()) {
+      getAllFiles(fullPath, patterns, files)
+    } else if (entry.endsWith('.tsx') || entry.endsWith('.jsx')) {
+      files.push(fullPath)
+    }
+  }
+
+  return files
+}
+
+export function checkTheme(options: CheckOptions): CheckResult {
+  const { root, srcDir = 'src', skipPatterns = DEFAULT_SKIP_PATTERNS } = options
+  const srcPath = join(root, srcDir)
+  
+  const files = getAllFiles(srcPath, skipPatterns)
+  const allIssues: Issue[] = []
+
+  for (const file of files) {
+    const content = readFileSync(file, 'utf-8')
+    const relPath = relative(root, file)
+
+    for (const rule of allRules) {
+      allIssues.push(...rule(content, relPath))
+    }
+  }
+
+  const errors = allIssues.filter(i => i.severity === 'error')
+  const warnings = allIssues.filter(i => i.severity === 'warning')
+
+  return {
+    success: errors.length === 0,
+    errors,
+    warnings,
+    filesChecked: files.length,
+  }
+}
diff --git a/packages/theme-tools/src/cli.ts b/packages/theme-tools/src/cli.ts
new file mode 100755
index 00000000..9770b5c8
--- /dev/null
+++ b/packages/theme-tools/src/cli.ts
@@ -0,0 +1,96 @@
+#!/usr/bin/env bun
+/**
+ * Theme Tools CLI
+ * 
+ * Usage:
+ *   bunx @biochain/theme-tools           # Check current directory
+ *   bunx @biochain/theme-tools --verbose # Show all checked files
+ */
+
+import { checkTheme } from './checker'
+import type { Issue } from './types'
+
+const colors = {
+  reset: '\x1b[0m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  cyan: '\x1b[36m',
+  dim: '\x1b[2m',
+  bold: '\x1b[1m',
+}
+
+const log = {
+  info: (msg: string) => console.log(`${colors.cyan}ℹ${colors.reset} ${msg}`),
+  success: (msg: string) => console.log(`${colors.green}✓${colors.reset} ${msg}`),
+  warn: (msg: string) => console.log(`${colors.yellow}⚠${colors.reset} ${msg}`),
+  error: (msg: string) => console.log(`${colors.red}✗${colors.reset} ${msg}`),
+  dim: (msg: string) => console.log(`${colors.dim}  ${msg}${colors.reset}`),
+}
+
+function parseArgs(args: string[]) {
+  return {
+    root: process.cwd(),
+    verbose: args.includes('--verbose'),
+  }
+}
+
+function groupByFile(issues: Issue[]): Map<string, Issue[]> {
+  const byFile = new Map<string, Issue[]>()
+  for (const issue of issues) {
+    if (!byFile.has(issue.file)) {
+      byFile.set(issue.file, [])
+    }
+    byFile.get(issue.file)!.push(issue)
+  }
+  return byFile
+}
+
+function main() {
+  const args = process.argv.slice(2)
+  const options = parseArgs(args)
+
+  console.log(`
+${colors.cyan}╔════════════════════════════════════════╗
+║     Theme (Dark Mode) Check            ║
+╚════════════════════════════════════════╝${colors.reset}
+`)
+
+  const result = checkTheme(options)
+
+  log.info(`Checked ${result.filesChecked} files`)
+
+  if (result.errors.length === 0 && result.warnings.length === 0) {
+    log.success('No theme issues found!')
+    console.log(`\n${colors.green}✓ All files follow dark mode best practices${colors.reset}\n`)
+    process.exit(0)
+  }
+
+  const allIssues = [...result.errors, ...result.warnings]
+  const byFile = groupByFile(allIssues)
+
+  for (const [file, issues] of byFile) {
+    console.log(`\n${colors.bold}${file}${colors.reset}`)
+    for (const issue of issues) {
+      const icon = issue.severity === 'error' ? colors.red + '✗' : colors.yellow + '⚠'
+      console.log(`  ${icon}${colors.reset} Line ${issue.line}: ${issue.message}`)
+      if (issue.suggestion) {
+        log.dim(`    → ${issue.suggestion}`)
+      }
+    }
+  }
+
+  console.log(`
+${colors.bold}Summary:${colors.reset}
+  ${colors.red}Errors: ${result.errors.length}${colors.reset}
+  ${colors.yellow}Warnings: ${result.warnings.length}${colors.reset}
+`)
+
+  if (!result.success) {
+    process.exit(1)
+  }
+
+  log.success('No blocking errors (warnings can be addressed later)')
+}
+
+main()
diff --git a/packages/theme-tools/src/index.ts b/packages/theme-tools/src/index.ts
new file mode 100644
index 00000000..13838fab
--- /dev/null
+++ b/packages/theme-tools/src/index.ts
@@ -0,0 +1,2 @@
+export { checkTheme } from './checker'
+export type { CheckOptions, CheckResult, Issue } from './types'
diff --git a/packages/theme-tools/src/rules/index.ts b/packages/theme-tools/src/rules/index.ts
new file mode 100644
index 00000000..5bfe62d7
--- /dev/null
+++ b/packages/theme-tools/src/rules/index.ts
@@ -0,0 +1,183 @@
+import type { Issue } from '../types'
+
+const BG_ONLY_TOKENS = ['secondary', 'accent', 'muted', 'card', 'popover', 'sidebar']
+const FOREGROUND_TOKENS = ['primary', 'secondary', 'destructive', 'accent', 'card', 'popover']
+const SEMANTIC_BGS = ['primary', 'destructive', 'secondary']
+
+const ACCEPTABLE_CONTEXTS = [
+  'bg-black',
+  'bg-white/20',
+  'bg-white/10',
+  'bg-white/30',
+  'text-white/80',
+  'text-white/50',
+  'bg-gradient-',
+]
+
+const ALLOWS_TEXT_WHITE = [
+  'bg-gradient-',
+  'bg-green-',
+  'bg-red-',
+  'bg-blue-',
+  'bg-orange-',
+  'bg-black',
+]
+
+function invertShade(shade: string): string {
+  const shadeMap: Record<string, string> = {
+    '50': '900', '100': '800', '200': '700', '300': '600', '400': '500',
+    '500': '400', '600': '300', '700': '200', '800': '100', '900': '50',
+  }
+  return shadeMap[shade] || '800'
+}
+
+export function checkBackgroundAsText(content: string, file: string): Issue[] {
+  const issues: Issue[] = []
+  const lines = content.split('\n')
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    for (const token of BG_ONLY_TOKENS) {
+      const regex = new RegExp(`text-${token}(?!-foreground)\\b`, 'g')
+      let match: RegExpExecArray | null
+      while ((match = regex.exec(line)) !== null) {
+        issues.push({
+          file, line: i + 1, column: match.index + 1,
+          rule: 'no-bg-as-text',
+          message: `'text-${token}' uses a background color as text color`,
+          severity: 'error',
+          suggestion: token === 'secondary' || token === 'muted'
+            ? `Use 'text-muted-foreground' for secondary text`
+            : `Use 'text-${token}-foreground' with 'bg-${token}'`,
+        })
+      }
+    }
+  }
+  return issues
+}
+
+export function checkOrphanForeground(content: string, file: string): Issue[] {
+  const issues: Issue[] = []
+  const lines = content.split('\n')
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    for (const token of FOREGROUND_TOKENS) {
+      const fgMatch = line.match(new RegExp(`text-${token}-foreground`))
+      if (!fgMatch) continue
+      if (new RegExp(`(peer-|group-|data-)\\S*text-${token}-foreground`).test(line)) continue
+
+      const context = lines.slice(Math.max(0, i - 5), Math.min(lines.length, i + 6)).join(' ')
+      const hasBgToken = new RegExp(`bg-${token}|peer-\\S*:bg-${token}|data-\\S*:bg-${token}`).test(context)
+      
+      if (!hasBgToken) {
+        issues.push({
+          file, line: i + 1, column: fgMatch.index! + 1,
+          rule: 'orphan-foreground',
+          message: `'text-${token}-foreground' without visible 'bg-${token}'`,
+          severity: 'warning',
+          suggestion: `Ensure 'bg-${token}' is set on this element or a parent`,
+        })
+      }
+    }
+  }
+  return issues
+}
+
+export function checkMissingDarkVariant(content: string, file: string): Issue[] {
+  const issues: Issue[] = []
+  const lines = content.split('\n')
+
+  const patterns = [
+    { pattern: /\bbg-gray-(\d+)\b/g, type: 'bg' },
+    { pattern: /\bbg-slate-(\d+)\b/g, type: 'bg' },
+    { pattern: /\btext-gray-(\d+)\b/g, type: 'text' },
+    { pattern: /\bborder-gray-(\d+)\b/g, type: 'border' },
+  ]
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    for (const { pattern, type } of patterns) {
+      const patternCopy = new RegExp(pattern.source, pattern.flags)
+      let match: RegExpExecArray | null
+      while ((match = patternCopy.exec(line)) !== null) {
+        if (ACCEPTABLE_CONTEXTS.some(ctx => line.includes(ctx))) continue
+
+        const context = lines.slice(Math.max(0, i - 1), Math.min(lines.length, i + 2)).join(' ')
+        const darkPattern = new RegExp(`dark:${type}-(?:gray|slate|zinc)-\\d+`)
+
+        if (!darkPattern.test(context)) {
+          issues.push({
+            file, line: i + 1, column: match.index + 1,
+            rule: 'missing-dark-variant',
+            message: `'${match[0]}' should have a dark: variant`,
+            severity: 'warning',
+            suggestion: `Add 'dark:${type}-gray-${invertShade(match[1])}' or use semantic colors`,
+          })
+        }
+      }
+    }
+  }
+  return issues
+}
+
+export function checkTextWhiteOnSemanticBg(content: string, file: string): Issue[] {
+  const issues: Issue[] = []
+  const lines = content.split('\n')
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (!line.includes('text-white')) continue
+    if (ALLOWS_TEXT_WHITE.some(bg => line.includes(bg))) continue
+
+    const context = lines.slice(Math.max(0, i - 2), Math.min(lines.length, i + 3)).join(' ')
+    for (const bg of SEMANTIC_BGS) {
+      if (context.includes(`bg-${bg}`) && !context.includes(`text-${bg}-foreground`)) {
+        issues.push({
+          file, line: i + 1, column: line.indexOf('text-white') + 1,
+          rule: 'text-white-on-semantic-bg',
+          message: `'text-white' with 'bg-${bg}' - use 'text-${bg}-foreground' instead`,
+          severity: 'error',
+          suggestion: `Replace 'text-white' with 'text-${bg}-foreground'`,
+        })
+        break
+      }
+    }
+  }
+  return issues
+}
+
+export function checkBgMutedWithoutText(content: string, file: string): Issue[] {
+  const issues: Issue[] = []
+  const lines = content.split('\n')
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const bgMutedMatch = line.match(/\bbg-muted\b(?!\/)/)
+    if (!bgMutedMatch) continue
+    if (/hover:bg-muted|focus:bg-muted|active:bg-muted/.test(line) && !/\sbg-muted\b/.test(line)) continue
+
+    const context = lines.slice(Math.max(0, i - 1), Math.min(lines.length, i + 4)).join(' ')
+    const hasTextColor = /\btext-(?:muted-foreground|foreground|primary|destructive|green-|red-|blue-|gray-|white)/.test(context)
+    const isDecorative = /(?:size-|w-|h-)\d+.*(?:rounded|aspect)/.test(context)
+    
+    if (hasTextColor || isDecorative) continue
+
+    issues.push({
+      file, line: i + 1, column: bgMutedMatch.index! + 1,
+      rule: 'bg-muted-no-text-color',
+      message: `'bg-muted' without explicit text color`,
+      severity: 'warning',
+      suggestion: `Add 'text-muted-foreground' or 'text-foreground'`,
+    })
+  }
+  return issues
+}
+
+export const allRules = [
+  checkBackgroundAsText,
+  checkOrphanForeground,
+  checkMissingDarkVariant,
+  checkTextWhiteOnSemanticBg,
+  checkBgMutedWithoutText,
+]
diff --git a/packages/theme-tools/src/types.ts b/packages/theme-tools/src/types.ts
new file mode 100644
index 00000000..6e8aa9c2
--- /dev/null
+++ b/packages/theme-tools/src/types.ts
@@ -0,0 +1,23 @@
+export interface Issue {
+  file: string
+  line: number
+  column: number
+  rule: string
+  message: string
+  severity: 'error' | 'warning'
+  suggestion?: string
+}
+
+export interface CheckOptions {
+  root: string
+  srcDir?: string
+  verbose?: boolean
+  skipPatterns?: string[]
+}
+
+export interface CheckResult {
+  success: boolean
+  errors: Issue[]
+  warnings: Issue[]
+  filesChecked: number
+}
diff --git a/packages/theme-tools/tsconfig.json b/packages/theme-tools/tsconfig.json
new file mode 100644
index 00000000..87281035
--- /dev/null
+++ b/packages/theme-tools/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/playwright.config.ts b/playwright.config.ts
index 4a09fb23..76532133 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -9,10 +9,17 @@
  * - pnpm e2e              # 运行 dev 环境测试
  * - pnpm e2e:mock         # 运行 mock 环境测试
  * - pnpm e2e:real         # 运行真实转账测试（需要资金账户）
+ * 
+ * 端口规则: 默认端口 + 6000 避免冲突
+ * - e2e: 11173 (dev)
+ * - e2e:mock: 11174 (mock)
  */
 
 import { defineConfig, devices } from '@playwright/test'
 
+// 使用 11173 端口避免与 vite 默认端口冲突
+const DEV_PORT = 11173
+
 // 绕过本地代理
 process.env.NO_PROXY = 'localhost,127.0.0.1,::1'
 process.env.no_proxy = 'localhost,127.0.0.1,::1'
@@ -45,7 +52,8 @@ export default defineConfig({
   ],
   
   use: {
-    baseURL: 'http://localhost:5173',
+    baseURL: `https://localhost:${DEV_PORT}`,
+    ignoreHTTPSErrors: true,
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
   },
@@ -78,10 +86,11 @@ export default defineConfig({
     },
   ],
 
-  // 使用标准 dev 服务器（端口 5173）
+  // 使用标准 dev 服务器（端口 11173，避免与 vite 默认 517x 冲突）
   webServer: {
-    command: 'pnpm dev',
-    url: 'http://localhost:5173',
+    command: `pnpm dev --port ${DEV_PORT}`,
+    url: `https://localhost:${DEV_PORT}`,
+    ignoreHTTPSErrors: true,
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,
   },
diff --git a/playwright.mock.config.ts b/playwright.mock.config.ts
index 672eaa96..1d8a613e 100644
--- a/playwright.mock.config.ts
+++ b/playwright.mock.config.ts
@@ -4,11 +4,18 @@
  * 用于需要预设数据的测试（如交易历史、余额显示等）
  * 
  * 运行命令: pnpm e2e:mock
+ * 
+ * 端口规则: 默认端口 + 6000 避免冲突
+ * - dev: 5173 → mock: 11173
+ * - dev:mock: 5174 → e2e:mock: 11174
  */
 
 import { defineConfig } from '@playwright/test'
 import baseConfig from './playwright.config'
 
+// 使用 11174 端口避免与 vite 默认端口冲突
+const MOCK_PORT = 11174
+
 export default defineConfig({
   ...baseConfig,
   
@@ -18,13 +25,15 @@ export default defineConfig({
   
   use: {
     ...baseConfig.use,
-    baseURL: 'http://localhost:5174',
+    baseURL: `https://localhost:${MOCK_PORT}`,
+    ignoreHTTPSErrors: true,
   },
 
-  // 使用 Mock 服务（端口 5174）
+  // 使用 Mock 服务（端口 11174，避免与 vite 默认 517x 冲突）
   webServer: {
-    command: 'pnpm dev:mock',
-    url: 'http://localhost:5174',
+    command: `pnpm dev:mock --port ${MOCK_PORT}`,
+    url: `https://localhost:${MOCK_PORT}`,
+    ignoreHTTPSErrors: true,
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54e8b312..03aebd1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@bfmeta/sign-util':
         specifier: ^1.3.10
         version: 1.3.10
+      '@biochain/plugin-navigation-sync':
+        specifier: workspace:*
+        version: link:packages/plugin-navigation-sync
       '@bnqkl/server-util':
         specifier: ^1.3.4
         version: 1.3.4(reflect-metadata@0.2.2)
@@ -59,6 +62,9 @@ importers:
       '@plaoc/plugins':
         specifier: ^1.1.9
         version: 1.1.9(typescript@5.9.3)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -161,6 +167,9 @@ importers:
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       viem:
         specifier: ^2.43.3
         version: 2.43.3(typescript@5.9.3)(zod@4.2.1)
@@ -174,6 +183,9 @@ importers:
       '@axe-core/playwright':
         specifier: ^4.11.0
         version: 4.11.0(playwright-core@1.57.0)
+      '@biochain/e2e-tools':
+        specifier: workspace:*
+        version: link:packages/e2e-tools
       '@inquirer/prompts':
         specifier: ^8.0.2
         version: 8.1.0(@types/node@24.10.4)
@@ -246,6 +258,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: ^4.0.15
         version: 4.0.16(@vitest/browser@4.0.16(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))(vitest@4.0.16))(vitest@4.0.16)
+      detect-port:
+        specifier: ^2.1.0
+        version: 2.1.0
       dotenv:
         specifier: ^17.2.3
         version: 17.2.3
@@ -310,6 +325,302 @@ importers:
         specifier: ^4.0.15
         version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@27.3.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
 
+  miniapps/forge:
+    dependencies:
+      '@base-ui/react':
+        specifier: ^1.0.0
+        version: 1.0.0(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@biochain/bio-sdk':
+        specifier: workspace:*
+        version: link:../../packages/bio-sdk
+      '@biochain/keyapp-sdk':
+        specifier: workspace:*
+        version: link:../../packages/keyapp-sdk
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      framer-motion:
+        specifier: ^12.23.26
+        version: 12.23.26(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      i18next:
+        specifier: ^25.2.1
+        version: 25.7.3(typescript@5.9.3)
+      lucide-react:
+        specifier: ^0.562.0
+        version: 0.562.0(react@19.2.3)
+      react:
+        specifier: ^19.0.0
+        version: 19.2.3
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.2.3(react@19.2.3)
+      react-i18next:
+        specifier: ^15.5.2
+        version: 15.7.4(i18next@25.7.3(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
+    devDependencies:
+      '@biochain/e2e-tools':
+        specifier: workspace:*
+        version: link:../../packages/e2e-tools
+      '@biochain/i18n-tools':
+        specifier: workspace:*
+        version: link:../../packages/i18n-tools
+      '@biochain/theme-tools':
+        specifier: workspace:*
+        version: link:../../packages/theme-tools
+      '@playwright/test':
+        specifier: ^1.49.1
+        version: 1.57.0
+      '@tailwindcss/vite':
+        specifier: ^4.1.0
+        version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      '@testing-library/jest-dom':
+        specifier: ^6.6.3
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.0.0
+        version: 16.3.1(@testing-library/dom@10.4.0)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@types/react':
+        specifier: ^19.0.0
+        version: 19.2.7
+      '@types/react-dom':
+        specifier: ^19.0.0
+        version: 19.2.3(@types/react@19.2.7)
+      '@vitejs/plugin-react':
+        specifier: ^5.0.0
+        version: 5.1.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      eslint-plugin-i18next:
+        specifier: ^6.1.3
+        version: 6.1.3
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      oxlint:
+        specifier: ^1.32.0
+        version: 1.35.0
+      tailwindcss:
+        specifier: ^4.1.0
+        version: 4.1.18
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.0
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite-plugin-mkcert:
+        specifier: ^1.17.9
+        version: 1.17.9(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      vite-tsconfig-paths:
+        specifier: ^5.1.0
+        version: 5.1.4(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
+  miniapps/teleport:
+    dependencies:
+      '@base-ui/react':
+        specifier: ^1.0.0
+        version: 1.0.0(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@biochain/bio-sdk':
+        specifier: workspace:*
+        version: link:../../packages/bio-sdk
+      '@biochain/keyapp-sdk':
+        specifier: workspace:*
+        version: link:../../packages/keyapp-sdk
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      framer-motion:
+        specifier: ^12.23.26
+        version: 12.23.26(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      i18next:
+        specifier: ^25.2.1
+        version: 25.7.3(typescript@5.9.3)
+      lucide-react:
+        specifier: ^0.562.0
+        version: 0.562.0(react@19.2.3)
+      react:
+        specifier: ^19.0.0
+        version: 19.2.3
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.2.3(react@19.2.3)
+      react-i18next:
+        specifier: ^15.5.2
+        version: 15.7.4(i18next@25.7.3(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
+    devDependencies:
+      '@biochain/e2e-tools':
+        specifier: workspace:*
+        version: link:../../packages/e2e-tools
+      '@biochain/i18n-tools':
+        specifier: workspace:*
+        version: link:../../packages/i18n-tools
+      '@biochain/theme-tools':
+        specifier: workspace:*
+        version: link:../../packages/theme-tools
+      '@playwright/test':
+        specifier: ^1.49.1
+        version: 1.57.0
+      '@tailwindcss/vite':
+        specifier: ^4.1.0
+        version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      '@testing-library/jest-dom':
+        specifier: ^6.6.3
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.0.0
+        version: 16.3.1(@testing-library/dom@10.4.0)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@types/react':
+        specifier: ^19.0.0
+        version: 19.2.7
+      '@types/react-dom':
+        specifier: ^19.0.0
+        version: 19.2.3(@types/react@19.2.7)
+      '@vitejs/plugin-react':
+        specifier: ^5.0.0
+        version: 5.1.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      eslint-plugin-i18next:
+        specifier: ^6.1.3
+        version: 6.1.3
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      oxlint:
+        specifier: ^1.32.0
+        version: 1.35.0
+      tailwindcss:
+        specifier: ^4.1.0
+        version: 4.1.18
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.0
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite-plugin-mkcert:
+        specifier: ^1.17.9
+        version: 1.17.9(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      vite-tsconfig-paths:
+        specifier: ^5.1.0
+        version: 5.1.4(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
+  packages/bio-sdk:
+    devDependencies:
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.0
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite-plugin-dts:
+        specifier: ^4.5.4
+        version: 4.5.4(@types/node@24.10.4)(rollup@4.54.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
+  packages/e2e-tools:
+    devDependencies:
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@27.3.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
+  packages/i18n-tools:
+    devDependencies:
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@27.3.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
+  packages/keyapp-sdk:
+    devDependencies:
+      react:
+        specifier: ^19.0.0
+        version: 19.2.3
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@27.3.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
+  packages/plugin-navigation-sync:
+    dependencies:
+      '@stackflow/config':
+        specifier: ^1.0.1-canary.0
+        version: 1.2.2
+      '@stackflow/core':
+        specifier: ^1.1.0-canary.0
+        version: 1.3.0
+      '@stackflow/react':
+        specifier: ^1.3.2-canary.0
+        version: 1.11.1(@stackflow/config@1.2.2)(@stackflow/core@1.3.0)(@types/react@19.2.7)(react@19.2.3)
+      flatted:
+        specifier: ^3.3.1
+        version: 3.3.3
+      history:
+        specifier: ^5.3.0
+        version: 5.3.0
+      react:
+        specifier: '>=16.8.0'
+        version: 19.2.3
+      urlpattern-polyfill:
+        specifier: ^10.1.0
+        version: 10.1.0
+
+  packages/theme-tools:
+    devDependencies:
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@27.3.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
 packages:
 
   '@acemir/cssom@0.9.30':
@@ -409,6 +720,9 @@ packages:
     resolution: {integrity: sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA==}
     hasBin: true
 
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
   '@asamuzakjp/css-color@4.1.1':
     resolution: {integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==}
 
@@ -1606,6 +1920,19 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@microsoft/api-extractor-model@7.32.2':
+    resolution: {integrity: sha512-Ussc25rAalc+4JJs9HNQE7TuO9y6jpYQX9nWD1DhqUzYPBr3Lr7O9intf+ZY8kD5HnIqeIRJX7ccCT0QyBy2Ww==}
+
+  '@microsoft/api-extractor@7.55.2':
+    resolution: {integrity: sha512-1jlWO4qmgqYoVUcyh+oXYRztZde/pAi7cSVzBz/rc+S7CoVzDasy8QE13dx6sLG4VRo8SfkkLbFORR6tBw4uGQ==}
+    hasBin: true
+
+  '@microsoft/tsdoc-config@0.18.0':
+    resolution: {integrity: sha512-8N/vClYyfOH+l4fLkkr9+myAoR6M7akc8ntBJ4DJdWH2b09uVfr71+LTMpNyG19fNqWDg8KEDZhx5wxuqHyGjw==}
+
+  '@microsoft/tsdoc@0.16.0':
+    resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
+
   '@modelcontextprotocol/sdk@1.25.1':
     resolution: {integrity: sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==}
     engines: {node: '>=18'}
@@ -1790,9 +2117,51 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.11':
+    resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -1811,6 +2180,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.3':
+    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dialog@1.1.15':
     resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
     peerDependencies:
@@ -1824,6 +2202,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.11':
     resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
@@ -1868,6 +2255,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -1907,6 +2307,45 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.8':
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -1961,6 +2400,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.1':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
@@ -1970,6 +2418,49 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@redis/bloom@1.2.0':
     resolution: {integrity: sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==}
     peerDependencies:
@@ -2121,6 +2612,36 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rushstack/node-core-library@5.19.1':
+    resolution: {integrity: sha512-ESpb2Tajlatgbmzzukg6zyAhH+sICqJR2CNXNhXcEbz6UGCQfrKCtkxOpJTftWc8RGouroHG0Nud1SJAszvpmA==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/problem-matcher@0.1.1':
+    resolution: {integrity: sha512-Fm5XtS7+G8HLcJHCWpES5VmeMyjAKaWeyZU5qPzZC+22mPlJzAsOxymHiWIfuirtPckX3aptWws+K2d0BzniJA==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/rig-package@0.6.0':
+    resolution: {integrity: sha512-ZQmfzsLE2+Y91GF15c65L/slMRVhF6Hycq04D4TwtdGaUAbIXXg9c5pKA5KFU7M4QMaihoobp9JJYpYcaY3zOw==}
+
+  '@rushstack/terminal@0.19.5':
+    resolution: {integrity: sha512-6k5tpdB88G0K7QrH/3yfKO84HK9ggftfUZ51p7fePyCE7+RLLHkWZbID9OFWbXuna+eeCFE7AkKnRMHMxNbz7Q==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/ts-command-line@5.1.5':
+    resolution: {integrity: sha512-YmrFTFUdHXblYSa+Xc9OO9FsL/XFcckZy0ycQ6q7VSBsVs5P0uD9vcges5Q9vctGlVdu27w+Ct6IuJ458V0cTQ==}
+
   '@scure/base@1.1.9':
     resolution: {integrity: sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==}
 
@@ -2510,6 +3031,9 @@ packages:
   '@ts-morph/common@0.27.0':
     resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
 
+  '@types/argparse@1.0.38':
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -2742,6 +3266,15 @@ packages:
   '@vitest/utils@4.0.16':
     resolution: {integrity: sha512-h8z9yYhV3e1LEfaQ3zdypIrnAg/9hguReGZoS7Gl0aBG5xgA410zBqECqmaF/+RkTggRsfnzc1XaAHA6bmUufA==}
 
+  '@volar/language-core@2.4.27':
+    resolution: {integrity: sha512-DjmjBWZ4tJKxfNC1F6HyYERNHPYS7L7OPFyCrestykNdUZMFYzI9WTyvwPcaNaHlrEUwESHYsfEw3isInncZxQ==}
+
+  '@volar/source-map@2.4.27':
+    resolution: {integrity: sha512-ynlcBReMgOZj2i6po+qVswtDUeeBRCTgDurjMGShbm8WYZgJ0PA4RmtebBJ0BCYol1qPv3GQF6jK7C9qoVc7lg==}
+
+  '@volar/typescript@2.4.27':
+    resolution: {integrity: sha512-eWaYCcl/uAPInSK2Lze6IqVWaBu/itVqR5InXcHXFyles4zO++Mglt3oxdgj75BDcv1Knr9Y93nowS8U3wqhxg==}
+
   '@vue/compiler-core@3.5.26':
     resolution: {integrity: sha512-vXyI5GMfuoBCnv5ucIT7jhHKl55Y477yxP6fc4eUswjP8FG3FFVFd41eNDArR+Uk3QKn2Z85NavjaxLxOC19/w==}
 
@@ -2754,6 +3287,9 @@ packages:
   '@vue/compiler-ssr@3.5.26':
     resolution: {integrity: sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw==}
 
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
   '@vue/devtools-api@7.7.9':
     resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
 
@@ -2763,6 +3299,14 @@ packages:
   '@vue/devtools-shared@7.7.9':
     resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
 
+  '@vue/language-core@2.2.0':
+    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@vue/reactivity@3.5.26':
     resolution: {integrity: sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==}
 
@@ -2862,6 +3406,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  address@2.0.3:
+    resolution: {integrity: sha512-XNAb/a6TCqou+TufU8/u11HCu9x1gYvOoxLwtlXgIqmkrYQADVv6ljyW2zwiPhHz9R1gItAWpuDrdJMmrOBFEA==}
+    engines: {node: '>= 16.0.0'}
+
   aes-js@3.0.0:
     resolution: {integrity: sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==}
 
@@ -2875,6 +3423,14 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  ajv-draft-04@1.0.0:
+    resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
+    peerDependencies:
+      ajv: ^8.5.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
   ajv-formats@1.6.1:
     resolution: {integrity: sha512-4CjkH20If1lhR5CGtqkrVg3bbOtFEG80X9v6jDOIUhbzzbB+UzPBGy8GQhUNVZ0yvMHdMpawCOcy5ydGMsagGQ==}
     peerDependencies:
@@ -2897,6 +3453,12 @@ packages:
   ajv@7.2.4:
     resolution: {integrity: sha512-nBeQgg/ZZA3u3SYxyaDvpvDtgZ/EZPF547ARgZBrG9Bhu1vKDwAIjtIf+sDtJUKa2zOcEbmRLBRSyMraS/Oy1A==}
 
+  ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+
+  ajv@8.13.0:
+    resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==}
+
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
@@ -2904,6 +3466,9 @@ packages:
     resolution: {integrity: sha512-qqAXW9QvKf2tTyhpDA4qXv1IfBwD2eduSW6tUEBFIfCeE9gn9HQ9I5+MaKoenRuHrzk5sQoNh1/iof8mY7uD6Q==}
     engines: {node: '>= 14.0.0'}
 
+  alien-signals@0.4.14:
+    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
+
   amqplib@0.10.9:
     resolution: {integrity: sha512-jwSftI4QjS3mizvnSnOrPGYiUnm1vI2OP1iXeOUz5pb74Ua0nbf6nPyyTzuiCLEE3fMpaJORXh2K/TQ08H5xGA==}
     engines: {node: '>=10'}
@@ -2939,6 +3504,9 @@ packages:
     resolution: {integrity: sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==}
     engines: {node: '>= 6.0.0'}
 
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -3245,6 +3813,9 @@ packages:
     resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
     engines: {node: '>=20'}
 
+  compare-versions@6.1.1:
+    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
+
   component-bind@1.0.0:
     resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
 
@@ -3258,6 +3829,12 @@ packages:
     resolution: {integrity: sha512-rLSiilO85qHgaTBIIHQpsv8z+NnVfZq3cKuYNCXN1AOqPzced0GWZEe/A517VldRLyQYXUMyV+vszavE2jSAqw==}
     engines: {node: '>=10'}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
   consola@2.15.3:
     resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
 
@@ -3351,6 +3928,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
   cssstyle@5.3.5:
     resolution: {integrity: sha512-GlsEptulso7Jg0VaOZ8BXQi3AkYM5BOJKEO/rjMidSCq70FkIC5y0eawrCXeYzxgt3OCf4Ls+eoxN+/05vN0Ag==}
     engines: {node: '>=20'}
@@ -3366,6 +3947,10 @@ packages:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
 
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
   data-urls@6.0.0:
     resolution: {integrity: sha512-BnBS08aLUM+DKamupXs3w2tJJoqU+AkaE/+6vQxi/G/DPmIZFJJp9Dkb1kM03AZx8ADehDUZgsNxju3mPXZYIA==}
     engines: {node: '>=20'}
@@ -3377,6 +3962,9 @@ packages:
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
   debounce-fn@4.0.0:
     resolution: {integrity: sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==}
     engines: {node: '>=10'}
@@ -3463,6 +4051,11 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  detect-port@2.1.0:
+    resolution: {integrity: sha512-epZuWb/6Q62L+nDHJc/hQAqf8pylsqgk3BpZXVBx1CDnr3nkrVNn73Uu1rXcFzkNcc+hkP3whuOg7JZYaQB65Q==}
+    engines: {node: '>= 16.0.0'}
+    hasBin: true
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -3696,6 +4289,9 @@ packages:
     resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
     engines: {node: '>= 18'}
 
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
@@ -3805,6 +4401,20 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
+  framer-motion@12.23.26:
+    resolution: {integrity: sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -3896,6 +4506,9 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
   google-protobuf@3.21.4:
     resolution: {integrity: sha512-MnG7N936zcKTco4Jd2PX2U96Kf9PxygAPKBug+74LHzmHXmceN16MmRcdgZv+DGef/S9YvQAfRsNCn4cjf9yyQ==}
 
@@ -3957,6 +4570,10 @@ packages:
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
   headers-polyfill@4.0.3:
     resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
 
@@ -4043,6 +4660,10 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
+  import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+
   indent-string@4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
@@ -4251,6 +4872,9 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+
   jose@6.1.3:
     resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
 
@@ -4270,6 +4894,15 @@ packages:
   jsbn@0.1.1:
     resolution: {integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==}
 
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsdom@27.3.0:
     resolution: {integrity: sha512-GtldT42B8+jefDUC4yUKAvsaOrH7PDHmZxZXNgF2xMmymjUbRYJvpAybZAKEmXDGTM0mCsz8duOa4vTm5AY2Kg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -4335,6 +4968,9 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   libphonenumber-js@1.12.33:
     resolution: {integrity: sha512-r9kw4OA6oDO4dPXkOrXTkArQAafIKAU71hChInV4FxZ69dxCfbwQGDPzqR5/vea94wU705/3AZroEbSoeVWrQw==}
 
@@ -4411,6 +5047,10 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
   locate-path@3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
@@ -4443,6 +5083,15 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  lucide-react@0.562.0:
+    resolution: {integrity: sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -4555,6 +5204,10 @@ packages:
   minimalistic-crypto-utils@1.0.1:
     resolution: {integrity: sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==}
 
+  minimatch@10.0.3:
+    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+    engines: {node: 20 || >=22}
+
   minimatch@10.1.1:
     resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
     engines: {node: 20 || >=22}
@@ -4581,9 +5234,18 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
   modern-ahocorasick@1.1.0:
     resolution: {integrity: sha512-sEKPVl2rM+MNVkGQt3ChdmD8YsigmXdn5NifZn6jiwn9LRJpWm8F3guhaqrJT/JOat6pwpbXEk6kv+b9DMIjsQ==}
 
+  motion-dom@12.23.23:
+    resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -4604,6 +5266,9 @@ packages:
       typescript:
         optional: true
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   mute-stream@2.0.0:
     resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4670,6 +5335,9 @@ packages:
   number-flow@0.5.8:
     resolution: {integrity: sha512-FPr1DumWyGi5Nucoug14bC6xEz70A1TnhgSHhKyfqjgji2SOTz+iLJxKtv37N5JyJbteGYCm6NQ9p1O4KZ7iiA==}
 
+  nwsapi@2.2.23:
+    resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
+
   oauth-sign@0.9.0:
     resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
 
@@ -4786,6 +5454,9 @@ packages:
   parse5@6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
 
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
   parse5@8.0.0:
     resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
 
@@ -4877,6 +5548,12 @@ packages:
     resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
     engines: {node: '>=16.20.0'}
 
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
   pkg-up@3.1.0:
     resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
     engines: {node: '>=8'}
@@ -5028,6 +5705,9 @@ packages:
     resolution: {integrity: sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==}
     engines: {node: '>=0.6'}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -5067,6 +5747,22 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
+  react-i18next@15.7.4:
+    resolution: {integrity: sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==}
+    peerDependencies:
+      i18next: '>= 23.4.0'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+      typescript: ^5
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+      typescript:
+        optional: true
+
   react-i18next@16.5.0:
     resolution: {integrity: sha512-IMpPTyCTKxEj8klCrLKUTIUa8uYTd851+jcu2fJuUB9Agkk9Qq8asw4omyeHVnOXHrLgQJGTm5zTvn8HpaPiqw==}
     peerDependencies:
@@ -5252,6 +5948,9 @@ packages:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
 
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
   run-applescript@7.1.0:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
@@ -5296,6 +5995,11 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
+  semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   semver@7.7.1:
     resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
     engines: {node: '>=10'}
@@ -5423,6 +6127,9 @@ packages:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
 
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
   sshpk@1.18.0:
     resolution: {integrity: sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==}
     engines: {node: '>=0.10.0'}
@@ -5458,6 +6165,10 @@ packages:
   strict-event-emitter@0.5.1:
     resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
 
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -5515,6 +6226,10 @@ packages:
     resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
     engines: {node: '>=12'}
 
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
   strnum@1.1.2:
     resolution: {integrity: sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA==}
 
@@ -5526,6 +6241,10 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -5598,9 +6317,16 @@ packages:
     resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
   tldts-core@7.0.19:
     resolution: {integrity: sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==}
 
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
   tldts@7.0.19:
     resolution: {integrity: sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==}
     hasBin: true
@@ -5628,6 +6354,10 @@ packages:
     resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==}
     engines: {node: '>=0.8'}
 
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
   tough-cookie@6.0.0:
     resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
     engines: {node: '>=16'}
@@ -5635,6 +6365,10 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
   tr46@6.0.0:
     resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
     engines: {node: '>=20'}
@@ -5652,6 +6386,16 @@ packages:
   ts-morph@26.0.0:
     resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
 
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   tsconfig-paths@4.2.0:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
@@ -5781,11 +6525,19 @@ packages:
       typeorm-aurora-data-api-driver:
         optional: true
 
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
   uid@2.0.2:
     resolution: {integrity: sha512-u3xV3X7uzvi5b1MncmZo3i2Aw222Zk1keqLA1YkHldREkAhAqi65wuPfe7lHx8H/Wzy+8CE7S7uS3jekIM5s8g==}
     engines: {node: '>=8'}
@@ -5850,6 +6602,9 @@ packages:
     resolution: {integrity: sha512-uQcEj/2puA4aq1R3A2+VNVBgaWYR24FdWjl7VNW83rnWftlhyzOZ/tBjezRiC2UkIzuxC8Top3IekN3vUf1WxA==}
     engines: {node: '>=0.12.0'}
 
+  urlpattern-polyfill@10.1.0:
+    resolution: {integrity: sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==}
+
   use-callback-ref@1.3.3:
     resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
@@ -5906,6 +6661,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   verror@1.10.0:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
@@ -5927,6 +6688,15 @@ packages:
   vite-plugin-commonjs@0.10.4:
     resolution: {integrity: sha512-eWQuvQKCcx0QYB5e5xfxBNjQKyrjEWZIR9UOkOV6JAgxVhtbZvCOF+FNC2ZijBJ3U3Px04ZMMyyMyFBVWIJ5+g==}
 
+  vite-plugin-dts@4.5.4:
+    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
+    peerDependencies:
+      typescript: '*'
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vite-plugin-dynamic-import@1.6.0:
     resolution: {integrity: sha512-TM0sz70wfzTIo9YCxVFwS8OA9lNREsh+0vMHGSkWDTZ7bgd1Yjs5RV8EgB634l/91IsXJReg0xtmuQqP0mf+rg==}
 
@@ -5936,6 +6706,14 @@ packages:
     peerDependencies:
       vite: '>=3'
 
+  vite-tsconfig-paths@5.1.4:
+    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vite@5.4.21:
     resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6057,6 +6835,9 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
   vue@3.5.26:
     resolution: {integrity: sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==}
     peerDependencies:
@@ -6148,6 +6929,10 @@ packages:
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
   webidl-conversions@8.0.0:
     resolution: {integrity: sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA==}
     engines: {node: '>=20'}
@@ -6163,6 +6948,10 @@ packages:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
     engines: {node: '>=18'}
 
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
   whatwg-url@15.1.0:
     resolution: {integrity: sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==}
     engines: {node: '>=20'}
@@ -6485,6 +7274,14 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.0.2
 
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
   '@asamuzakjp/css-color@4.1.1':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -7938,6 +8735,42 @@ snapshots:
       '@types/react': 19.2.7
       react: 19.2.3
 
+  '@microsoft/api-extractor-model@7.32.2(@types/node@24.10.4)':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.0
+      '@rushstack/node-core-library': 5.19.1(@types/node@24.10.4)
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/api-extractor@7.55.2(@types/node@24.10.4)':
+    dependencies:
+      '@microsoft/api-extractor-model': 7.32.2(@types/node@24.10.4)
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.0
+      '@rushstack/node-core-library': 5.19.1(@types/node@24.10.4)
+      '@rushstack/rig-package': 0.6.0
+      '@rushstack/terminal': 0.19.5(@types/node@24.10.4)
+      '@rushstack/ts-command-line': 5.1.5(@types/node@24.10.4)
+      diff: 8.0.2
+      lodash: 4.17.21
+      minimatch: 10.0.3
+      resolve: 1.22.11
+      semver: 7.5.4
+      source-map: 0.6.1
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/tsdoc-config@0.18.0':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      ajv: 8.12.0
+      jju: 1.4.0
+      resolve: 1.22.11
+
+  '@microsoft/tsdoc@0.16.0': {}
+
   '@modelcontextprotocol/sdk@1.25.1(hono@4.11.1)(zod@3.25.76)':
     dependencies:
       '@hono/node-server': 1.19.7(hono@4.11.1)
@@ -8114,8 +8947,44 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.1.3': {}
 
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-avatar@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -8128,6 +8997,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-context@1.1.3(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
   '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -8150,6 +9025,12 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
   '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -8187,6 +9068,24 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -8205,64 +9104,149 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
       react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.3)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.3)':
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
       react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.3)':
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.3)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/rect@1.1.1': {}
 
   '@redis/bloom@1.2.0(@redis/client@1.5.8)':
     dependencies:
@@ -8366,6 +9350,45 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.54.0':
     optional: true
 
+  '@rushstack/node-core-library@5.19.1(@types/node@24.10.4)':
+    dependencies:
+      ajv: 8.13.0
+      ajv-draft-04: 1.0.0(ajv@8.13.0)
+      ajv-formats: 3.0.1(ajv@8.13.0)
+      fs-extra: 11.3.3
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.11
+      semver: 7.5.4
+    optionalDependencies:
+      '@types/node': 24.10.4
+
+  '@rushstack/problem-matcher@0.1.1(@types/node@24.10.4)':
+    optionalDependencies:
+      '@types/node': 24.10.4
+
+  '@rushstack/rig-package@0.6.0':
+    dependencies:
+      resolve: 1.22.11
+      strip-json-comments: 3.1.1
+
+  '@rushstack/terminal@0.19.5(@types/node@24.10.4)':
+    dependencies:
+      '@rushstack/node-core-library': 5.19.1(@types/node@24.10.4)
+      '@rushstack/problem-matcher': 0.1.1(@types/node@24.10.4)
+      supports-color: 8.1.1
+    optionalDependencies:
+      '@types/node': 24.10.4
+
+  '@rushstack/ts-command-line@5.1.5(@types/node@24.10.4)':
+    dependencies:
+      '@rushstack/terminal': 0.19.5(@types/node@24.10.4)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+
   '@scure/base@1.1.9': {}
 
   '@scure/base@1.2.6': {}
@@ -8806,6 +9829,8 @@ snapshots:
       minimatch: 10.1.1
       path-browserify: 1.0.1
 
+  '@types/argparse@1.0.38': {}
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
@@ -9134,6 +10159,18 @@ snapshots:
       '@vitest/pretty-format': 4.0.16
       tinyrainbow: 3.0.3
 
+  '@volar/language-core@2.4.27':
+    dependencies:
+      '@volar/source-map': 2.4.27
+
+  '@volar/source-map@2.4.27': {}
+
+  '@volar/typescript@2.4.27':
+    dependencies:
+      '@volar/language-core': 2.4.27
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
   '@vue/compiler-core@3.5.26':
     dependencies:
       '@babel/parser': 7.28.5
@@ -9164,6 +10201,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.26
       '@vue/shared': 3.5.26
 
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
   '@vue/devtools-api@7.7.9':
     dependencies:
       '@vue/devtools-kit': 7.7.9
@@ -9182,6 +10224,19 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
+  '@vue/language-core@2.2.0(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 2.4.27
+      '@vue/compiler-dom': 3.5.26
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.26
+      alien-signals: 0.4.14
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+
   '@vue/reactivity@3.5.26':
     dependencies:
       '@vue/shared': 3.5.26
@@ -9255,6 +10310,8 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  address@2.0.3: {}
+
   aes-js@3.0.0: {}
 
   aes-js@4.0.0-beta.5: {}
@@ -9263,10 +10320,18 @@ snapshots:
 
   agent-base@7.1.4: {}
 
+  ajv-draft-04@1.0.0(ajv@8.13.0):
+    optionalDependencies:
+      ajv: 8.13.0
+
   ajv-formats@1.6.1(ajv@7.2.4):
     optionalDependencies:
       ajv: 7.2.4
 
+  ajv-formats@3.0.1(ajv@8.13.0):
+    optionalDependencies:
+      ajv: 8.13.0
+
   ajv-formats@3.0.1(ajv@8.17.1):
     optionalDependencies:
       ajv: 8.17.1
@@ -9285,6 +10350,20 @@ snapshots:
       require-from-string: 2.0.2
       uri-js: 4.4.1
 
+  ajv@8.12.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+
+  ajv@8.13.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+
   ajv@8.17.1:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -9309,6 +10388,8 @@ snapshots:
       '@algolia/requester-fetch': 5.46.2
       '@algolia/requester-node-http': 5.46.2
 
+  alien-signals@0.4.14: {}
+
   amqplib@0.10.9:
     dependencies:
       buffer-more-ints: 1.0.0
@@ -9332,6 +10413,10 @@ snapshots:
 
   app-root-path@3.1.0: {}
 
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
   argparse@2.0.1: {}
 
   aria-hidden@1.2.6:
@@ -9650,6 +10735,8 @@ snapshots:
 
   commander@14.0.2: {}
 
+  compare-versions@6.1.1: {}
+
   component-bind@1.0.0: {}
 
   component-emitter@1.3.1: {}
@@ -9670,6 +10757,10 @@ snapshots:
       pkg-up: 3.1.0
       semver: 7.7.3
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.2: {}
+
   consola@2.15.3: {}
 
   content-disposition@1.0.1: {}
@@ -9759,6 +10850,11 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
   cssstyle@5.3.5:
     dependencies:
       '@asamuzakjp/css-color': 4.1.1
@@ -9773,6 +10869,11 @@ snapshots:
 
   data-uri-to-buffer@4.0.1: {}
 
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
   data-urls@6.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -9782,6 +10883,8 @@ snapshots:
 
   dayjs@1.11.19: {}
 
+  de-indent@1.0.2: {}
+
   debounce-fn@4.0.0:
     dependencies:
       mimic-fn: 3.1.0
@@ -9833,6 +10936,10 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
+  detect-port@2.1.0:
+    dependencies:
+      address: 2.0.3
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -10228,6 +11335,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  exsolve@1.0.8: {}
+
   extend@3.0.2: {}
 
   extsprintf@1.3.0: {}
@@ -10336,6 +11445,15 @@ snapshots:
 
   forwarded@0.2.0: {}
 
+  framer-motion@12.23.26(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      motion-dom: 12.23.23
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   fresh@2.0.0: {}
 
   fs-extra@11.3.3:
@@ -10427,6 +11545,8 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.1
 
+  globrex@0.1.2: {}
+
   google-protobuf@3.21.4: {}
 
   gopd@1.2.0: {}
@@ -10494,6 +11614,8 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
+  he@1.2.0: {}
+
   headers-polyfill@4.0.3: {}
 
   highlight.js@10.7.3: {}
@@ -10581,6 +11703,8 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  import-lazy@4.0.0: {}
+
   indent-string@4.0.0: {}
 
   indexof@0.0.1: {}
@@ -10746,6 +11870,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jju@1.4.0: {}
+
   jose@6.1.3: {}
 
   js-sha3@0.8.0: {}
@@ -10760,6 +11886,33 @@ snapshots:
 
   jsbn@0.1.1: {}
 
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.23
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.18.3
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsdom@27.3.0:
     dependencies:
       '@acemir/cssom': 0.9.30
@@ -10834,6 +11987,8 @@ snapshots:
 
   kleur@4.1.5: {}
 
+  kolorist@1.8.0: {}
+
   libphonenumber-js@1.12.33: {}
 
   lightningcss-android-arm64@1.30.2:
@@ -10887,6 +12042,12 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
   locate-path@3.0.0:
     dependencies:
       p-locate: 3.0.0
@@ -10923,6 +12084,14 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
+  lucide-react@0.562.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -11027,6 +12196,10 @@ snapshots:
 
   minimalistic-crypto-utils@1.0.1: {}
 
+  minimatch@10.0.3:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
   minimatch@10.1.1:
     dependencies:
       '@isaacs/brace-expansion': 5.0.0
@@ -11045,8 +12218,21 @@ snapshots:
 
   mkdirp@2.1.6: {}
 
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
   modern-ahocorasick@1.1.0: {}
 
+  motion-dom@12.23.23:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
   mrmime@2.0.1: {}
 
   ms@2.0.0: {}
@@ -11078,6 +12264,8 @@ snapshots:
     transitivePeerDependencies:
       - '@types/node'
 
+  muggle-string@0.4.1: {}
+
   mute-stream@2.0.0: {}
 
   mute-stream@3.0.0: {}
@@ -11130,6 +12318,8 @@ snapshots:
     dependencies:
       esm-env: 1.2.2
 
+  nwsapi@2.2.23: {}
+
   oauth-sign@0.9.0: {}
 
   object-assign@4.1.1: {}
@@ -11263,6 +12453,10 @@ snapshots:
 
   parse5@6.0.1: {}
 
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
   parse5@8.0.0:
     dependencies:
       entities: 6.0.1
@@ -11332,6 +12526,18 @@ snapshots:
 
   pkce-challenge@5.0.1: {}
 
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
   pkg-up@3.1.0:
     dependencies:
       find-up: 3.0.0
@@ -11419,6 +12625,8 @@ snapshots:
 
   qs@6.5.3: {}
 
+  quansync@0.2.11: {}
+
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
@@ -11467,6 +12675,16 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
+  react-i18next@15.7.4(i18next@25.7.3(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      html-parse-stringify: 3.0.1
+      i18next: 25.7.3(typescript@5.9.3)
+      react: 19.2.3
+    optionalDependencies:
+      react-dom: 19.2.3(react@19.2.3)
+      typescript: 5.9.3
+
   react-i18next@16.5.0(i18next@25.7.3(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3):
     dependencies:
       '@babel/runtime': 7.28.4
@@ -11685,6 +12903,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  rrweb-cssom@0.8.0: {}
+
   run-applescript@7.1.0: {}
 
   run-parallel@1.2.0:
@@ -11725,6 +12945,10 @@ snapshots:
 
   semver@6.3.1: {}
 
+  semver@7.5.4:
+    dependencies:
+      lru-cache: 6.0.0
+
   semver@7.7.1: {}
 
   semver@7.7.3: {}
@@ -11936,6 +13160,8 @@ snapshots:
 
   speakingurl@14.0.1: {}
 
+  sprintf-js@1.0.3: {}
+
   sshpk@1.18.0:
     dependencies:
       asn1: 0.2.6
@@ -11989,6 +13215,8 @@ snapshots:
 
   strict-event-emitter@0.5.1: {}
 
+  string-argv@0.3.2: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -12050,6 +13278,8 @@ snapshots:
 
   strip-indent@4.1.1: {}
 
+  strip-json-comments@3.1.1: {}
+
   strnum@1.1.2: {}
 
   superjson@2.2.6:
@@ -12060,6 +13290,10 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
   swiper@12.0.3: {}
@@ -12107,8 +13341,14 @@ snapshots:
 
   tinyspy@4.0.4: {}
 
+  tldts-core@6.1.86: {}
+
   tldts-core@7.0.19: {}
 
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
   tldts@7.0.19:
     dependencies:
       tldts-core: 7.0.19
@@ -12134,12 +13374,20 @@ snapshots:
       psl: 1.15.0
       punycode: 2.3.1
 
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
   tough-cookie@6.0.0:
     dependencies:
       tldts: 7.0.19
 
   tr46@0.0.3: {}
 
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
   tr46@6.0.0:
     dependencies:
       punycode: 2.3.1
@@ -12169,6 +13417,10 @@ snapshots:
       '@ts-morph/common': 0.27.0
       code-block-writer: 13.0.3
 
+  tsconfck@3.1.6(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
   tsconfig-paths@4.2.0:
     dependencies:
       json5: 2.2.3
@@ -12256,8 +13508,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  typescript@5.8.2: {}
+
   typescript@5.9.3: {}
 
+  ufo@1.6.1: {}
+
   uid@2.0.2:
     dependencies:
       '@lukeed/csprng': 1.1.0
@@ -12323,6 +13579,8 @@ snapshots:
 
   url-pattern@1.0.3: {}
 
+  urlpattern-polyfill@10.1.0: {}
+
   use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       react: 19.2.3
@@ -12364,6 +13622,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   verror@1.10.0:
     dependencies:
       assert-plus: 1.0.0
@@ -12403,6 +13670,25 @@ snapshots:
       magic-string: 0.30.21
       vite-plugin-dynamic-import: 1.6.0
 
+  vite-plugin-dts@4.5.4(@types/node@24.10.4)(rollup@4.54.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)):
+    dependencies:
+      '@microsoft/api-extractor': 7.55.2(@types/node@24.10.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      '@volar/typescript': 2.4.27
+      '@vue/language-core': 2.2.0(typescript@5.9.3)
+      compare-versions: 6.1.1
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      typescript: 5.9.3
+    optionalDependencies:
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+
   vite-plugin-dynamic-import@1.6.0:
     dependencies:
       acorn: 8.15.0
@@ -12419,6 +13705,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)):
+    dependencies:
+      debug: 4.4.3
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.9.3)
+    optionalDependencies:
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2):
     dependencies:
       esbuild: 0.21.5
@@ -12492,6 +13789,45 @@ snapshots:
       - typescript
       - universal-cookie
 
+  vitest@4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3)):
+    dependencies:
+      '@vitest/expect': 4.0.16
+      '@vitest/mocker': 4.0.16(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      '@vitest/pretty-format': 4.0.16
+      '@vitest/runner': 4.0.16
+      '@vitest/snapshot': 4.0.16
+      '@vitest/spy': 4.0.16
+      '@vitest/utils': 4.0.16
+      es-module-lexer: 1.7.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.10.4
+      '@vitest/browser-playwright': 4.0.16(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(playwright@1.57.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))(vitest@4.0.16)
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - yaml
+
   vitest@4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@27.3.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3)):
     dependencies:
       '@vitest/expect': 4.0.16
@@ -12533,6 +13869,8 @@ snapshots:
 
   void-elements@3.1.0: {}
 
+  vscode-uri@3.1.0: {}
+
   vue@3.5.26(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.26
@@ -12762,6 +14100,8 @@ snapshots:
 
   webidl-conversions@3.0.1: {}
 
+  webidl-conversions@7.0.0: {}
+
   webidl-conversions@8.0.0: {}
 
   webpack-virtual-modules@0.6.2: {}
@@ -12772,6 +14112,11 @@ snapshots:
 
   whatwg-mimetype@4.0.0: {}
 
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
   whatwg-url@15.1.0:
     dependencies:
       tr46: 6.0.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 00000000..574c2837
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - 'packages/*'
+  - 'miniapps/*'
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 00000000..1eb9d311
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="bio-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#10b981"/>
+      <stop offset="100%" style="stop-color:#059669"/>
+    </linearGradient>
+  </defs>
+  <!-- Background -->
+  <rect width="64" height="64" rx="14" fill="url(#bio-grad)"/>
+  <!-- Bio leaf/tree symbol -->
+  <path d="M32 12 C24 20 20 28 22 36 C24 44 28 48 32 52 C36 48 40 44 42 36 C44 28 40 20 32 12 Z" fill="white" opacity="0.9"/>
+  <circle cx="32" cy="32" r="6" fill="white"/>
+  <!-- Decorative dots -->
+  <circle cx="22" cy="24" r="2" fill="white" opacity="0.6"/>
+  <circle cx="42" cy="24" r="2" fill="white" opacity="0.6"/>
+  <circle cx="26" cy="44" r="1.5" fill="white" opacity="0.5"/>
+  <circle cx="38" cy="44" r="1.5" fill="white" opacity="0.5"/>
+</svg>
diff --git a/scripts/vite-plugin-build-check.ts b/scripts/vite-plugin-build-check.ts
new file mode 100644
index 00000000..847de88a
--- /dev/null
+++ b/scripts/vite-plugin-build-check.ts
@@ -0,0 +1,143 @@
+/**
+ * Vite Plugin: Build Check
+ *
+ * 构建完成后验证输出目录结构：
+ * - dist/ecosystem.json 存在且有效
+ * - dist/miniapps/ 存在
+ * - 各 miniapp 有必需文件（index.html, icon.svg, assets/）
+ */
+
+import type { Plugin } from 'vite'
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs'
+import { resolve, join } from 'node:path'
+
+interface BuildCheckOptions {
+  /** 是否在检查失败时抛出错误（默认 true） */
+  failOnError?: boolean
+}
+
+export function buildCheckPlugin(options: BuildCheckOptions = {}): Plugin {
+  const { failOnError = true } = options
+
+  let distDir: string
+
+  const errors: string[] = []
+  const warnings: string[] = []
+
+  function error(msg: string) {
+    errors.push(msg)
+    console.error(`[build-check] ❌ ${msg}`)
+  }
+
+  function warn(msg: string) {
+    warnings.push(msg)
+    console.warn(`[build-check] ⚠️ ${msg}`)
+  }
+
+  function ok(msg: string) {
+    console.log(`[build-check] ✅ ${msg}`)
+  }
+
+  return {
+    name: 'vite-plugin-build-check',
+    apply: 'build',
+
+    writeBundle(outputOptions) {
+      distDir = outputOptions.dir || 'dist'
+    },
+
+    async closeBundle() {
+      if (!distDir) return
+
+      console.log('\n[build-check] Verifying build output...\n')
+
+      // 1. 检查 ecosystem.json（在 miniapps/ 目录下）
+      const ecosystemPath = resolve(distDir, 'miniapps/ecosystem.json')
+      if (!existsSync(ecosystemPath)) {
+        error('miniapps/ecosystem.json not found')
+      } else {
+        try {
+          const ecosystem = JSON.parse(readFileSync(ecosystemPath, 'utf-8'))
+          if (!ecosystem.apps || !Array.isArray(ecosystem.apps)) {
+            error('ecosystem.json: missing or invalid "apps" array')
+          } else if (ecosystem.apps.length === 0) {
+            warn('ecosystem.json: apps array is empty')
+          } else {
+            ok(`ecosystem.json: ${ecosystem.apps.length} apps registered`)
+          }
+        } catch (e) {
+          error(`ecosystem.json: invalid JSON - ${e}`)
+        }
+      }
+
+      // 2. 检查 miniapps 目录
+      const miniappsDir = resolve(distDir, 'miniapps')
+      if (!existsSync(miniappsDir)) {
+        error('miniapps/ directory not found')
+      } else {
+        const miniapps = readdirSync(miniappsDir).filter((f) =>
+          statSync(join(miniappsDir, f)).isDirectory()
+        )
+
+        if (miniapps.length === 0) {
+          warn('miniapps/ directory is empty')
+        } else {
+          // 3. 检查各 miniapp 必需文件
+          for (const app of miniapps) {
+            const appDir = join(miniappsDir, app)
+            const requiredFiles = ['index.html', 'icon.svg']
+            const requiredDirs = ['assets']
+
+            for (const file of requiredFiles) {
+              if (!existsSync(join(appDir, file))) {
+                error(`miniapps/${app}/${file} not found`)
+              }
+            }
+
+            for (const dir of requiredDirs) {
+              if (!existsSync(join(appDir, dir))) {
+                error(`miniapps/${app}/${dir}/ not found`)
+              }
+            }
+
+            // screenshots 是可选的，但如果存在应该有内容
+            const screenshotsDir = join(appDir, 'screenshots')
+            if (existsSync(screenshotsDir)) {
+              const screenshots = readdirSync(screenshotsDir)
+              if (screenshots.length === 0) {
+                warn(`miniapps/${app}/screenshots/ is empty`)
+              } else {
+                ok(`miniapps/${app}: ${screenshots.length} screenshots`)
+              }
+            }
+          }
+
+          ok(`miniapps/: ${miniapps.length} apps built (${miniapps.join(', ')})`)
+        }
+      }
+
+      // 4. 检查主应用必需文件
+      const mainFiles = ['index.html', 'assets']
+      for (const file of mainFiles) {
+        if (!existsSync(resolve(distDir, file))) {
+          error(`${file} not found in dist/`)
+        }
+      }
+
+      // 总结
+      console.log('')
+      if (errors.length > 0) {
+        console.error(`[build-check] ❌ ${errors.length} error(s), ${warnings.length} warning(s)`)
+        if (failOnError) {
+          throw new Error(`Build check failed with ${errors.length} error(s)`)
+        }
+      } else if (warnings.length > 0) {
+        console.warn(`[build-check] ⚠️ ${warnings.length} warning(s), 0 errors`)
+      } else {
+        console.log('[build-check] ✅ All checks passed!')
+      }
+    },
+  }
+}
+
+export default buildCheckPlugin
diff --git a/scripts/vite-plugin-miniapps.ts b/scripts/vite-plugin-miniapps.ts
new file mode 100644
index 00000000..c1f0c428
--- /dev/null
+++ b/scripts/vite-plugin-miniapps.ts
@@ -0,0 +1,342 @@
+/**
+ * Vite Plugin: Miniapps
+ *
+ * 自动管理内置 miniapps 的开发与构建：
+ * - Dev 模式：启动各 miniapp 的 vite dev server（https + 动态端口），fetch /manifest.json 获取元数据
+ * - Build 模式：构建所有 miniapps 到 dist/miniapps/，生成 ecosystem.json
+ */
+
+import { createServer, build as viteBuild, type Plugin, type ViteDevServer } from 'vite'
+import { resolve, join } from 'node:path'
+import { readdirSync, existsSync, readFileSync, writeFileSync, mkdirSync, cpSync } from 'node:fs'
+import detectPort from 'detect-port'
+import https from 'node:https'
+
+// ==================== Types ====================
+
+interface MiniappManifest {
+  id: string
+  dirName: string
+  name: string
+  description: string
+  longDescription?: string
+  icon: string
+  version: string
+  author: string
+  website?: string
+  category: 'tools' | 'exchange' | 'social' | 'games' | 'other'
+  tags: string[]
+  permissions: string[]
+  chains: string[]
+  screenshots: string[]
+  publishedAt: string
+  updatedAt: string
+  beta: boolean
+  themeColor: string
+  officialScore?: number
+  communityScore?: number
+}
+
+interface EcosystemJson {
+  name: string
+  version: string
+  updated: string
+  icon: string
+  apps: Array<MiniappManifest & { url: string }>
+}
+
+interface MiniappServer {
+  id: string
+  dirName: string
+  port: number
+  server: ViteDevServer
+  baseUrl: string
+}
+
+interface MiniappsPluginOptions {
+  miniappsDir?: string
+  startPort?: number
+}
+
+// ==================== Plugin ====================
+
+export function miniappsPlugin(options: MiniappsPluginOptions = {}): Plugin {
+  const { miniappsDir = 'miniapps', startPort = 5180 } = options
+
+  let root: string
+  let isBuild = false
+  const miniappServers: MiniappServer[] = []
+
+  return {
+    name: 'vite-plugin-miniapps',
+
+    configResolved(config) {
+      root = config.root
+      isBuild = config.command === 'build'
+    },
+
+    async writeBundle(options) {
+      if (isBuild && options.dir) {
+        // 构建完成后构建 miniapps
+        await buildAllMiniapps(root, miniappsDir, options.dir)
+
+        // 生成 ecosystem.json 到 miniapps/ 目录
+        const ecosystem = generateEcosystemDataForBuild(root, miniappsDir)
+        const miniappsOutputDir = resolve(options.dir, 'miniapps')
+        mkdirSync(miniappsOutputDir, { recursive: true })
+        const outputPath = resolve(miniappsOutputDir, 'ecosystem.json')
+        writeFileSync(outputPath, JSON.stringify(ecosystem, null, 2))
+        console.log(`[miniapps] Generated ${outputPath}`)
+      }
+    },
+
+    async configureServer(server: ViteDevServer) {
+      const miniappsPath = resolve(root, miniappsDir)
+      const manifests = scanMiniapps(miniappsPath)
+
+      // 预分配端口
+      const portAssignments: Array<{ manifest: MiniappManifest; port: number }> = []
+      let currentPort = startPort
+      for (const manifest of manifests) {
+        const port = await detectPort(currentPort)
+        currentPort = port + 1
+        portAssignments.push({ manifest, port })
+      }
+
+      // 并行启动所有 miniapp dev servers
+      await Promise.all(
+        portAssignments.map(async ({ manifest, port }) => {
+          const miniappPath = join(miniappsPath, manifest.dirName)
+          const miniappServer = await createMiniappServer(manifest.id, miniappPath, port)
+
+          miniappServers.push({
+            id: manifest.id,
+            dirName: manifest.dirName,
+            port,
+            server: miniappServer,
+            baseUrl: `https://localhost:${port}`,
+          })
+
+          console.log(`[miniapps] ${manifest.name} (${manifest.id}) started at https://localhost:${port}`)
+        }),
+      )
+
+      // 等待所有 miniapp 启动后，fetch 各自的 /manifest.json 生成 ecosystem
+      const generateEcosystem = async (): Promise<EcosystemJson> => {
+        const apps = await Promise.all(
+          miniappServers.map(async (s) => {
+            try {
+              const manifest = await fetchManifest(s.port)
+              return {
+                ...manifest,
+                dirName: s.dirName,
+                icon: `${s.baseUrl}/${manifest.icon}`,
+                url: `${s.baseUrl}/`,
+                screenshots: manifest.screenshots.map((sc) => `${s.baseUrl}/${sc}`),
+              }
+            } catch (e) {
+              console.error(`[miniapps] Failed to fetch manifest for ${s.id}:`, e)
+              return null
+            }
+          }),
+        )
+
+        return {
+          name: 'Bio 官方生态',
+          version: '1.0.0',
+          updated: new Date().toISOString().split('T')[0],
+          icon: '/logo.svg',
+          apps: apps.filter((a): a is NonNullable<typeof a> => a !== null),
+        }
+      }
+
+      // 预生成 ecosystem
+      const ecosystemData = await generateEcosystem()
+      let ecosystemCache = JSON.stringify(ecosystemData, null, 2)
+
+      // 拦截 /miniapps/ecosystem.json 请求
+      server.middlewares.use((req, res, next) => {
+        if (req.url === '/miniapps/ecosystem.json') {
+          res.setHeader('Content-Type', 'application/json')
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          res.end(ecosystemCache)
+          return
+        }
+        next()
+      })
+
+      // 清理服务器
+      const cleanup = async () => {
+        await Promise.all(miniappServers.map((s) => s.server.close()))
+      }
+
+      server.httpServer?.on('close', cleanup)
+    },
+
+    async closeBundle() {
+      await Promise.all(miniappServers.map((s) => s.server.close()))
+    },
+  }
+}
+
+// ==================== Helpers ====================
+
+function scanMiniapps(miniappsPath: string): MiniappManifest[] {
+  if (!existsSync(miniappsPath)) return []
+
+  const manifests: MiniappManifest[] = []
+  const entries = readdirSync(miniappsPath, { withFileTypes: true })
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue
+
+    const manifestPath = join(miniappsPath, entry.name, 'manifest.json')
+    if (!existsSync(manifestPath)) {
+      console.warn(`[miniapps] ${entry.name}: missing manifest.json, skipping`)
+      continue
+    }
+
+    try {
+      const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8')) as MiniappManifest
+      manifests.push({ ...manifest, dirName: entry.name })
+    } catch (e) {
+      console.warn(`[miniapps] ${entry.name}: invalid manifest.json, skipping`)
+    }
+  }
+
+  return manifests
+}
+
+async function createMiniappServer(id: string, root: string, port: number): Promise<ViteDevServer> {
+  const server = await createServer({
+    root,
+    configFile: join(root, 'vite.config.ts'),
+    server: {
+      port,
+      strictPort: true,
+      https: true,
+    },
+    logLevel: 'warn',
+  })
+
+  await server.listen()
+  return server
+}
+
+async function fetchManifest(port: number): Promise<MiniappManifest> {
+  return new Promise((resolve, reject) => {
+    const req = https.get(
+      `https://localhost:${port}/manifest.json`,
+      { rejectUnauthorized: false },
+      (res) => {
+        let data = ''
+        res.on('data', (chunk) => (data += chunk))
+        res.on('end', () => {
+          try {
+            resolve(JSON.parse(data))
+          } catch (e) {
+            reject(e)
+          }
+        })
+      },
+    )
+    req.on('error', reject)
+  })
+}
+
+function scanScreenshots(root: string, shortId: string): string[] {
+  const e2eDir = resolve(root, 'e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts')
+  if (!existsSync(e2eDir)) return []
+
+  return readdirSync(e2eDir)
+    .filter((f) => f.startsWith(`${shortId}-`) && f.endsWith('.png'))
+    .slice(0, 2)
+    .map((f) => `screenshots/${f}`)
+}
+
+function generateEcosystemDataForBuild(root: string, miniappsDir: string): EcosystemJson {
+  const miniappsPath = resolve(root, miniappsDir)
+  const manifests = scanMiniapps(miniappsPath)
+
+  // 路径使用相对于 ecosystem.json 的位置（即 miniapps/ 目录）
+  const apps = manifests.map((manifest) => {
+    const shortId = manifest.id.split('.').pop() || ''
+    const screenshots = scanScreenshots(root, shortId)
+
+    const { dirName, ...rest } = manifest
+    return {
+      ...rest,
+      dirName,
+      url: `./${dirName}/`,
+      icon: `./${dirName}/icon.svg`,
+      screenshots: screenshots.map((s) => `./${dirName}/${s}`),
+    }
+  })
+
+  return {
+    name: 'Bio 官方生态',
+    version: '1.0.0',
+    updated: new Date().toISOString().split('T')[0],
+    icon: '../logo.svg',
+    apps,
+  }
+}
+
+async function buildAllMiniapps(root: string, miniappsDir: string, distDir: string): Promise<void> {
+  const miniappsPath = resolve(root, miniappsDir)
+  const manifests = scanMiniapps(miniappsPath)
+  const miniappsDistDir = resolve(distDir, 'miniapps')
+
+  mkdirSync(miniappsDistDir, { recursive: true })
+
+  console.log(`[miniapps] Building ${manifests.length} miniapps...`)
+
+  for (const manifest of manifests) {
+    const miniappPath = join(miniappsPath, manifest.dirName)
+    const outputDir = resolve(miniappsDistDir, manifest.dirName)
+    const shortId = manifest.id.split('.').pop() || ''
+
+    console.log(`[miniapps] Building ${manifest.name} (${manifest.id})...`)
+
+    await viteBuild({
+      root: miniappPath,
+      configFile: join(miniappPath, 'vite.config.ts'),
+      base: './',
+      build: {
+        outDir: outputDir,
+        emptyOutDir: true,
+      },
+      logLevel: 'warn',
+    })
+
+    // 复制 public 目录静态资源（icon 等）
+    const publicDir = join(miniappPath, 'public')
+    if (existsSync(publicDir)) {
+      cpSync(publicDir, outputDir, { recursive: true })
+    }
+
+    // 复制 e2e 截图
+    const e2eScreenshotsDir = resolve(root, 'e2e/__screenshots__/Desktop-Chrome/miniapp-ui.mock.spec.ts')
+    const screenshots = scanScreenshots(root, shortId)
+
+    if (screenshots.length > 0 && existsSync(e2eScreenshotsDir)) {
+      const screenshotsOutputDir = resolve(outputDir, 'screenshots')
+      mkdirSync(screenshotsOutputDir, { recursive: true })
+
+      for (const screenshot of screenshots) {
+        const filename = screenshot.replace('screenshots/', '')
+        const src = resolve(e2eScreenshotsDir, filename)
+        const dest = resolve(screenshotsOutputDir, filename)
+        if (existsSync(src)) {
+          cpSync(src, dest)
+        }
+      }
+    }
+
+    console.log(`[miniapps] ${manifest.name} built`)
+  }
+
+  console.log(`[miniapps] All miniapps built successfully`)
+}
+
+export default miniappsPlugin
diff --git a/src/components/common/safe-markdown.tsx b/src/components/common/safe-markdown.tsx
new file mode 100644
index 00000000..e7f5ed96
--- /dev/null
+++ b/src/components/common/safe-markdown.tsx
@@ -0,0 +1,245 @@
+import { Fragment, useMemo } from 'react'
+import { cn } from '@/lib/utils'
+
+type SafeMarkdownProps = {
+  content: string
+  className?: string | undefined
+}
+
+type Block =
+  | { type: 'heading'; level: 1 | 2 | 3; text: string }
+  | { type: 'paragraph'; text: string }
+  | { type: 'ul'; items: string[] }
+  | { type: 'ol'; items: string[] }
+  | { type: 'code'; lang?: string | undefined; code: string }
+
+function sanitizeMarkdown(source: string): string {
+  return (
+    source
+      // Normalize line endings
+      .replace(/\r\n?/g, '\n')
+      // Drop HTML blocks/tags (keep it conservative: do not render as HTML)
+      .replace(/<[^>]*>/g, '')
+      // Drop images: ![alt](url)
+      .replace(/!\[[^\]]*\]\([^)]+\)/g, '')
+      // Replace links with plain text: [text](url) -> text
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      // Drop autolinks: <https://...>
+      .replace(/<https?:\/\/[^>]+>/g, '')
+      // Drop bare URLs
+      .replace(/https?:\/\/\S+/g, '')
+  )
+}
+
+function toInlineNodes(text: string): Array<string | JSX.Element> {
+  // Very conservative inline support:
+  // - Inline code: `code`
+  // - Bold: **text**
+  const nodes: Array<string | JSX.Element> = []
+  const parts = text.split('`')
+  if (parts.length === 1) {
+    return toBoldNodes(text)
+  }
+
+  for (let i = 0; i < parts.length; i += 1) {
+    const part = parts[i] ?? ''
+    const isCode = i % 2 === 1
+    if (isCode) {
+      nodes.push(
+        <code key={`code:${i}`} className="bg-muted rounded px-1 py-0.5 font-mono text-[0.85em]">
+          {part}
+        </code>,
+      )
+    } else {
+      nodes.push(...toBoldNodes(part, `t:${i}`))
+    }
+  }
+  return nodes
+}
+
+function toBoldNodes(text: string, keyPrefix = 'b'): Array<string | JSX.Element> {
+  const parts = text.split('**')
+  if (parts.length === 1) return [text]
+
+  const nodes: Array<string | JSX.Element> = []
+  let isBold = false
+  for (let i = 0; i < parts.length; i += 1) {
+    const part = parts[i] ?? ''
+    if (part.length === 0) {
+      isBold = !isBold
+      continue
+    }
+    if (isBold) {
+      nodes.push(
+        <strong key={`${keyPrefix}:${i}`} className="font-semibold text-foreground">
+          {part}
+        </strong>,
+      )
+    } else {
+      nodes.push(part)
+    }
+    isBold = !isBold
+  }
+  return nodes
+}
+
+function parseBlocks(source: string): Block[] {
+  const result: Block[] = []
+  const lines = source.split('\n')
+
+  let i = 0
+  while (i < lines.length) {
+    const raw = lines[i] ?? ''
+    const line = raw.trimEnd()
+
+    // Skip empty lines
+    if (line.trim().length === 0) {
+      i += 1
+      continue
+    }
+
+    // Fenced code blocks
+    const fenceMatch = line.match(/^```(\S+)?\s*$/)
+    if (fenceMatch) {
+      const lang = fenceMatch[1]
+      i += 1
+      const codeLines: string[] = []
+      while (i < lines.length) {
+        const l = lines[i] ?? ''
+        if (l.trimEnd().match(/^```\s*$/)) break
+        codeLines.push(l)
+        i += 1
+      }
+      // Skip closing fence line
+      i += 1
+      result.push({ type: 'code', lang, code: codeLines.join('\n') })
+      continue
+    }
+
+    // Headings (limit to h1-h3)
+    const hMatch = line.match(/^(#{1,3})\s+(.+)$/)
+    if (hMatch) {
+      const level = hMatch[1].length as 1 | 2 | 3
+      const text = hMatch[2] ?? ''
+      result.push({ type: 'heading', level, text })
+      i += 1
+      continue
+    }
+
+    // Unordered list
+    if (line.match(/^\s*[-*+]\s+/)) {
+      const items: string[] = []
+      while (i < lines.length) {
+        const l = (lines[i] ?? '').trimEnd()
+        const m = l.match(/^\s*[-*+]\s+(.+)$/)
+        if (!m) break
+        items.push(m[1] ?? '')
+        i += 1
+      }
+      result.push({ type: 'ul', items })
+      continue
+    }
+
+    // Ordered list
+    if (line.match(/^\s*\d+\.\s+/)) {
+      const items: string[] = []
+      while (i < lines.length) {
+        const l = (lines[i] ?? '').trimEnd()
+        const m = l.match(/^\s*\d+\.\s+(.+)$/)
+        if (!m) break
+        items.push(m[1] ?? '')
+        i += 1
+      }
+      result.push({ type: 'ol', items })
+      continue
+    }
+
+    // Paragraph (collect until blank line)
+    const paragraphLines: string[] = []
+    while (i < lines.length) {
+      const l = (lines[i] ?? '').trimEnd()
+      if (l.trim().length === 0) break
+      // Stop if the next block starts
+      if (l.match(/^```(\S+)?\s*$/)) break
+      if (l.match(/^(#{1,3})\s+(.+)$/)) break
+      if (l.match(/^\s*[-*+]\s+/)) break
+      if (l.match(/^\s*\d+\.\s+/)) break
+
+      paragraphLines.push(l)
+      i += 1
+    }
+    result.push({ type: 'paragraph', text: paragraphLines.join('\n') })
+  }
+
+  return result
+}
+
+export function SafeMarkdown({ content, className }: SafeMarkdownProps) {
+  const blocks = useMemo(() => parseBlocks(sanitizeMarkdown(content)), [content])
+
+  return (
+    <div className={cn('space-y-3 text-sm', className)} data-testid="safe-markdown">
+      {blocks.map((block, index) => {
+        if (block.type === 'heading') {
+          return (
+            <h4
+              // h1-h3 are mapped to the same semantic element but different visual weights
+              key={`h:${index}`}
+              className={cn(
+                'text-foreground font-semibold',
+                block.level === 1 && 'text-base',
+                block.level === 2 && 'text-sm',
+                block.level === 3 && 'text-sm',
+              )}
+            >
+              {toInlineNodes(block.text).map((node, i) => (
+                <Fragment key={`hi:${index}:${i}`}>{node}</Fragment>
+              ))}
+            </h4>
+          )
+        }
+
+        if (block.type === 'code') {
+          return (
+            <pre
+              key={`c:${index}`}
+              className="bg-muted text-foreground overflow-x-auto rounded-xl p-3 text-xs leading-relaxed"
+            >
+              <code className="font-mono">{block.code}</code>
+            </pre>
+          )
+        }
+
+        if (block.type === 'ul' || block.type === 'ol') {
+          const ListTag = block.type === 'ul' ? 'ul' : 'ol'
+          return (
+            <ListTag
+              key={`l:${index}`}
+              className={cn(
+                'text-muted-foreground space-y-1 ps-5',
+                block.type === 'ul' ? 'list-disc' : 'list-decimal',
+              )}
+            >
+              {block.items.map((item, itemIndex) => (
+                <li key={`li:${index}:${itemIndex}`}>
+                  {toInlineNodes(item).map((node, i) => (
+                    <Fragment key={`li:${index}:${itemIndex}:${i}`}>{node}</Fragment>
+                  ))}
+                </li>
+              ))}
+            </ListTag>
+          )
+        }
+
+        return (
+          <p key={`p:${index}`} className="text-muted-foreground whitespace-pre-wrap leading-relaxed">
+            {toInlineNodes(block.text).map((node, i) => (
+              <Fragment key={`pi:${index}:${i}`}>{node}</Fragment>
+            ))}
+          </p>
+        )
+      })}
+    </div>
+  )
+}
+
diff --git a/src/components/ecosystem/discover-page.tsx b/src/components/ecosystem/discover-page.tsx
new file mode 100644
index 00000000..4b01b572
--- /dev/null
+++ b/src/components/ecosystem/discover-page.tsx
@@ -0,0 +1,295 @@
+import { useRef, forwardRef, useImperativeHandle } from 'react';
+import { IconSearch, IconSparkles, IconChevronRight, IconApps } from '@tabler/icons-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { MiniappIcon } from './miniapp-icon';
+import type { MiniappManifest } from '@/services/ecosystem';
+
+// ============================================
+// 工具函数
+// ============================================
+function getTodayDate() {
+  const now = new Date();
+  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+  return `${now.getMonth() + 1}月${now.getDate()}日 ${weekdays[now.getDay()]}`;
+}
+
+// 默认渐变色
+const DEFAULT_GRADIENTS = [
+  'from-violet-500 to-purple-600',
+  'from-orange-500 to-red-500',
+  'from-emerald-500 to-teal-500',
+  'from-pink-500 to-rose-500',
+  'from-blue-500 to-cyan-500',
+];
+
+function getAppGradient(app: MiniappManifest, fallbackIndex: number = 0): string {
+  return app.themeColor || DEFAULT_GRADIENTS[fallbackIndex % DEFAULT_GRADIENTS.length];
+}
+
+// ============================================
+// 大型精选卡片
+// ============================================
+function FeaturedStoryCard({ app, onTap }: { app: MiniappManifest; onTap: () => void }) {
+  const gradient = app.themeColor || 'from-violet-600 via-purple-600 to-indigo-700';
+
+  return (
+    <button
+      onClick={onTap}
+      className={cn(
+        'group relative w-full overflow-hidden rounded-3xl text-left',
+        'shadow-xl shadow-black/10 dark:shadow-black/30',
+        'transition-all duration-300 ease-out active:scale-[0.98]',
+        'hover:shadow-2xl hover:shadow-black/20',
+      )}
+    >
+      <div className={cn('absolute inset-0 bg-gradient-to-br', gradient)} />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_-20%,rgba(255,255,255,0.3),transparent_50%)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_120%,rgba(0,0,0,0.2),transparent_50%)]" />
+
+      <div className="@container relative flex min-h-[300px] flex-col p-6">
+        <div className="mb-auto flex items-center gap-2 text-xs font-semibold tracking-wider text-white/80 uppercase">
+          <IconSparkles className="size-4" />
+          精选应用
+        </div>
+
+        <div className="mt-auto">
+          <div className="flex items-end gap-4 @sm:gap-5">
+            <MiniappIcon src={app.icon} name={app.name} size="xl" glass className="@sm:!size-24 @sm:!rounded-[24px]" />
+            <div className="min-w-0 flex-1 pb-1">
+              <h2 className="mb-1.5 text-2xl leading-tight font-bold text-white @sm:text-3xl">{app.name}</h2>
+              <p className="line-clamp-2 text-sm leading-relaxed text-white/75 @sm:text-base">
+                {app.longDescription?.split('\n')[0] || app.description}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ============================================
+// 横向滚动卡片
+// ============================================
+function HorizontalAppCard({
+  app,
+  onTap,
+  fallbackColorIndex = 0,
+}: {
+  app: MiniappManifest;
+  onTap: () => void;
+  fallbackColorIndex?: number;
+}) {
+  const gradient = getAppGradient(app, fallbackColorIndex);
+
+  return (
+    <button
+      onClick={onTap}
+      className={cn(
+        'relative w-44 shrink-0 overflow-hidden rounded-2xl text-left',
+        'shadow-lg transition-all duration-200 active:scale-[0.96]',
+        'snap-start scroll-ml-5',
+      )}
+    >
+      <div className={cn('absolute inset-0 bg-gradient-to-br', gradient)} />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_-10%,rgba(255,255,255,0.25),transparent_40%)]" />
+
+      <div className="relative flex h-[160px] flex-col p-4">
+        <MiniappIcon src={app.icon} name={app.name} size="lg" customSize={56} glass className="mb-auto" />
+        <div>
+          <h3 className="truncate text-base font-bold text-white">{app.name}</h3>
+          <p className="mt-0.5 truncate text-xs text-white/70">{app.description}</p>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ============================================
+// 应用列表项
+// ============================================
+function AppListItem({
+  app,
+  onTap,
+  onOpen,
+  rank,
+  showRank = false,
+}: {
+  app: MiniappManifest;
+  onTap: () => void;
+  onOpen: () => void;
+  rank?: number;
+  showRank?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-3 py-3">
+      {showRank && rank !== undefined && (
+        <span className="text-muted-foreground/50 w-6 text-center text-lg font-bold">{rank}</span>
+      )}
+
+      <button onClick={onTap} className="shrink-0">
+        <MiniappIcon src={app.icon} name={app.name} size="lg" customSize={64} shadow="sm" />
+      </button>
+
+      <button onClick={onTap} className="min-w-0 flex-1 text-left">
+        <div className="flex items-center gap-1.5">
+          <h3 className="truncate font-semibold">{app.name}</h3>
+          {app.beta && (
+            <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-600 dark:bg-amber-900/40 dark:text-amber-400">
+              Beta
+            </span>
+          )}
+        </div>
+        <p className="text-muted-foreground mt-0.5 truncate text-xs">{app.description}</p>
+      </button>
+
+      <Button
+        size="sm"
+        variant="secondary"
+        className="h-8 shrink-0 rounded-full px-5 text-xs font-bold"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpen();
+        }}
+      >
+        获取
+      </Button>
+    </div>
+  );
+}
+
+// ============================================
+// 空状态
+// ============================================
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center px-5 py-20 text-center">
+      <div className="bg-muted mb-4 flex size-20 items-center justify-center rounded-full">
+        <IconApps className="text-muted-foreground size-10" stroke={1.5} />
+      </div>
+      <h2 className="mb-1 text-lg font-semibold">{message}</h2>
+    </div>
+  );
+}
+
+// ============================================
+// DiscoverPage 组件
+// ============================================
+export interface DiscoverPageRef {
+  focusSearch: () => void;
+}
+
+export interface DiscoverPageProps {
+  apps: MiniappManifest[];
+  featuredApp?: MiniappManifest;
+  featuredApps: MiniappManifest[];
+  recommendedApps: MiniappManifest[];
+  hotApps: MiniappManifest[];
+  onAppDetail: (app: MiniappManifest) => void;
+  onAppOpen: (app: MiniappManifest) => void;
+}
+
+export const DiscoverPage = forwardRef<DiscoverPageRef, DiscoverPageProps>(function DiscoverPage(
+  { apps, featuredApp, featuredApps, recommendedApps, hotApps, onAppDetail, onAppOpen },
+  ref,
+) {
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    focusSearch: () => {
+      searchInputRef.current?.focus();
+    },
+  }));
+
+  return (
+    <div className="discover-page h-full overflow-y-auto">
+      {/* BigHeader - sticky，scroll-driven animation */}
+      <header className="discover-header bg-background/80 sticky top-0 z-10 px-5 pt-12 pb-4 backdrop-blur-xl">
+        <div className="mb-4 flex items-center justify-between">
+          <p className="text-muted-foreground text-sm font-medium">{getTodayDate()}</p>
+        </div>
+
+        {/* 搜索框 */}
+        <div className="relative">
+          <IconSearch className="text-muted-foreground absolute top-1/2 left-4 size-5 -translate-y-1/2" stroke={1.5} />
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="搜索应用"
+            className={cn(
+              'bg-muted/60 w-full rounded-xl py-3 pr-4 pl-12',
+              'placeholder:text-muted-foreground/60 text-base',
+              'focus:ring-primary/30 focus:ring-2 focus:outline-none',
+              'transition-all duration-200',
+            )}
+          />
+        </div>
+      </header>
+
+      {/* 内容区 */}
+      <div className="space-y-8">
+        {apps.length === 0 ? (
+          <EmptyState message="暂无应用" />
+        ) : (
+          <>
+            {featuredApp && (
+              <section className="px-5">
+                <FeaturedStoryCard app={featuredApp} onTap={() => onAppDetail(featuredApp)} />
+              </section>
+            )}
+
+            {recommendedApps.length > 0 && (
+              <section>
+                <div className="mb-3 flex items-center justify-between px-5">
+                  <h2 className="text-xl font-bold">推荐</h2>
+                  <button className="text-primary flex items-center text-sm font-medium">
+                    查看全部
+                    <IconChevronRight className="size-4" />
+                  </button>
+                </div>
+                <div
+                  className={cn(
+                    'flex gap-3 overflow-x-auto px-5 pb-3',
+                    'snap-x snap-mandatory scroll-smooth',
+                    '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                  )}
+                >
+                  {recommendedApps.map((app, i) => (
+                    <HorizontalAppCard key={app.id} app={app} onTap={() => onAppDetail(app)} fallbackColorIndex={i} />
+                  ))}
+                </div>
+              </section>
+            )}
+
+            <section className="px-5">
+              <h2 className="mb-3 text-xl font-bold">热门应用</h2>
+              <div className="bg-card divide-y rounded-2xl border">
+                {hotApps.map((app, i) => (
+                  <div key={app.id} className="px-4">
+                    <AppListItem
+                      app={app}
+                      rank={i + 1}
+                      showRank
+                      onTap={() => onAppDetail(app)}
+                      onOpen={() => onAppOpen(app)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            {featuredApps.length > 1 && (
+              <section className="px-5">
+                <FeaturedStoryCard app={featuredApps[1]} onTap={() => onAppDetail(featuredApps[1])} />
+              </section>
+            )}
+          </>
+        )}
+
+        {/* TabBar spacer */}
+        <div className="h-[var(--tab-bar-height)]" />
+      </div>
+    </div>
+  );
+});
diff --git a/src/components/ecosystem/index.ts b/src/components/ecosystem/index.ts
new file mode 100644
index 00000000..5d396eb1
--- /dev/null
+++ b/src/components/ecosystem/index.ts
@@ -0,0 +1,37 @@
+export {
+  MiniappIcon,
+  MiniappIconWithLabel,
+  MiniappIconGrid,
+  MINIAPP_ICON_SIZES,
+  type MiniappIconProps,
+  type MiniappIconSize,
+  type MiniappBadge,
+  type MiniappIconWithLabelProps,
+  type MiniappIconGridProps,
+} from './miniapp-icon'
+
+export {
+  SourceIcon,
+  type SourceIconProps,
+} from './source-icon'
+
+export {
+  DiscoverPage,
+  type DiscoverPageRef,
+  type DiscoverPageProps,
+} from './discover-page'
+
+export {
+  MyAppsPage,
+  type MyAppsPageProps,
+} from './my-apps-page'
+
+export {
+  IOSSearchCapsule,
+  type IOSSearchCapsuleProps,
+} from './ios-search-capsule'
+
+export {
+  IOSWallpaper,
+  type IOSWallpaperProps,
+} from './ios-wallpaper'
diff --git a/src/components/ecosystem/ios-search-capsule.tsx b/src/components/ecosystem/ios-search-capsule.tsx
new file mode 100644
index 00000000..a5f01a24
--- /dev/null
+++ b/src/components/ecosystem/ios-search-capsule.tsx
@@ -0,0 +1,27 @@
+import { IconSearch } from '@tabler/icons-react';
+import { cn } from '@/lib/utils';
+
+export interface IOSSearchCapsuleProps {
+  onClick: () => void;
+  className?: string;
+}
+
+export function IOSSearchCapsule({ onClick, className }: IOSSearchCapsuleProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'flex items-center justify-center gap-2',
+        'bg-muted/50 backdrop-blur-sm',
+        'h-9 w-full max-w-[200px] rounded-full',
+        'text-muted-foreground text-sm font-medium',
+        'transition-all duration-200',
+        'active:scale-95 active:bg-muted/70',
+        className,
+      )}
+    >
+      <IconSearch className="size-4" stroke={2} />
+      <span>搜索</span>
+    </button>
+  );
+}
diff --git a/src/components/ecosystem/ios-wallpaper.tsx b/src/components/ecosystem/ios-wallpaper.tsx
new file mode 100644
index 00000000..7a107e51
--- /dev/null
+++ b/src/components/ecosystem/ios-wallpaper.tsx
@@ -0,0 +1,94 @@
+import { useMemo, useState, useEffect } from 'react';
+import { useStore } from '@tanstack/react-store';
+import { preferencesStore } from '@/stores/preferences';
+import { cn } from '@/lib/utils';
+
+type WallpaperVariant = 'color-dodge' | 'hard-light' | 'rainbow' | 'vivid';
+
+const darkWallpapers: WallpaperVariant[] = ['color-dodge', 'hard-light'];
+const lightWallpapers: WallpaperVariant[] = ['rainbow', 'vivid'];
+
+const ANIMATION_DURATION = 10_000; // 动画持续 10 秒
+
+function resolveIsDark(theme: 'light' | 'dark' | 'system'): boolean {
+  if (theme === 'dark') return true;
+  if (theme === 'light') return false;
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function pickRandom<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function getMsUntilNextHour(): number {
+  const now = new Date();
+  const nextHour = new Date(now);
+  nextHour.setHours(now.getHours() + 1, 0, 0, 0);
+  return nextHour.getTime() - now.getTime();
+}
+
+export interface IOSWallpaperProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function IOSWallpaper({ className, children }: IOSWallpaperProps) {
+  const theme = useStore(preferencesStore, (s) => s.theme);
+  const isDark = resolveIsDark(theme);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // 每次组件挂载时随机选择（dark/light 各一个）
+  const selectedWallpapers = useMemo(() => ({
+    dark: pickRandom(darkWallpapers),
+    light: pickRandom(lightWallpapers),
+  }), []);
+
+  const variant = isDark ? selectedWallpapers.dark : selectedWallpapers.light;
+
+  // 整点报时动画
+  useEffect(() => {
+    let animationTimer: ReturnType<typeof setTimeout>;
+    let hourlyTimer: ReturnType<typeof setTimeout>;
+
+    const triggerAnimation = () => {
+      setIsAnimating(true);
+      animationTimer = setTimeout(() => setIsAnimating(false), ANIMATION_DURATION);
+    };
+
+    const scheduleNextHour = () => {
+      const msUntilNextHour = getMsUntilNextHour();
+      hourlyTimer = setTimeout(() => {
+        triggerAnimation();
+        // 每小时重新调度
+        scheduleNextHour();
+      }, msUntilNextHour);
+    };
+
+    scheduleNextHour();
+
+    return () => {
+      clearTimeout(animationTimer);
+      clearTimeout(hourlyTimer);
+    };
+  }, []);
+
+  return (
+    <div className={cn(
+      'ios-wallpaper relative h-full w-full',
+      `ios-wallpaper--${variant}`,
+      isAnimating && 'ios-wallpaper--animating',
+      className
+    )}>
+      {/* Hard Light 需要额外的层 */}
+      {variant === 'hard-light' && (
+        <>
+          <div className="ios-wallpaper__stars" />
+          <div className="ios-wallpaper__glow" />
+          <div className="ios-wallpaper__highlight" />
+        </>
+      )}
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ecosystem/miniapp-icon.tsx b/src/components/ecosystem/miniapp-icon.tsx
new file mode 100644
index 00000000..bf892182
--- /dev/null
+++ b/src/components/ecosystem/miniapp-icon.tsx
@@ -0,0 +1,383 @@
+/**
+ * Miniapp Icon Component
+ * 
+ * 统一的小程序图标渲染组件，遵循 iOS App Icon 设计规范
+ * 
+ * ## 图标规格标准
+ * 
+ * | Size   | Dimensions | Border Radius | Use Case                    |
+ * |--------|------------|---------------|-----------------------------|
+ * | xs     | 32x32      | 7px           | 列表紧凑模式、通知          |
+ * | sm     | 40x40      | 9px           | 搜索结果、小列表            |
+ * | md     | 48x48      | 10px          | 标准列表项                  |
+ * | lg     | 60x60      | 13px          | iOS 桌面风格、网格          |
+ * | xl     | 80x80      | 18px          | 详情页、精选卡片            |
+ * | 2xl    | 120x120    | 27px          | 大型展示、启动页            |
+ * 
+ * ## 圆角计算公式
+ * borderRadius = size * 0.22 (iOS 标准比例)
+ * 
+ * ## 设计规范
+ * - 图标应为正方形
+ * - 支持 SVG、PNG、WebP 格式
+ * - 推荐尺寸：1024x1024 原图
+ * - 背景不透明（iOS 风格）
+ */
+
+import { forwardRef, useState } from 'react'
+import { IconApps, IconSparkles } from '@tabler/icons-react'
+import { cn } from '@/lib/utils'
+
+// ============================================
+// 图标尺寸配置
+// ============================================
+export const MINIAPP_ICON_SIZES = {
+  xs: { size: 32, radius: 7 },
+  sm: { size: 40, radius: 9 },
+  md: { size: 48, radius: 10 },
+  lg: { size: 60, radius: 13 },
+  xl: { size: 80, radius: 18 },
+  '2xl': { size: 120, radius: 27 },
+} as const
+
+export type MiniappIconSize = keyof typeof MINIAPP_ICON_SIZES
+
+// ============================================
+// 徽章类型
+// ============================================
+export type MiniappBadge = 'beta' | 'new' | 'update' | 'none'
+
+// ============================================
+// Props
+// ============================================
+export interface MiniappIconProps {
+  /** 图标 URL */
+  src?: string | null
+  /** 应用名称（用于 alt 和占位符） */
+  name?: string
+  /** 图标尺寸 */
+  size?: MiniappIconSize
+  /** 自定义尺寸（覆盖 size） */
+  customSize?: number
+  /** 徽章类型 */
+  badge?: MiniappBadge
+  /** 是否显示阴影 */
+  shadow?: boolean | 'sm' | 'md' | 'lg'
+  /** 是否显示边框 */
+  border?: boolean
+  /** 是否为玻璃态背景（用于深色/渐变背景上） */
+  glass?: boolean
+  /** 加载状态 */
+  loading?: boolean
+  /** 禁用状态 */
+  disabled?: boolean
+  /** 自定义类名 */
+  className?: string
+  /** 点击事件 */
+  onClick?: () => void
+}
+
+// ============================================
+// 组件
+// ============================================
+export const MiniappIcon = forwardRef<HTMLDivElement, MiniappIconProps>(
+  function MiniappIcon(
+    {
+      src,
+      name = 'App',
+      size = 'md',
+      customSize,
+      badge = 'none',
+      shadow = false,
+      border = true,
+      glass = false,
+      loading = false,
+      disabled = false,
+      className,
+      onClick,
+    },
+    ref
+  ) {
+    const [imageError, setImageError] = useState(false)
+    const [imageLoaded, setImageLoaded] = useState(false)
+
+    // 计算实际尺寸
+    const sizeConfig = MINIAPP_ICON_SIZES[size]
+    const actualSize = customSize ?? sizeConfig.size
+    const actualRadius = customSize 
+      ? Math.round(customSize * 0.22) 
+      : sizeConfig.radius
+
+    // 阴影类名
+    const shadowClass = shadow === true || shadow === 'md'
+      ? 'shadow-lg shadow-black/10 dark:shadow-black/30'
+      : shadow === 'sm'
+      ? 'shadow-md shadow-black/5 dark:shadow-black/20'
+      : shadow === 'lg'
+      ? 'shadow-xl shadow-black/15 dark:shadow-black/40'
+      : ''
+
+    // 是否显示占位符
+    const showPlaceholder = !src || imageError
+
+    // 徽章位置和大小（基于图标尺寸）
+    const badgeSize = Math.max(16, actualSize * 0.3)
+    const badgeOffset = -badgeSize * 0.2
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative inline-flex shrink-0",
+          onClick && "cursor-pointer",
+          disabled && "opacity-50 pointer-events-none",
+          className
+        )}
+        style={{ width: actualSize, height: actualSize }}
+        onClick={onClick}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        {/* 主图标容器 */}
+        <div
+          className={cn(
+            "size-full overflow-hidden relative",
+            border && !glass && "ring-1 ring-black/5 dark:ring-white/10",
+            shadowClass,
+            // 玻璃态：白色半透明背景 + 模糊
+            glass && "bg-white/20 backdrop-blur-md",
+            !glass && !showPlaceholder && "bg-muted",
+            showPlaceholder && "bg-gradient-to-br from-muted to-muted/60"
+          )}
+          style={{ 
+            borderRadius: actualRadius,
+            // 玻璃态：光照边框效果
+            ...(glass ? {
+              boxShadow: `
+                inset 0 1px 1px rgba(255,255,255,0.6),
+                inset 0 -1px 1px rgba(0,0,0,0.1),
+                0 0 0 1.5px rgba(255,255,255,0.4),
+                0 4px 12px rgba(0,0,0,0.15)
+              `
+            } : {})
+          }}
+        >
+          {/* 加载状态 */}
+          {loading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-muted/80">
+              <div 
+                className="animate-spin rounded-full border-2 border-primary border-t-transparent"
+                style={{ width: actualSize * 0.4, height: actualSize * 0.4 }}
+              />
+            </div>
+          )}
+
+          {/* 图片 */}
+          {src && !imageError && (
+            <img
+              src={src}
+              alt={name}
+              className={cn(
+                "size-full object-cover transition-opacity duration-200",
+                !imageLoaded && "opacity-0"
+              )}
+              onLoad={() => setImageLoaded(true)}
+              onError={() => setImageError(true)}
+              draggable={false}
+            />
+          )}
+
+          {/* 玻璃态高光覆盖层 */}
+          {glass && (
+            <div 
+              className="absolute inset-0 pointer-events-none"
+              style={{
+                borderRadius: actualRadius,
+                background: 'linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 40%, transparent 60%)',
+              }}
+            />
+          )}
+
+          {/* 占位符 */}
+          {showPlaceholder && !loading && (
+            <div className="size-full flex items-center justify-center">
+              <IconApps 
+                className="text-muted-foreground/60"
+                style={{ width: actualSize * 0.5, height: actualSize * 0.5 }}
+                stroke={1.5}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* 徽章 */}
+        {badge !== 'none' && (
+          <Badge 
+            type={badge} 
+            size={badgeSize} 
+            offset={badgeOffset}
+          />
+        )}
+      </div>
+    )
+  }
+)
+
+// ============================================
+// 徽章组件
+// ============================================
+interface BadgeProps {
+  type: Exclude<MiniappBadge, 'none'>
+  size: number
+  offset: number
+}
+
+function Badge({ type, size, offset }: BadgeProps) {
+  const configs = {
+    beta: {
+      label: 'β',
+      bg: 'bg-amber-500',
+      color: 'text-white',
+    },
+    new: {
+      icon: IconSparkles,
+      bg: 'bg-blue-500',
+      color: 'text-white',
+    },
+    update: {
+      label: '!',
+      bg: 'bg-red-500',
+      color: 'text-white',
+    },
+  }
+
+  const config = configs[type]
+
+  return (
+    <div
+      className={cn(
+        "absolute flex items-center justify-center rounded-full",
+        "ring-2 ring-background",
+        config.bg,
+        config.color
+      )}
+      style={{
+        width: size,
+        height: size,
+        top: offset,
+        right: offset,
+        fontSize: size * 0.6,
+        fontWeight: 700,
+      }}
+    >
+      {'icon' in config ? (
+        <config.icon style={{ width: size * 0.65, height: size * 0.65 }} stroke={2} />
+      ) : (
+        config.label
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// 带标签的图标组件（iOS 桌面风格）
+// ============================================
+export interface MiniappIconWithLabelProps extends Omit<MiniappIconProps, 'size'> {
+  /** 图标尺寸，默认 lg */
+  size?: MiniappIconSize
+  /** 应用名称 */
+  name: string
+  /** 最大行数 */
+  maxLines?: 1 | 2
+  /** 是否显示名称 */
+  showLabel?: boolean
+}
+
+export function MiniappIconWithLabel({
+  name,
+  size = 'lg',
+  maxLines = 2,
+  showLabel = true,
+  className,
+  ...iconProps
+}: MiniappIconWithLabelProps) {
+  const sizeConfig = MINIAPP_ICON_SIZES[size]
+  
+  // 根据图标尺寸计算字体大小
+  const fontSize = Math.max(10, Math.min(13, sizeConfig.size * 0.18))
+  
+  return (
+    <div 
+      className={cn(
+        "flex flex-col items-center gap-1.5",
+        className
+      )}
+    >
+      <MiniappIcon 
+        name={name} 
+        size={size} 
+        shadow="sm"
+        {...iconProps} 
+      />
+      {showLabel && (
+        <span
+          className={cn(
+            "text-center font-medium leading-tight",
+            maxLines === 1 ? "truncate" : "line-clamp-2"
+          )}
+          style={{
+            fontSize,
+            maxWidth: sizeConfig.size + 16,
+          }}
+        >
+          {name}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// 图标网格组件
+// ============================================
+export interface MiniappIconGridProps {
+  /** 列数 */
+  columns?: 3 | 4 | 5 | 6
+  /** 图标尺寸 */
+  iconSize?: MiniappIconSize
+  /** 间距 */
+  gap?: 'sm' | 'md' | 'lg'
+  /** 子元素 */
+  children: React.ReactNode
+  /** 自定义类名 */
+  className?: string
+}
+
+export function MiniappIconGrid({
+  columns = 4,
+  iconSize = 'lg',
+  gap = 'md',
+  children,
+  className,
+}: MiniappIconGridProps) {
+  const gapClass = {
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+  }[gap]
+
+  return (
+    <div
+      className={cn(
+        "grid justify-items-center",
+        gapClass,
+        className
+      )}
+      style={{
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/ecosystem/my-apps-page.stories.tsx b/src/components/ecosystem/my-apps-page.stories.tsx
new file mode 100644
index 00000000..fe9d6857
--- /dev/null
+++ b/src/components/ecosystem/my-apps-page.stories.tsx
@@ -0,0 +1,192 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn, expect, waitFor } from '@storybook/test';
+import { MyAppsPage } from './my-apps-page';
+import type { MiniappManifest } from '@/services/ecosystem';
+
+const mockApps: Array<{ app: MiniappManifest; lastUsed: number }> = [
+  {
+    app: {
+      id: 'app-1',
+      name: '转账助手',
+      description: '快速安全的转账工具',
+      icon: 'https://picsum.photos/seed/app1/200',
+      version: '1.0.0',
+      permissions: [],
+    },
+    lastUsed: Date.now(),
+  },
+  {
+    app: {
+      id: 'app-2',
+      name: 'DeFi 收益',
+      description: '一站式 DeFi 收益管理',
+      icon: 'https://picsum.photos/seed/app2/200',
+      version: '1.0.0',
+      permissions: [],
+    },
+    lastUsed: Date.now() - 1000,
+  },
+  {
+    app: {
+      id: 'app-3',
+      name: 'NFT 市场',
+      description: '发现和交易 NFT',
+      icon: 'https://picsum.photos/seed/app3/200',
+      version: '1.0.0',
+      permissions: [],
+    },
+    lastUsed: Date.now() - 2000,
+  },
+  {
+    app: {
+      id: 'app-4',
+      name: '链上投票',
+      description: '参与 DAO 治理投票',
+      icon: 'https://picsum.photos/seed/app4/200',
+      version: '1.0.0',
+      permissions: [],
+    },
+    lastUsed: Date.now() - 3000,
+  },
+  {
+    app: {
+      id: 'app-5',
+      name: '跨链桥',
+      description: '多链资产跨链转移',
+      icon: 'https://picsum.photos/seed/app5/200',
+      version: '1.0.0',
+      permissions: [],
+    },
+    lastUsed: Date.now() - 4000,
+  },
+  {
+    app: {
+      id: 'app-6',
+      name: '质押挖矿',
+      description: '质押代币获取收益',
+      icon: 'https://picsum.photos/seed/app6/200',
+      version: '1.0.0',
+      permissions: [],
+    },
+    lastUsed: Date.now() - 5000,
+  },
+];
+
+const meta: Meta<typeof MyAppsPage> = {
+  title: 'Ecosystem/MyAppsPage',
+  component: MyAppsPage,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[600px] bg-background">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    onSearchClick: fn(),
+    onAppOpen: fn(),
+    onAppDetail: fn(),
+    onAppRemove: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MyAppsPage>;
+
+export const Default: Story = {
+  args: {
+    apps: mockApps,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    apps: [],
+  },
+};
+
+export const FewApps: Story = {
+  args: {
+    apps: mockApps.slice(0, 2),
+  },
+};
+
+export const ManyApps: Story = {
+  args: {
+    apps: [
+      ...mockApps,
+      ...mockApps.map((item, i) => ({
+        ...item,
+        app: { ...item.app, id: `app-extra-${i}`, name: `应用 ${i + 7}` },
+      })),
+    ],
+  },
+};
+
+// 长按测试 - 验证 popover 菜单显示
+export const LongPressTest: Story = {
+  args: {
+    apps: mockApps,
+  },
+  play: async ({ canvas, step }) => {
+    await step('检查图标是否渲染', async () => {
+      const icon = canvas.getByText('转账助手');
+      await expect(icon).toBeInTheDocument();
+    });
+
+    await step('右键点击图标触发菜单', async () => {
+      const iconButton = canvas.getByText('转账助手').closest('button') as HTMLElement;
+      
+      // 触发 contextmenu 事件（模拟右键/长按）
+      iconButton.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }));
+      
+      // 等待 popover 打开
+      await waitFor(() => {
+        const popover = document.querySelector('.ios-desktop-icon:popover-open');
+        expect(popover).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    await step('验证菜单内容', async () => {
+      await waitFor(() => {
+        const menu = document.querySelector('.ios-context-menu');
+        expect(menu).toBeVisible();
+      });
+    });
+  },
+};
+
+// 搜索胶囊点击测试
+export const SearchCapsuleTest: Story = {
+  args: {
+    apps: mockApps,
+    onSearchClick: fn(),
+  },
+  play: async ({ args, canvas, step, userEvent }) => {
+    await step('点击搜索胶囊', async () => {
+      const searchCapsule = canvas.getByText('搜索');
+      await userEvent.click(searchCapsule);
+      await expect(args.onSearchClick).toHaveBeenCalled();
+    });
+  },
+};
+
+// 点击图标测试
+export const TapIconTest: Story = {
+  args: {
+    apps: mockApps,
+    onAppOpen: fn(),
+  },
+  play: async ({ args, canvas, step, userEvent }) => {
+    await step('点击应用图标', async () => {
+      const iconButton = canvas.getByText('转账助手').closest('button') as HTMLElement;
+      await userEvent.click(iconButton);
+      await expect(args.onAppOpen).toHaveBeenCalled();
+    });
+  },
+};
diff --git a/src/components/ecosystem/my-apps-page.tsx b/src/components/ecosystem/my-apps-page.tsx
new file mode 100644
index 00000000..06ed459d
--- /dev/null
+++ b/src/components/ecosystem/my-apps-page.tsx
@@ -0,0 +1,303 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { IconDownload, IconPlayerPlay, IconInfoCircle, IconTrash } from '@tabler/icons-react';
+import { cn } from '@/lib/utils';
+import { MiniappIcon } from './miniapp-icon';
+import { SourceIcon } from './source-icon';
+import { IOSSearchCapsule } from './ios-search-capsule';
+import { IOSWallpaper } from './ios-wallpaper';
+import type { MiniappManifest } from '@/services/ecosystem';
+
+// ============================================
+// iOS 桌面图标（带 Popover 菜单）
+// ============================================
+interface IOSDesktopIconProps {
+  app: MiniappManifest;
+  onTap: () => void;
+  onOpen: () => void;
+  onDetail: () => void;
+  onRemove: () => void;
+}
+
+function IOSDesktopIcon({ app, onTap, onOpen, onDetail, onRemove }: IOSDesktopIconProps) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const didLongPress = useRef(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+
+  const showMenu = () => {
+    const popover = popoverRef.current;
+    if (!popover) return;
+    
+    // 计算位置（在 showPopover 之前，popover 还在文档流中）
+    const rect = popover.getBoundingClientRect();
+    
+    // 设置 CSS 变量（通过 !important 生效）
+    popover.style.setProperty('--popover-top', `${rect.top}px`);
+    popover.style.setProperty('--popover-left', `${rect.left}px`);
+    
+    // 菜单位置（图标上方）
+    const menuWidth = 224;
+    const menuHeight = 180;
+    const gap = 16;
+    
+    let menuTop = rect.top - menuHeight - gap;
+    let menuLeft = rect.left + rect.width / 2 - menuWidth / 2;
+    
+    if (menuLeft < 16) menuLeft = 16;
+    if (menuLeft + menuWidth > window.innerWidth - 16) {
+      menuLeft = window.innerWidth - menuWidth - 16;
+    }
+    if (menuTop < 16) {
+      menuTop = rect.bottom + gap;
+    }
+    
+    setMenuPosition({ top: menuTop, left: menuLeft });
+    popover.showPopover();
+    setIsOpen(true);
+  };
+
+  const hideMenu = () => {
+    const popover = popoverRef.current;
+    if (!popover) return;
+    
+    // 触发退出动画
+    const menu = popover.querySelector('.ios-context-menu');
+    menu?.classList.add('closing');
+    popover.style.setProperty('--backdrop-opacity', '0');
+    
+    // 等待动画完成后隐藏 popover
+    setTimeout(() => {
+      popover.hidePopover();
+      setIsOpen(false);
+      menu?.classList.remove('closing');
+      popover.style.removeProperty('--backdrop-opacity');
+    }, 200);
+  };
+
+  // 监听 popover toggle 事件
+  useEffect(() => {
+    const el = popoverRef.current;
+    if (!el) return;
+    
+    const handleToggle = (e: ToggleEvent) => {
+      setIsOpen(e.newState === 'open');
+    };
+    
+    el.addEventListener('toggle', handleToggle);
+    return () => el.removeEventListener('toggle', handleToggle);
+  }, []);
+
+  const handleTouchStart = () => {
+    didLongPress.current = false;
+    longPressTimer.current = setTimeout(() => {
+      didLongPress.current = true;
+      showMenu();
+    }, 500);
+  };
+
+  const handleTouchMove = () => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+    if (!didLongPress.current) {
+      e.preventDefault();
+      onTap();
+    }
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    showMenu();
+  };
+
+  const handleAction = (action: () => void) => {
+    hideMenu();
+    action();
+  };
+
+  const menuItems = [
+    { icon: IconPlayerPlay, label: '打开', action: onOpen },
+    { icon: IconInfoCircle, label: '详情', action: onDetail },
+    { icon: IconTrash, label: '移除', action: onRemove, destructive: true },
+  ];
+
+  return (
+    // 占位容器（在网格中保持位置）
+    <div className="ios-icon-wrapper">
+      {/* Popover（打开时提升到顶层） */}
+      <div
+        ref={popoverRef}
+        popover="manual"
+        className="ios-desktop-icon"
+      >
+        {/* 点击拦截层（视觉效果由 ::backdrop 提供） */}
+        {isOpen && (
+          <div 
+            className="fixed inset-0 ios-backdrop-clickarea"
+            style={{ zIndex: -1 }}
+            onClick={hideMenu}
+          />
+        )}
+
+        {/* 图标按钮 */}
+        <button
+          className={cn(
+            'flex flex-col items-center gap-1.5 p-2',
+            'touch-manipulation select-none',
+            'transition-all duration-200 ease-out',
+            'active:scale-95',
+          )}
+          onClick={onTap}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          onContextMenu={handleContextMenu}
+        >
+          <div className="relative">
+            <MiniappIcon
+              src={app.icon}
+              name={app.name}
+              size="lg"
+              customSize={60}
+              shadow="md"
+            />
+            <div className="absolute -top-1 -right-1">
+              <SourceIcon src={app.sourceIcon} name={app.sourceName} size="sm" />
+            </div>
+          </div>
+          <span className="line-clamp-2 max-w-[72px] text-center text-[11px] leading-tight font-medium text-foreground/90">
+            {app.name}
+          </span>
+        </button>
+
+        {/* 菜单 */}
+        {isOpen && (
+          <div
+            className="ios-context-menu fixed w-56"
+            style={{ top: menuPosition.top, left: menuPosition.left }}
+          >
+            <div className="overflow-hidden rounded-2xl border border-white/10 bg-popover/95 shadow-2xl shadow-black/40 backdrop-blur-xl">
+              <div className="border-b border-white/10 px-4 py-3">
+                <h3 className="truncate text-sm font-semibold">{app.name}</h3>
+                <p className="text-muted-foreground mt-0.5 truncate text-xs">{app.description}</p>
+              </div>
+              <div className="py-1">
+                {menuItems.map((item, index) => (
+                  <button
+                    key={item.label}
+                    onClick={() => handleAction(item.action)}
+                    className={cn(
+                      'flex w-full items-center gap-3 px-4 py-2.5',
+                      'text-sm font-medium',
+                      'transition-colors duration-100',
+                      'active:bg-white/10',
+                      item.destructive ? 'text-red-500 dark:text-red-400' : 'text-foreground',
+                      index === menuItems.length - 1 && 'mt-1 border-t border-white/10 pt-2.5',
+                    )}
+                  >
+                    <item.icon className="size-5" stroke={1.5} />
+                    <span>{item.label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// 空状态
+// ============================================
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center px-5 py-20 text-center">
+      <div className="bg-muted/50 mb-4 flex size-20 items-center justify-center rounded-full">
+        <IconDownload className="text-muted-foreground size-10" stroke={1.5} />
+      </div>
+      <h2 className="mb-1 text-lg font-semibold">还没有使用过的应用</h2>
+      <p className="text-muted-foreground text-sm">去「发现」页面探索吧</p>
+    </div>
+  );
+}
+
+// ============================================
+// MyAppsPage 组件
+// ============================================
+export interface MyAppsPageProps {
+  apps: Array<{ app: MiniappManifest; lastUsed: number }>;
+  onSearchClick: () => void;
+  onAppOpen: (app: MiniappManifest) => void;
+  onAppDetail: (app: MiniappManifest) => void;
+  onAppRemove: (appId: string) => void;
+}
+
+export function MyAppsPage({ apps, onSearchClick, onAppOpen, onAppDetail, onAppRemove }: MyAppsPageProps) {
+  const columns = 4;
+  const pageSize = columns * 6;
+  const pages = Math.ceil(apps.length / pageSize);
+
+  return (
+    <IOSWallpaper className="my-apps-page">
+      <div className="relative z-10 h-full overflow-y-auto">
+        {/* 顶部区域 - 搜索胶囊 */}
+        <div className="flex justify-center px-5 pt-14 pb-6">
+          <IOSSearchCapsule onClick={onSearchClick} />
+        </div>
+
+        {/* 内容区 */}
+        {apps.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <div className="px-4 pb-8">
+            {/* iOS 桌面网格 */}
+            <div
+              className="grid justify-items-center gap-y-4"
+              style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
+            >
+              {apps.map(({ app }) => (
+                <IOSDesktopIcon
+                  key={app.id}
+                  app={app}
+                  onTap={() => onAppOpen(app)}
+                  onOpen={() => onAppOpen(app)}
+                  onDetail={() => onAppDetail(app)}
+                  onRemove={() => onAppRemove(app.id)}
+                />
+              ))}
+            </div>
+
+            {/* 页面指示器 */}
+            {pages > 1 && (
+              <div className="mt-6 flex justify-center gap-1.5">
+                {Array.from({ length: pages }).map((_, i) => (
+                  <div
+                    key={i}
+                    className={cn(
+                      'size-2 rounded-full transition-colors',
+                      i === 0 ? 'bg-foreground/80' : 'bg-foreground/20',
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* TabBar spacer */}
+        <div className="h-[var(--tab-bar-height)]" />
+      </div>
+    </IOSWallpaper>
+  );
+}
diff --git a/src/components/ecosystem/source-icon.tsx b/src/components/ecosystem/source-icon.tsx
new file mode 100644
index 00000000..9697d0c0
--- /dev/null
+++ b/src/components/ecosystem/source-icon.tsx
@@ -0,0 +1,81 @@
+/**
+ * Source Icon Component
+ * 
+ * 订阅源图标组件
+ * - 有自定义图标时显示图标
+ * - 没有图标时显示 HTTPS 锁图标（表示安全来源）
+ */
+
+import { forwardRef } from 'react'
+import { IconLock } from '@tabler/icons-react'
+import { cn } from '@/lib/utils'
+
+export interface SourceIconProps {
+  /** 图标 URL */
+  src?: string | null
+  /** 订阅源名称 */
+  name?: string
+  /** 尺寸 */
+  size?: 'sm' | 'md' | 'lg'
+  /** 自定义类名 */
+  className?: string
+}
+
+const SIZES = {
+  sm: { icon: 24, lock: 14 },
+  md: { icon: 32, lock: 18 },
+  lg: { icon: 40, lock: 22 },
+}
+
+export const SourceIcon = forwardRef<HTMLDivElement, SourceIconProps>(
+  function SourceIcon({ src, name = 'Source', size = 'md', className }, ref) {
+    const { icon: iconSize, lock: lockSize } = SIZES[size]
+    const radius = Math.round(iconSize * 0.22)
+
+    // 有自定义图标
+    if (src) {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "shrink-0 overflow-hidden bg-muted",
+            "ring-1 ring-border/50",
+            className
+          )}
+          style={{ 
+            width: iconSize, 
+            height: iconSize, 
+            borderRadius: radius 
+          }}
+        >
+          <img 
+            src={src} 
+            alt={name} 
+            className="size-full object-cover"
+            draggable={false}
+          />
+        </div>
+      )
+    }
+
+    // 默认 HTTPS 锁图标
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "shrink-0 flex items-center justify-center",
+          "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+          "ring-1 ring-emerald-500/20",
+          className
+        )}
+        style={{ 
+          width: iconSize, 
+          height: iconSize, 
+          borderRadius: radius 
+        }}
+      >
+        <IconLock size={lockSize} stroke={2} />
+      </div>
+    )
+  }
+)
diff --git a/src/components/home/content-tabs.stories.tsx b/src/components/layout/swipeable-tabs.stories.tsx
similarity index 87%
rename from src/components/home/content-tabs.stories.tsx
rename to src/components/layout/swipeable-tabs.stories.tsx
index e02ad448..b6c52134 100644
--- a/src/components/home/content-tabs.stories.tsx
+++ b/src/components/layout/swipeable-tabs.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { ContentTabs, SwipeableContentTabs } from './content-tabs'
+import { Tabs, SwipeableTabs } from './swipeable-tabs'
 import { fn } from '@storybook/test'
 
 const AssetsContent = () => (
@@ -54,9 +54,9 @@ const HistoryContent = () => (
   </div>
 )
 
-const meta: Meta<typeof ContentTabs> = {
-  title: 'Home/ContentTabs',
-  component: ContentTabs,
+const meta: Meta<typeof Tabs> = {
+  title: 'Layout/Tabs',
+  component: Tabs,
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
@@ -71,16 +71,16 @@ const meta: Meta<typeof ContentTabs> = {
 }
 
 export default meta
-type Story = StoryObj<typeof ContentTabs>
+type Story = StoryObj<typeof Tabs>
 
 export const Default: Story = {
   args: {
     onTabChange: fn(),
   },
   render: (args) => (
-    <ContentTabs {...args}>
+    <Tabs {...args}>
       {(tab) => (tab === 'assets' ? <AssetsContent /> : <HistoryContent />)}
-    </ContentTabs>
+    </Tabs>
   ),
 }
 
@@ -90,9 +90,9 @@ export const HistoryActive: Story = {
     onTabChange: fn(),
   },
   render: (args) => (
-    <ContentTabs {...args}>
+    <Tabs {...args}>
       {(tab) => (tab === 'assets' ? <AssetsContent /> : <HistoryContent />)}
-    </ContentTabs>
+    </Tabs>
   ),
 }
 
@@ -108,13 +108,13 @@ export const CustomTabs: Story = {
     onTabChange: fn(),
   },
   render: (args) => (
-    <ContentTabs {...args}>
+    <Tabs {...args}>
       {(tab) => (
         <div className="flex h-40 items-center justify-center text-muted-foreground">
           当前选中: {tab}
         </div>
       )}
-    </ContentTabs>
+    </Tabs>
   ),
 }
 
@@ -123,14 +123,14 @@ export const SwipeableDefault: Story = {
     onTabChange: fn(),
   },
   render: (args) => (
-    <SwipeableContentTabs {...args}>
+    <SwipeableTabs {...args}>
       {(tab) => (tab === 'assets' ? <AssetsContent /> : <HistoryContent />)}
-    </SwipeableContentTabs>
+    </SwipeableTabs>
   ),
   parameters: {
     docs: {
       description: {
-        story: '可滑动版本的 Tab 切换，带有滑动指示器动画。',
+        story: '可滑动版本的 Tab 切换，使用 Swiper 实现手势滑动。',
       },
     },
   },
@@ -142,9 +142,9 @@ export const SwipeableHistoryActive: Story = {
     onTabChange: fn(),
   },
   render: (args) => (
-    <SwipeableContentTabs {...args}>
+    <SwipeableTabs {...args}>
       {(tab) => (tab === 'assets' ? <AssetsContent /> : <HistoryContent />)}
-    </SwipeableContentTabs>
+    </SwipeableTabs>
   ),
 }
 
@@ -159,7 +159,7 @@ export const SwipeableCustomTabs: Story = {
     onTabChange: fn(),
   },
   render: (args) => (
-    <SwipeableContentTabs {...args}>
+    <SwipeableTabs {...args}>
       {(tab) => (
         <div className="flex h-60 flex-col items-center justify-center gap-2 text-muted-foreground">
           <div className="text-4xl">
@@ -168,7 +168,7 @@ export const SwipeableCustomTabs: Story = {
           <div>{tab.toUpperCase()} 内容</div>
         </div>
       )}
-    </SwipeableContentTabs>
+    </SwipeableTabs>
   ),
 }
 
@@ -178,9 +178,9 @@ export const Controlled: Story = {
     onTabChange: fn(),
   },
   render: (args) => (
-    <ContentTabs {...args}>
+    <Tabs {...args}>
       {(tab) => (tab === 'assets' ? <AssetsContent /> : <HistoryContent />)}
-    </ContentTabs>
+    </Tabs>
   ),
   parameters: {
     docs: {
@@ -196,9 +196,9 @@ export const DarkMode: Story = {
     onTabChange: fn(),
   },
   render: (args) => (
-    <SwipeableContentTabs {...args}>
+    <SwipeableTabs {...args}>
       {(tab) => (tab === 'assets' ? <AssetsContent /> : <HistoryContent />)}
-    </SwipeableContentTabs>
+    </SwipeableTabs>
   ),
   decorators: [
     (Story) => (
diff --git a/src/components/home/content-tabs.test.tsx b/src/components/layout/swipeable-tabs.test.tsx
similarity index 68%
rename from src/components/home/content-tabs.test.tsx
rename to src/components/layout/swipeable-tabs.test.tsx
index 4efa3957..b02f8773 100644
--- a/src/components/home/content-tabs.test.tsx
+++ b/src/components/layout/swipeable-tabs.test.tsx
@@ -1,24 +1,24 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ContentTabs, SwipeableContentTabs } from './content-tabs'
+import { Tabs, SwipeableTabs } from './swipeable-tabs'
 
-describe('ContentTabs', () => {
+describe('Tabs', () => {
   it('renders default tabs', () => {
-    render(<ContentTabs>{(tab) => <div>Content: {tab}</div>}</ContentTabs>)
+    render(<Tabs>{(tab) => <div>Content: {tab}</div>}</Tabs>)
 
     expect(screen.getByRole('button', { name: /资产/i })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /交易/i })).toBeInTheDocument()
   })
 
   it('renders content for default tab', () => {
-    render(<ContentTabs>{(tab) => <div>Content: {tab}</div>}</ContentTabs>)
+    render(<Tabs>{(tab) => <div>Content: {tab}</div>}</Tabs>)
 
     expect(screen.getByText('Content: assets')).toBeInTheDocument()
   })
 
   it('switches tab on click', async () => {
-    render(<ContentTabs>{(tab) => <div>Content: {tab}</div>}</ContentTabs>)
+    render(<Tabs>{(tab) => <div>Content: {tab}</div>}</Tabs>)
 
     const historyTab = screen.getByRole('button', { name: /交易/i })
     await userEvent.click(historyTab)
@@ -29,7 +29,7 @@ describe('ContentTabs', () => {
   it('calls onTabChange when tab changes', async () => {
     const handleTabChange = vi.fn()
     render(
-      <ContentTabs onTabChange={handleTabChange}>{(tab) => <div>Content: {tab}</div>}</ContentTabs>
+      <Tabs onTabChange={handleTabChange}>{(tab) => <div>Content: {tab}</div>}</Tabs>
     )
 
     const historyTab = screen.getByRole('button', { name: /交易/i })
@@ -40,7 +40,7 @@ describe('ContentTabs', () => {
 
   it('respects controlled activeTab', () => {
     render(
-      <ContentTabs activeTab="history">{(tab) => <div>Content: {tab}</div>}</ContentTabs>
+      <Tabs activeTab="history">{(tab) => <div>Content: {tab}</div>}</Tabs>
     )
 
     expect(screen.getByText('Content: history')).toBeInTheDocument()
@@ -48,7 +48,7 @@ describe('ContentTabs', () => {
 
   it('respects defaultTab', () => {
     render(
-      <ContentTabs defaultTab="history">{(tab) => <div>Content: {tab}</div>}</ContentTabs>
+      <Tabs defaultTab="history">{(tab) => <div>Content: {tab}</div>}</Tabs>
     )
 
     expect(screen.getByText('Content: history')).toBeInTheDocument()
@@ -62,9 +62,9 @@ describe('ContentTabs', () => {
     ]
 
     render(
-      <ContentTabs tabs={customTabs} defaultTab="tab1">
+      <Tabs tabs={customTabs} defaultTab="tab1">
         {(tab) => <div>Content: {tab}</div>}
-      </ContentTabs>
+      </Tabs>
     )
 
     expect(screen.getByRole('button', { name: 'Tab 1' })).toBeInTheDocument()
@@ -73,9 +73,8 @@ describe('ContentTabs', () => {
   })
 
   it('renders tab icons', () => {
-    render(<ContentTabs>{(tab) => <div>Content: {tab}</div>}</ContentTabs>)
+    render(<Tabs>{(tab) => <div>Content: {tab}</div>}</Tabs>)
 
-    // Default tabs have icons (Coins and History)
     const buttons = screen.getAllByRole('button')
     buttons.forEach((button) => {
       expect(button.querySelector('svg')).toBeInTheDocument()
@@ -83,12 +82,11 @@ describe('ContentTabs', () => {
   })
 
   it('applies active styles to selected tab', async () => {
-    render(<ContentTabs>{(tab) => <div>Content: {tab}</div>}</ContentTabs>)
+    render(<Tabs>{(tab) => <div>Content: {tab}</div>}</Tabs>)
 
     const assetsTab = screen.getByRole('button', { name: /资产/i })
     const historyTab = screen.getByRole('button', { name: /交易/i })
 
-    // Assets tab should be active by default
     expect(assetsTab).toHaveClass('border-primary')
     expect(historyTab).not.toHaveClass('border-primary')
 
@@ -100,25 +98,24 @@ describe('ContentTabs', () => {
 
   it('applies custom className', () => {
     const { container } = render(
-      <ContentTabs className="custom-tabs">{(tab) => <div>Content: {tab}</div>}</ContentTabs>
+      <Tabs className="custom-tabs">{(tab) => <div>Content: {tab}</div>}</Tabs>
     )
 
     expect(container.querySelector('.custom-tabs')).toBeInTheDocument()
   })
 })
 
-describe('SwipeableContentTabs', () => {
+describe('SwipeableTabs', () => {
   it('renders default tabs', () => {
-    render(<SwipeableContentTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableContentTabs>)
+    render(<SwipeableTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableTabs>)
 
     expect(screen.getByRole('button', { name: /资产/i })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /交易/i })).toBeInTheDocument()
   })
 
   it('renders content for all tabs (for swipe)', () => {
-    render(<SwipeableContentTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableContentTabs>)
+    render(<SwipeableTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableTabs>)
 
-    // Both contents should be in DOM for swipe animation
     expect(screen.getByText('Content: assets')).toBeInTheDocument()
     expect(screen.getByText('Content: history')).toBeInTheDocument()
   })
@@ -126,9 +123,9 @@ describe('SwipeableContentTabs', () => {
   it('switches tab on click', async () => {
     const handleTabChange = vi.fn()
     render(
-      <SwipeableContentTabs onTabChange={handleTabChange}>
+      <SwipeableTabs onTabChange={handleTabChange}>
         {(tab) => <div>Content: {tab}</div>}
-      </SwipeableContentTabs>
+      </SwipeableTabs>
     )
 
     const historyTab = screen.getByRole('button', { name: /交易/i })
@@ -139,44 +136,41 @@ describe('SwipeableContentTabs', () => {
 
   it('has sliding indicator', () => {
     const { container } = render(
-      <SwipeableContentTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableContentTabs>
+      <SwipeableTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableTabs>
     )
 
-    // Should have a sliding indicator div
     const indicator = container.querySelector('[class*="transition-transform"]')
     expect(indicator).toBeInTheDocument()
   })
 
   it('applies transform for active tab', async () => {
     const { container } = render(
-      <SwipeableContentTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableContentTabs>
+      <SwipeableTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableTabs>
     )
 
     const historyTab = screen.getByRole('button', { name: /交易/i })
     await userEvent.click(historyTab)
 
-    // Content container should have transform applied
     const contentContainer = container.querySelector('[class*="transition-transform"]')
     expect(contentContainer).toBeInTheDocument()
   })
 
   it('respects controlled activeTab', () => {
     render(
-      <SwipeableContentTabs activeTab="history">
+      <SwipeableTabs activeTab="history">
         {(tab) => <div data-testid={`content-${tab}`}>Content: {tab}</div>}
-      </SwipeableContentTabs>
+      </SwipeableTabs>
     )
 
-    // History tab should be visually active (uses text-primary for active)
     const historyTab = screen.getByRole('button', { name: /交易/i })
     expect(historyTab).toHaveClass('text-primary')
   })
 
   it('applies custom className', () => {
     const { container } = render(
-      <SwipeableContentTabs className="custom-swipeable">
+      <SwipeableTabs className="custom-swipeable">
         {(tab) => <div>Content: {tab}</div>}
-      </SwipeableContentTabs>
+      </SwipeableTabs>
     )
 
     expect(container.querySelector('.custom-swipeable')).toBeInTheDocument()
@@ -184,9 +178,9 @@ describe('SwipeableContentTabs', () => {
 
   it('renders with rounded tab indicator', () => {
     const { container } = render(
-      <SwipeableContentTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableContentTabs>
+      <SwipeableTabs>{(tab) => <div>Content: {tab}</div>}</SwipeableTabs>
     )
-    // Indicator uses rounded-lg class
+
     const indicator = container.querySelector('.rounded-lg')
     expect(indicator).toBeInTheDocument()
   })
diff --git a/src/components/home/content-tabs.tsx b/src/components/layout/swipeable-tabs.tsx
similarity index 57%
rename from src/components/home/content-tabs.tsx
rename to src/components/layout/swipeable-tabs.tsx
index f2aeacca..e2158973 100644
--- a/src/components/home/content-tabs.tsx
+++ b/src/components/layout/swipeable-tabs.tsx
@@ -1,6 +1,9 @@
-import { useState, useCallback, type ReactNode } from 'react'
+import { useState, useCallback, useRef, type ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 import { IconCoins as Coins, IconHistory as History } from '@tabler/icons-react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import type { Swiper as SwiperType } from 'swiper'
+import 'swiper/css'
 
 interface Tab {
   id: string
@@ -8,7 +11,7 @@ interface Tab {
   icon?: ReactNode
 }
 
-interface ContentTabsProps {
+interface TabsProps {
   tabs?: Tab[]
   defaultTab?: string
   activeTab?: string
@@ -23,19 +26,18 @@ const DEFAULT_TABS: Tab[] = [
 ]
 
 /**
- * 内容区Tab切换组件
+ * Tab 切换组件
  */
-export function ContentTabs({
+export function Tabs({
   tabs = DEFAULT_TABS,
   defaultTab = 'assets',
   activeTab: controlledActiveTab,
   onTabChange,
   children,
   className,
-}: ContentTabsProps) {
+}: TabsProps) {
   const [internalActiveTab, setInternalActiveTab] = useState(defaultTab)
   
-  // 支持受控和非受控模式
   const activeTab = controlledActiveTab ?? internalActiveTab
 
   const handleTabClick = useCallback(
@@ -48,7 +50,6 @@ export function ContentTabs({
 
   return (
     <div className={cn('flex flex-col', className)}>
-      {/* Tab 栏 */}
       <div className="bg-background sticky top-0 z-10 border-b">
         <div className="flex">
           {tabs.map((tab) => (
@@ -70,7 +71,6 @@ export function ContentTabs({
         </div>
       </div>
 
-      {/* 内容区 */}
       <div className="flex-1 overflow-auto">
         {children(activeTab)}
       </div>
@@ -79,41 +79,70 @@ export function ContentTabs({
 }
 
 /**
- * 滑动版本的ContentTabs（支持左右滑动切换）
+ * 滑动版 Tab 切换组件（使用 Swiper 实现手势滑动）
+ * 指示器位置通过 CSS 变量实时更新，实现丝滑跟手效果
  */
-export function SwipeableContentTabs({
+export function SwipeableTabs({
   tabs = DEFAULT_TABS,
   defaultTab = 'assets',
   activeTab: controlledActiveTab,
   onTabChange,
   children,
   className,
-}: ContentTabsProps) {
+}: TabsProps) {
   const [internalActiveTab, setInternalActiveTab] = useState(defaultTab)
+  const swiperRef = useRef<SwiperType | null>(null)
+  const indicatorRef = useRef<HTMLDivElement>(null)
   const activeTab = controlledActiveTab ?? internalActiveTab
+  const activeIndex = tabs.findIndex((t) => t.id === activeTab)
 
   const handleTabClick = useCallback(
     (tabId: string) => {
-      setInternalActiveTab(tabId)
-      onTabChange?.(tabId)
+      const index = tabs.findIndex((t) => t.id === tabId)
+      if (index !== -1) {
+        swiperRef.current?.slideTo(index)
+      }
     },
-    [onTabChange]
+    [tabs]
   )
 
-  const activeIndex = tabs.findIndex((t) => t.id === activeTab)
+  const handleSlideChange = useCallback(
+    (swiper: SwiperType) => {
+      const tab = tabs[swiper.activeIndex]
+      if (tab) {
+        setInternalActiveTab(tab.id)
+        onTabChange?.(tab.id)
+      }
+    },
+    [tabs, onTabChange]
+  )
+
+  // 实时更新指示器位置（通过 CSS 变量）
+  const handleProgress = useCallback(
+    (swiper: SwiperType, progress: number) => {
+      if (!indicatorRef.current) return
+      // progress: 0 = 第一个 tab, 1 = 最后一个 tab
+      // 转换为 tab 索引（支持小数，用于平滑过渡）
+      const tabIndex = progress * (tabs.length - 1)
+      indicatorRef.current.style.setProperty('--tab-index', String(tabIndex))
+    },
+    [tabs.length]
+  )
 
   return (
     <div className={cn('flex flex-col overflow-hidden', className)}>
-      {/* Tab 栏 */}
       <div className="bg-background px-4 pb-2">
         <div className="relative flex rounded-xl bg-muted/60 p-1">
-          {/* 滑动指示器 - 跟随主题色 */}
+          {/* 指示器 - 使用 CSS 变量实现实时位置更新 */}
           <div
-            className="absolute top-1 bottom-1 rounded-lg bg-primary/10 shadow-sm transition-transform duration-200"
+            ref={indicatorRef}
+            className="absolute top-1 bottom-1 rounded-lg bg-primary/10 shadow-sm"
             style={{
+              '--tab-index': activeIndex,
+              '--tab-count': tabs.length,
               width: `calc(${100 / tabs.length}% - 4px)`,
-              transform: `translateX(calc(${activeIndex * 100}% + ${activeIndex * 4}px))`,
-            }}
+              transform: `translateX(calc(var(--tab-index) * (100% + 4px)))`,
+            } as React.CSSProperties}
           />
           
           {tabs.map((tab) => (
@@ -132,26 +161,26 @@ export function SwipeableContentTabs({
         </div>
       </div>
 
-      {/* 滑动内容区 */}
-      <div className="relative flex-1 overflow-hidden">
-        <div
-          className="flex h-full transition-transform duration-200"
-          style={{
-            width: `${tabs.length * 100}%`,
-            transform: `translateX(-${activeIndex * (100 / tabs.length)}%)`,
-          }}
-        >
-          {tabs.map((tab) => (
-            <div
-              key={tab.id}
-              className="h-full overflow-auto"
-              style={{ width: `${100 / tabs.length}%` }}
-            >
-              {children(tab.id)}
-            </div>
-          ))}
-        </div>
-      </div>
+      <Swiper
+        className="flex-1 w-full"
+        initialSlide={activeIndex}
+        onSwiper={(swiper) => { swiperRef.current = swiper }}
+        onSlideChange={handleSlideChange}
+        onProgress={handleProgress}
+        resistanceRatio={0.5}
+      >
+        {tabs.map((tab) => (
+          <SwiperSlide key={tab.id} className="h-full overflow-auto">
+            {children(tab.id)}
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </div>
   )
 }
+
+// 兼容旧名称（deprecated）
+/** @deprecated Use `Tabs` instead */
+export const ContentTabs = Tabs
+/** @deprecated Use `SwipeableTabs` instead */
+export const SwipeableContentTabs = SwipeableTabs
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..2871ad17
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,104 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "rounded-full aspect-square size-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/src/hooks/useWalletTheme.ts b/src/hooks/useWalletTheme.ts
index a9ea202f..0dc2dc1c 100644
--- a/src/hooks/useWalletTheme.ts
+++ b/src/hooks/useWalletTheme.ts
@@ -2,6 +2,8 @@ import { useCallback, useEffect } from 'react'
 import { useStore } from '@tanstack/react-store'
 import { walletStore } from '@/stores'
 
+const THEME_HUE_CACHE_KEY = 'wallet_theme_hue_cache'
+
 /** 预设主题色 (oklch hue 角度) */
 export const WALLET_THEME_PRESETS = {
   purple: 323,    // 默认紫色
@@ -53,6 +55,49 @@ function applyThemeColor(hue: number) {
   root.style.setProperty('--primary-hue', String(hue))
 }
 
+/**
+ * 保存主题色到 localStorage 缓存
+ */
+function saveThemeHueCache(hue: number) {
+  try {
+    localStorage.setItem(THEME_HUE_CACHE_KEY, String(hue))
+  } catch {
+    // ignore storage errors
+  }
+}
+
+/**
+ * 从 localStorage 读取缓存的主题色
+ */
+function loadThemeHueCache(): number | null {
+  try {
+    const cached = localStorage.getItem(THEME_HUE_CACHE_KEY)
+    if (cached) {
+      const hue = parseInt(cached, 10)
+      if (!isNaN(hue) && hue >= 0 && hue <= 360) {
+        return hue
+      }
+    }
+  } catch {
+    // ignore
+  }
+  return null
+}
+
+/**
+ * 初始化主题色（应用启动时调用）
+ * 立即从缓存读取并应用，避免白屏闪烁
+ */
+export function initializeThemeHue() {
+  const cached = loadThemeHueCache()
+  if (cached !== null) {
+    applyThemeColor(cached)
+  } else {
+    // 没有缓存时使用默认紫色
+    applyThemeColor(WALLET_THEME_PRESETS.purple)
+  }
+}
+
 /**
  * 根据钱包ID获取主题色
  */
@@ -72,12 +117,21 @@ export function useWalletTheme() {
   const currentWalletId = useStore(walletStore, (s) => s.currentWalletId)
 
   // 获取当前钱包的主题色
-  const themeHue = getThemeHueForWallet(wallets as { id: string; themeHue: number }[], currentWalletId)
+  const walletThemeHue = currentWalletId 
+    ? getThemeHueForWallet(wallets as { id: string; themeHue: number }[], currentWalletId)
+    : null
+
+  // 实际使用的主题色：有钱包用钱包的，没有用缓存的，都没有用默认的
+  const themeHue = walletThemeHue ?? loadThemeHueCache() ?? WALLET_THEME_PRESETS.purple
 
-  // 应用主题色
+  // 应用主题色并缓存（只有当钱包真正加载后才缓存）
   useEffect(() => {
     applyThemeColor(themeHue)
-  }, [themeHue])
+    // 只有当从钱包获取到主题色时才保存缓存
+    if (walletThemeHue !== null) {
+      saveThemeHueCache(walletThemeHue)
+    }
+  }, [themeHue, walletThemeHue])
 
   // 设置主题色
   const setThemeColor = useCallback((walletId: string, hue: number) => {
diff --git a/src/i18n/locales/ar/authorize.json b/src/i18n/locales/ar/authorize.json
index c578bde2..2fcab5d8 100644
--- a/src/i18n/locales/ar/authorize.json
+++ b/src/i18n/locales/ar/authorize.json
@@ -21,7 +21,8 @@
       "getMain": "View your wallet import phrase (main)"
     },
     "confirmDescription": "Draw your pattern to continue",
-    "noWallets": "لا توجد محافظ"
+    "noWallets": "لا توجد محافظ",
+    "selectNetwork": "اختر الشبكة"
   },
   "signature": {
     "reviewTransaction": "Review this transaction",
diff --git a/src/i18n/locales/en-US/ecosystem.json b/src/i18n/locales/en-US/ecosystem.json
new file mode 100644
index 00000000..d841c367
--- /dev/null
+++ b/src/i18n/locales/en-US/ecosystem.json
@@ -0,0 +1,24 @@
+{
+  "title": "Ecosystem",
+  "empty": "No miniapps available",
+  "loading": "Loading...",
+  "notFound": "Miniapp not found",
+  "refresh": "Refresh",
+  "sources": {
+    "title": "Trusted Sources",
+    "add": "Add Source",
+    "remove": "Remove",
+    "empty": "No sources configured"
+  },
+  "permissions": {
+    "title": "Permission Request",
+    "grant": "Allow",
+    "deny": "Deny",
+    "bio_requestAccounts": "Access wallet addresses",
+    "bio_selectAccount": "Select account",
+    "bio_pickWallet": "Pick another wallet",
+    "bio_signMessage": "Sign message",
+    "bio_signTypedData": "Sign typed data",
+    "bio_sendTransaction": "Send transaction"
+  }
+}
diff --git a/src/i18n/locales/en/authorize.json b/src/i18n/locales/en/authorize.json
index 3caa8077..1b4a08d6 100644
--- a/src/i18n/locales/en/authorize.json
+++ b/src/i18n/locales/en/authorize.json
@@ -21,7 +21,8 @@
       "getMain": "View your wallet import phrase (main)"
     },
     "confirmDescription": "Draw your pattern to continue",
-    "noWallets": "No wallets available"
+    "noWallets": "No wallets available",
+    "selectNetwork": "Select Network"
   },
   "signature": {
     "reviewTransaction": "Review this transaction",
diff --git a/src/i18n/locales/zh-CN/authorize.json b/src/i18n/locales/zh-CN/authorize.json
index d0b3886d..1ad2bf5f 100644
--- a/src/i18n/locales/zh-CN/authorize.json
+++ b/src/i18n/locales/zh-CN/authorize.json
@@ -21,7 +21,8 @@
       "getMain": "查看你的钱包导入密语（主密钥）"
     },
     "confirmDescription": "请绘制图案以继续",
-    "noWallets": "暂无钱包"
+    "noWallets": "暂无钱包",
+    "selectNetwork": "选择网络"
   },
   "signature": {
     "reviewTransaction": "请确认该交易",
diff --git a/src/i18n/locales/zh-CN/ecosystem.json b/src/i18n/locales/zh-CN/ecosystem.json
new file mode 100644
index 00000000..00c6d9c1
--- /dev/null
+++ b/src/i18n/locales/zh-CN/ecosystem.json
@@ -0,0 +1,24 @@
+{
+  "title": "生态",
+  "empty": "暂无小程序",
+  "loading": "加载中...",
+  "notFound": "小程序不存在",
+  "refresh": "刷新",
+  "sources": {
+    "title": "可信源管理",
+    "add": "添加订阅",
+    "remove": "移除",
+    "empty": "暂无订阅源"
+  },
+  "permissions": {
+    "title": "权限请求",
+    "grant": "授权",
+    "deny": "拒绝",
+    "bio_requestAccounts": "访问钱包地址",
+    "bio_selectAccount": "选择账户",
+    "bio_pickWallet": "选择其他钱包",
+    "bio_signMessage": "签名消息",
+    "bio_signTypedData": "签名数据",
+    "bio_sendTransaction": "发起交易"
+  }
+}
diff --git a/src/lib/url-resolver.ts b/src/lib/url-resolver.ts
new file mode 100644
index 00000000..e4752235
--- /dev/null
+++ b/src/lib/url-resolver.ts
@@ -0,0 +1,46 @@
+/**
+ * URL Resolver - 基于 JSON 文件位置解析相对路径
+ *
+ * @example
+ * ```typescript
+ * const resolve = createResolver('/miniapps/ecosystem.json')
+ * resolve('./forge/icon.svg')  // => '/miniapps/forge/icon.svg'
+ * resolve('https://example.com/icon.svg')  // => 'https://example.com/icon.svg' (保持不变)
+ * ```
+ */
+
+export type UrlResolver = (path: string) => string
+
+/**
+ * 创建一个基于指定 JSON 文件位置的 URL 解析器
+ *
+ * @param jsonFileUrl - JSON 文件的 URL（绝对路径或相对于 document.baseURI）
+ * @returns 解析函数，接受相对路径返回绝对 URL
+ */
+export function createResolver(jsonFileUrl: string): UrlResolver {
+  // 获取基础 URL（用于解析 jsonFileUrl 本身）
+  const baseUrl = typeof document !== 'undefined' ? document.baseURI : 'file:///'
+
+  // 解析 jsonFileUrl 为绝对 URL
+  const absoluteJsonUrl = new URL(jsonFileUrl, baseUrl).toString()
+
+  return (path: string): string => {
+    // 已经是绝对 URL，直接返回
+    if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('data:')) {
+      return path
+    }
+    // 解析相对路径（相对于 JSON 文件位置）
+    return new URL(path, absoluteJsonUrl).toString()
+  }
+}
+
+/**
+ * 解析相对路径为绝对 URL（相对于 JSON 文件位置）
+ *
+ * @param path - 要解析的路径（可以是相对路径或绝对 URL）
+ * @param jsonFileUrl - JSON 文件的 URL
+ * @returns 解析后的绝对 URL
+ */
+export function resolveRelativePath(path: string, jsonFileUrl: string): string {
+  return createResolver(jsonFileUrl)(path)
+}
diff --git a/src/pages/authorize/address.tsx b/src/pages/authorize/address.tsx
index c688ce1c..41df833b 100644
--- a/src/pages/authorize/address.tsx
+++ b/src/pages/authorize/address.tsx
@@ -8,8 +8,9 @@ import { AppInfoCard } from '@/components/authorize/AppInfoCard'
 import { PermissionList } from '@/components/authorize/PermissionList'
 import { Button } from '@/components/ui/button'
 import { WalletSelector, type WalletInfo } from '@/components/wallet'
-import { ChainAddressSelector, type ChainData } from '@/components/wallet/chain-address-selector'
-import type { ChainType as ChainIconType } from '@/components/wallet/chain-icon'
+import { WalletCard } from '@/components/wallet/wallet-card'
+import { ChainIcon, type ChainType as ChainIconType } from '@/components/wallet/chain-icon'
+import { IconCheck } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
 import {
   AddressAuthService,
@@ -44,6 +45,12 @@ function toChainIconType(chainName: string | undefined): ChainIconType | undefin
   return chainName
 }
 
+interface ChainData {
+  chain: ChainIconType
+  name: string
+  addresses: Array<{ address: string; isDefault: boolean }>
+}
+
 function toWalletSelectorItems(wallets: Wallet[]): WalletInfo[] {
   return wallets.map((w) => ({
     id: w.id,
@@ -114,6 +121,7 @@ export function AddressAuthPage() {
 
   const [selectedAddress, setSelectedAddress] = useState<string | undefined>(undefined)
   const [selectedWalletIds, setSelectedWalletIds] = useState<Set<string>>(() => new Set(wallets.map((w) => w.id)))
+  const [chainSelectorOpen, setChainSelectorOpen] = useState(false)
 
   useEffect(() => {
     setSelectedWalletId(defaultWalletId)
@@ -183,6 +191,18 @@ export function AddressAuthPage() {
 
   const chains = useMemo(() => buildChainData(wallets, currentWalletId), [wallets, currentWalletId])
 
+  // 当前钱包可用的链列表
+  const availableChains = useMemo(() => {
+    if (!currentWallet) return []
+    return currentWallet.chainAddresses.map(ca => ca.chain as ChainIconType)
+  }, [currentWallet])
+
+  // 选中链的地址
+  const selectedChainAddress = useMemo(() => {
+    if (!currentWallet || !selectedChain) return undefined
+    return currentWallet.chainAddresses.find(ca => ca.chain === selectedChain)?.address
+  }, [currentWallet, selectedChain])
+
   useEffect(() => {
     if (type !== 'network') return
     if (selectedChain) return
@@ -367,16 +387,17 @@ export function AddressAuthPage() {
             />
           )}
 
-          {type === 'network' && (
-            <ChainAddressSelector
-              chains={chainIconType ? chains.filter((c) => c.chain === chainIconType) : chains}
-              selectedChain={selectedChain}
-              selectedAddress={selectedAddress}
-              onSelect={(chain, address) => {
-                setSelectedChain(chain)
-                setSelectedAddress(address)
-              }}
-            />
+          {type === 'network' && currentWallet && selectedChain && (
+            <div className="aspect-[1.6/1] w-full">
+              <WalletCard
+                wallet={currentWallet}
+                chain={selectedChain}
+                chainName={CHAIN_NAMES[selectedChain] ?? selectedChain}
+                address={selectedChainAddress}
+                priority="low"
+                onOpenChainSelector={chainIconType ? undefined : () => setChainSelectorOpen(true)}
+              />
+            </div>
           )}
 
           {type === 'all' && (
@@ -445,6 +466,61 @@ export function AddressAuthPage() {
           </Button>
         </div>
       </div>
+
+      {/* 链选择器 Sheet */}
+      {chainSelectorOpen && (
+        <div 
+          className="fixed inset-0 z-50 bg-black/50" 
+          onClick={() => setChainSelectorOpen(false)}
+        >
+          <div 
+            className="absolute bottom-0 left-0 right-0 bg-background rounded-t-2xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-center py-3">
+              <div className="h-1 w-10 rounded-full bg-muted" />
+            </div>
+            <div className="border-b border-border px-4 pb-4">
+              <h2 className="text-center text-lg font-semibold">{tAuthorize('address.selectNetwork')}</h2>
+            </div>
+            <div className="max-h-[60vh] space-y-2 overflow-y-auto p-4">
+              {availableChains.map((chain) => {
+                const chainAddr = currentWallet?.chainAddresses.find((ca) => ca.chain === chain)
+                return (
+                  <button
+                    key={chain}
+                    onClick={() => {
+                      setSelectedChain(chain)
+                      setChainSelectorOpen(false)
+                    }}
+                    className={cn(
+                      'flex w-full items-center gap-3 rounded-xl p-4 transition-colors',
+                      chain === selectedChain
+                        ? 'bg-primary/10 ring-1 ring-primary'
+                        : 'bg-muted/50 hover:bg-muted'
+                    )}
+                  >
+                    <ChainIcon chain={chain} size="md" />
+                    <div className="flex-1 text-left">
+                      <div className="font-medium">{CHAIN_NAMES[chain] ?? chain}</div>
+                      <div className="font-mono text-xs text-muted-foreground">
+                        {chainAddr?.address ? truncateAddress(chainAddr.address) : '---'}
+                      </div>
+                    </div>
+                    {chain === selectedChain && <IconCheck className="size-5 text-primary" />}
+                  </button>
+                )
+              })}
+            </div>
+            <div className="h-[env(safe-area-inset-bottom)]" />
+          </div>
+        </div>
+      )}
     </div>
   )
 }
+
+function truncateAddress(address: string, startChars = 10, endChars = 8): string {
+  if (address.length <= startChars + endChars + 3) return address
+  return `${address.slice(0, startChars)}...${address.slice(-endChars)}`
+}
diff --git a/src/pages/ecosystem/miniapp.tsx b/src/pages/ecosystem/miniapp.tsx
new file mode 100644
index 00000000..c32384cf
--- /dev/null
+++ b/src/pages/ecosystem/miniapp.tsx
@@ -0,0 +1,456 @@
+/**
+ * MiniApp Container Page
+ *
+ * Runs a miniapp in an iframe with Bio SDK integration
+ */
+
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getAppById, getBridge, initBioProvider } from '@/services/ecosystem'
+import type { MiniappManifest, BioAccount, TransferParams, BioUnsignedTransaction, BioSignedTransaction } from '@/services/ecosystem'
+import {
+  setWalletPicker,
+  setGetAccounts,
+} from '@/services/ecosystem/handlers/wallet'
+import { setSigningDialog } from '@/services/ecosystem/handlers/signing'
+import { setTransferDialog } from '@/services/ecosystem/handlers/transfer'
+import { setSignTransactionDialog } from '@/services/ecosystem/handlers/transaction'
+import { walletStore, walletSelectors, type ChainAddress } from '@/stores'
+import { usePreferences } from '@/stores/preferences'
+import { getLanguageDirection } from '@/i18n/index'
+import { useFlow } from '@/stackflow/stackflow'
+import { IconX, IconDots } from '@tabler/icons-react'
+
+// 获取解析后的主题（system -> light/dark）
+function resolveColorMode(theme: 'light' | 'dark' | 'system'): 'light' | 'dark' {
+  if (theme !== 'system') return theme
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+// 默认主题色 hue（粉色）
+const DEFAULT_PRIMARY_HUE = 323
+const DEFAULT_PRIMARY_SATURATION = 0.26
+
+interface MiniappPageProps {
+  appId: string
+  onClose?: () => void
+}
+
+export function MiniappPage({ appId, onClose }: MiniappPageProps) {
+  const { t, i18n } = useTranslation('common')
+  const { push } = useFlow()
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [app, setApp] = useState<MiniappManifest | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [splashVisible, setSplashVisible] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const splashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const preferences = usePreferences()
+
+  // 构建 context 状态
+  const contextState = useMemo(() => ({
+    theme: {
+      colorMode: resolveColorMode(preferences.theme),
+      primaryHue: DEFAULT_PRIMARY_HUE,
+      primarySaturation: DEFAULT_PRIMARY_SATURATION,
+    },
+    locale: {
+      lang: preferences.language,
+      rtl: getLanguageDirection(preferences.language) === 'rtl',
+    },
+    env: {
+      platform: 'web' as const,
+      version: '1.0.0',
+      safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
+    },
+    a11y: {
+      fontScale: 1.0,
+      reduceMotion: false,
+    },
+  }), [preferences.theme, preferences.language])
+
+  // 构建带 context 参数的 iframe URL
+  const iframeUrl = useMemo(() => {
+    if (!app) return ''
+    const url = new URL(app.url, window.location.origin)
+    url.searchParams.set('colorMode', contextState.theme.colorMode)
+    url.searchParams.set('primaryHue', String(contextState.theme.primaryHue))
+    url.searchParams.set('primarySaturation', String(contextState.theme.primarySaturation))
+    url.searchParams.set('lang', contextState.locale.lang)
+    url.searchParams.set('rtl', String(contextState.locale.rtl))
+    url.searchParams.set('platform', contextState.env.platform)
+    url.searchParams.set('version', contextState.env.version)
+    return url.toString()
+  }, [app, contextState])
+
+  // 当 context 变化时通知 iframe
+  useEffect(() => {
+    if (!iframeRef.current?.contentWindow) return
+    iframeRef.current.contentWindow.postMessage({
+      type: 'keyapp:context-update',
+      payload: contextState,
+    }, '*')
+  }, [contextState])
+
+  useEffect(() => {
+    const manifest = getAppById(appId)
+    if (!manifest) {
+      setError('小程序不存在')
+      setLoading(false)
+      return
+    }
+    setApp(manifest)
+  }, [appId, t])
+
+  // 钱包选择器
+  const showWalletPicker = useCallback(
+    (opts?: { chain?: string }): Promise<BioAccount | null> => {
+      return new Promise((resolve) => {
+        const handleSelect = (e: Event) => {
+          const detail = (e as CustomEvent).detail
+          window.removeEventListener('wallet-picker-select', handleSelect)
+          window.removeEventListener('wallet-picker-cancel', handleCancel)
+          resolve({
+            address: detail.address,
+            chain: detail.chain,
+            name: detail.name,
+          })
+        }
+
+        const handleCancel = () => {
+          window.removeEventListener('wallet-picker-select', handleSelect)
+          window.removeEventListener('wallet-picker-cancel', handleCancel)
+          resolve(null)
+        }
+
+        window.addEventListener('wallet-picker-select', handleSelect)
+        window.addEventListener('wallet-picker-cancel', handleCancel)
+
+        const params: Record<string, string> = {}
+        if (opts?.chain) params.chain = opts.chain
+        if (app?.name) params.appName = app.name
+        if (app?.icon) params.appIcon = app.icon
+        push('WalletPickerJob', params)
+      })
+    },
+    [push, app?.name, app?.icon]
+  )
+
+  // 获取已连接账户
+  const getConnectedAccounts = useCallback((): BioAccount[] => {
+    const state = walletStore.state
+    const wallet = walletSelectors.getCurrentWallet(state)
+    if (!wallet) return []
+
+    return wallet.chainAddresses.map((ca: ChainAddress) => ({
+      address: ca.address,
+      chain: ca.chain,
+      name: wallet.name,
+    }))
+  }, [])
+
+  // 签名对话框 - 集成真实签名服务
+  const showSigningDialog = useCallback(
+    (params: { message: string; address: string; app: { name: string; icon?: string } }): Promise<string | null> => {
+      return new Promise((resolve) => {
+        const handleConfirm = (e: Event) => {
+          const detail = (e as CustomEvent).detail
+          window.removeEventListener('signing-confirm', handleConfirm)
+          if (detail.confirmed && detail.signature) {
+            // 返回真实签名
+            resolve(detail.signature)
+          } else {
+            resolve(null)
+          }
+        }
+
+        window.addEventListener('signing-confirm', handleConfirm)
+
+        // 根据 address 找到对应的链
+        const state = walletStore.state
+        const wallet = walletSelectors.getCurrentWallet(state)
+        let chainName = 'bioforest'
+        if (wallet) {
+          const chainAddr = wallet.chainAddresses.find(
+            (ca: ChainAddress) => ca.address.toLowerCase() === params.address.toLowerCase()
+          )
+          if (chainAddr) {
+            chainName = chainAddr.chain
+          }
+        }
+
+        push('SigningConfirmJob', {
+          message: params.message,
+          address: params.address,
+          appName: params.app.name,
+          appIcon: params.app.icon ?? app?.icon ?? '',
+          chainName,
+        })
+      })
+    },
+    [push, app?.icon]
+  )
+
+  // 转账对话框
+  const showTransferDialog = useCallback(
+    (params: TransferParams & { app: { name: string; icon?: string } }): Promise<{ txHash: string } | null> => {
+      return new Promise((resolve) => {
+        const handleResult = (e: Event) => {
+          const detail = (e as CustomEvent).detail
+          window.removeEventListener('miniapp-transfer-confirm', handleResult)
+          if (detail.confirmed) {
+            resolve({ txHash: detail.txHash })
+          } else {
+            resolve(null)
+          }
+        }
+
+        window.addEventListener('miniapp-transfer-confirm', handleResult)
+
+        push('MiniappTransferConfirmJob', {
+          appName: params.app.name,
+          appIcon: params.app.icon ?? app?.icon ?? '',
+          from: params.from,
+          to: params.to,
+          amount: params.amount,
+          chain: params.chain,
+          ...(params.asset ? { asset: params.asset } : {}),
+        })
+      })
+    },
+    [push, app?.icon]
+  )
+
+  // 交易签名对话框
+  const showSignTransactionDialog = useCallback(
+    (params: { from: string; chain: string; unsignedTx: BioUnsignedTransaction; app: { name: string; icon?: string } }): Promise<BioSignedTransaction | null> => {
+      return new Promise((resolve) => {
+        const handleResult = (e: Event) => {
+          const detail = (e as CustomEvent).detail as { confirmed?: boolean; signedTx?: BioSignedTransaction }
+          window.removeEventListener('miniapp-sign-transaction-confirm', handleResult)
+          if (detail.confirmed && detail.signedTx) {
+            resolve(detail.signedTx)
+          } else {
+            resolve(null)
+          }
+        }
+
+        window.addEventListener('miniapp-sign-transaction-confirm', handleResult)
+
+        push('MiniappSignTransactionJob', {
+          appName: params.app.name,
+          appIcon: params.app.icon ?? app?.icon ?? '',
+          from: params.from,
+          chain: params.chain,
+          unsignedTx: JSON.stringify(params.unsignedTx),
+        })
+      })
+    },
+    [push, app?.icon],
+  )
+
+  // 权限请求对话框
+  const requestPermission = useCallback(
+    (_appId: string, appName: string, permissions: string[]): Promise<boolean> => {
+      return new Promise((resolve) => {
+        const handleResult = (e: Event) => {
+          const detail = (e as CustomEvent).detail
+          window.removeEventListener('permission-request', handleResult)
+          resolve(detail.approved === true)
+        }
+
+        window.addEventListener('permission-request', handleResult)
+
+        push('PermissionRequestJob', {
+          appName,
+          appIcon: app?.icon ?? '',
+          permissions: JSON.stringify(permissions),
+        })
+      })
+    },
+    [push, app?.icon]
+  )
+
+  // 注册回调
+  useEffect(() => {
+    setWalletPicker(showWalletPicker)
+    setGetAccounts(getConnectedAccounts)
+    setSigningDialog(showSigningDialog)
+    setTransferDialog(showTransferDialog)
+    setSignTransactionDialog(showSignTransactionDialog)
+
+    return () => {
+      setWalletPicker(null)
+      setGetAccounts(null)
+      setSigningDialog(null)
+      setTransferDialog(null)
+      setSignTransactionDialog(null)
+    }
+  }, [showWalletPicker, getConnectedAccounts, showSigningDialog, showTransferDialog, showSignTransactionDialog])
+
+  useEffect(() => {
+    // Initialize provider on mount
+    initBioProvider()
+  }, [])
+
+  // 关闭启动屏
+  const closeSplashScreen = useCallback(() => {
+    if (splashTimeoutRef.current) {
+      clearTimeout(splashTimeoutRef.current)
+      splashTimeoutRef.current = null
+    }
+    setSplashVisible(false)
+    setLoading(false)
+  }, [])
+
+  const handleIframeLoad = useCallback(() => {
+    if (!iframeRef.current || !app) return
+
+    // Attach bridge to iframe
+    const bridge = getBridge()
+    bridge.setPermissionRequestCallback(requestPermission)
+    bridge.attach(iframeRef.current, app.id, app.name, app.permissions ?? [])
+
+    // 检查是否有启动屏配置
+    if (app.splashScreen) {
+      // 有启动屏配置：显示启动屏，等待 closeSplashScreen 调用或超时
+      setLoading(false)
+      setSplashVisible(true)
+      
+      const timeout = app.splashScreen.timeout ?? 5000
+      splashTimeoutRef.current = setTimeout(() => {
+        console.warn('[MiniappPage] Splash screen timeout, auto-closing')
+        closeSplashScreen()
+      }, timeout)
+    } else {
+      // 无启动屏配置：直接隐藏 loading
+      setLoading(false)
+    }
+
+    // Emit connect event
+    bridge.emit('connect', { chainId: 'bfmeta' })
+  }, [app, requestPermission, closeSplashScreen])
+
+  // 监听 bio_closeSplashScreen 消息
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'bio_request' && event.data?.method === 'bio_closeSplashScreen') {
+        closeSplashScreen()
+        // 发送响应
+        if (iframeRef.current?.contentWindow) {
+          iframeRef.current.contentWindow.postMessage({
+            type: 'bio_response',
+            id: event.data.id,
+            success: true,
+            result: undefined,
+          }, '*')
+        }
+      }
+    }
+    
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [closeSplashScreen])
+
+  useEffect(() => {
+    return () => {
+      // Cleanup on unmount
+      getBridge().detach()
+      if (splashTimeoutRef.current) {
+        clearTimeout(splashTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  if (error) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center bg-background p-4">
+        <p className="text-destructive mb-4">{error}</p>
+        <button
+          onClick={onClose}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg"
+        >
+          {t('back', '返回')}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      {/* Header */}
+      <div className="sticky top-0 z-10 bg-background border-b px-4 py-3 flex items-center gap-3">
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-full hover:bg-muted transition-colors"
+          aria-label={t('close', '关闭')}
+        >
+          <IconX className="size-5" stroke={1.5} />
+        </button>
+
+        <div className="flex-1 min-w-0">
+          <h1 className="font-semibold truncate">{app?.name ?? '加载中...'}</h1>
+          {app?.author && (
+            <p className="text-xs text-muted-foreground truncate">{app.author}</p>
+          )}
+        </div>
+
+        <button
+          className="p-1.5 rounded-full hover:bg-muted transition-colors"
+          aria-label={t('more', '更多')}
+        >
+          <IconDots className="size-5" stroke={1.5} />
+        </button>
+      </div>
+
+      {/* Loading overlay */}
+      {loading && (
+        <div className="absolute inset-0 top-14 flex items-center justify-center bg-background z-10">
+          <div className="flex flex-col items-center gap-3">
+            <div className="size-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+            <p className="text-sm text-muted-foreground">{t('loading', '加载中...')}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Splash screen overlay */}
+      {splashVisible && app?.splashScreen && (
+        <div 
+          className="absolute inset-0 top-14 flex items-center justify-center z-10"
+          style={{ backgroundColor: app.splashScreen.backgroundColor ?? 'var(--background)' }}
+        >
+          <div className="flex flex-col items-center gap-4">
+            {/* 启动屏图标 */}
+            <div className="size-20 rounded-2xl overflow-hidden shadow-lg">
+              <img 
+                src={app.splashScreen.icon ?? app.icon} 
+                alt={app.name}
+                className="size-full object-cover"
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none'
+                }}
+              />
+            </div>
+            {/* 加载指示器 */}
+            <div className="size-6 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
+          </div>
+        </div>
+      )}
+
+      {/* Iframe container */}
+      {app && iframeUrl && (
+        <iframe
+          ref={iframeRef}
+          src={iframeUrl}
+          className="flex-1 w-full border-0"
+          sandbox="allow-scripts allow-forms allow-same-origin"
+          onLoad={handleIframeLoad}
+          title={app.name}
+        />
+      )}
+    </div>
+  )
+}
+
+export default MiniappPage
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
index 385f32c5..5e7723e4 100644
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -16,6 +16,7 @@ import {
   IconLink as Link,
   IconInfoCircle as Info,
   IconDatabase as Database,
+  IconWorld,
 } from '@tabler/icons-react';
 import { PageHeader } from '@/components/layout/page-header';
 import { useCurrentWallet, useLanguage, useCurrency, useTheme, chainConfigStore, chainConfigSelectors } from '@/stores';
@@ -164,7 +165,7 @@ export function SettingsPage() {
   };
 
   return (
-    <div className="bg-muted/30 flex min-h-screen flex-col">
+    <div className="bg-muted/30 flex h-full flex-col overflow-y-auto">
       <PageHeader title={t('common:a11y.tabSettings')} />
 
       <div className="flex-1 space-y-4 p-4">
@@ -264,6 +265,12 @@ export function SettingsPage() {
             label={t('settings:items.chainConfig')}
             onClick={() => navigate({ to: '/settings/chains' })}
           />
+          <div className="bg-border mx-4 h-px" />
+          <SettingsItem
+            icon={<IconWorld size={20} />}
+            label="小程序可信源"
+            onClick={() => navigate({ to: '/settings/sources' })}
+          />
         </SettingsSection>
 
         {/* 关于 */}
@@ -284,6 +291,9 @@ export function SettingsPage() {
             testId="storage-button"
           />
         </SettingsSection>
+
+        {/* TabBar spacer */}
+        <div className="h-[var(--tab-bar-height)]" />
       </div>
 
       <AppearanceSheet
diff --git a/src/providers/AppInitializer.tsx b/src/providers/AppInitializer.tsx
index de71c82d..894a9cfc 100644
--- a/src/providers/AppInitializer.tsx
+++ b/src/providers/AppInitializer.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useState, type ReactNode } from 'react'
 import { addressBookActions, addressBookStore } from '@/stores'
 import { useStore } from '@tanstack/react-store'
+import { initializeThemeHue } from '@/hooks/useWalletTheme'
+
+// 立即执行：在 React 渲染之前应用缓存的主题色，避免闪烁
+initializeThemeHue()
 
 /**
  * App 级别的初始化组件
diff --git a/src/services/ecosystem/__tests__/bridge.test.ts b/src/services/ecosystem/__tests__/bridge.test.ts
new file mode 100644
index 00000000..470ac2f4
--- /dev/null
+++ b/src/services/ecosystem/__tests__/bridge.test.ts
@@ -0,0 +1,90 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { PostMessageBridge } from '../bridge'
+
+describe('PostMessageBridge', () => {
+  let bridge: PostMessageBridge
+
+  beforeEach(() => {
+    bridge = new PostMessageBridge()
+  })
+
+  afterEach(() => {
+    bridge.detach()
+  })
+
+  describe('registerHandler', () => {
+    it('registers a method handler', async () => {
+      const handler = vi.fn().mockResolvedValue({ result: 'test' })
+      bridge.registerHandler('test_method', handler)
+
+      // Handler is registered internally
+      expect(handler).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('attach/detach', () => {
+    it('attaches to iframe and sets up listener', () => {
+      const iframe = document.createElement('iframe')
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener')
+
+      bridge.attach(iframe, 'test-app', 'Test App', ['bio_requestAccounts'])
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith('message', expect.any(Function))
+
+      addEventListenerSpy.mockRestore()
+    })
+
+    it('detaches and removes listener', () => {
+      const iframe = document.createElement('iframe')
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener')
+
+      bridge.attach(iframe, 'test-app', 'Test App')
+      bridge.detach()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('message', expect.any(Function))
+
+      removeEventListenerSpy.mockRestore()
+    })
+
+    it('detaches previous iframe when attaching new one', () => {
+      const iframe1 = document.createElement('iframe')
+      const iframe2 = document.createElement('iframe')
+
+      bridge.attach(iframe1, 'app-1', 'App 1')
+      bridge.attach(iframe2, 'app-2', 'App 2')
+
+      // Should have detached iframe1 and attached iframe2
+      bridge.detach()
+    })
+  })
+
+  describe('emit', () => {
+    it('does nothing when no iframe attached', () => {
+      // Should not throw
+      bridge.emit('test_event', { data: 'test' })
+    })
+
+    it('posts message to iframe contentWindow', () => {
+      const iframe = document.createElement('iframe')
+      const mockPostMessage = vi.fn()
+      
+      // Mock contentWindow
+      Object.defineProperty(iframe, 'contentWindow', {
+        value: { postMessage: mockPostMessage },
+        writable: true,
+      })
+
+      bridge.attach(iframe, 'test-app', 'Test App')
+      bridge.emit('accountsChanged', [{ address: '0x123', chain: 'eth' }])
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'bio_event',
+          event: 'accountsChanged',
+          args: [[{ address: '0x123', chain: 'eth' }]],
+        },
+        expect.any(String) // origin is derived from iframe src
+      )
+    })
+  })
+})
diff --git a/src/services/ecosystem/__tests__/registry.test.ts b/src/services/ecosystem/__tests__/registry.test.ts
new file mode 100644
index 00000000..d4510795
--- /dev/null
+++ b/src/services/ecosystem/__tests__/registry.test.ts
@@ -0,0 +1,131 @@
+import 'fake-indexeddb/auto'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+import { ecosystemStore } from '@/stores/ecosystem'
+import { resetEcosystemStorageForTests } from '../storage'
+import {
+  getSources,
+  refreshSources,
+  getApps,
+  getAppById,
+  searchCachedApps,
+  getFeaturedApps,
+} from '../registry'
+
+describe('Miniapp Registry (Subscription v2)', () => {
+  beforeEach(async () => {
+    localStorage.clear()
+    await resetEcosystemStorageForTests()
+
+    ecosystemStore.setState(() => ({
+      permissions: [],
+      sources: [
+        {
+          url: '/ecosystem.json',
+          name: 'Bio 官方生态',
+          enabled: true,
+          lastUpdated: new Date().toISOString(),
+        },
+      ],
+    }))
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+    vi.restoreAllMocks()
+  })
+
+  it('reads sources from ecosystemStore', () => {
+    const sources = getSources()
+    expect(sources).toHaveLength(1)
+    expect(sources[0]?.url).toBe('/ecosystem.json')
+  })
+
+  it('fetches and caches apps from enabled sources', async () => {
+    const mockApps = [
+      {
+        id: 'xin.dweb.teleport',
+        name: 'Teleport',
+        url: '/miniapps/teleport/',
+        icon: '/miniapps/teleport/icon.svg',
+        description: 'Test',
+        version: '1.0.0',
+      },
+    ]
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Map([['ETag', '"v1"']]),
+      json: () => Promise.resolve({ name: 'x', version: '1', updated: '2025-01-01', apps: mockApps }),
+    })
+
+    const apps = await refreshSources()
+
+    expect(apps).toHaveLength(1)
+    expect(getApps()).toHaveLength(1)
+    expect(getAppById('xin.dweb.teleport')?.name).toBe('Teleport')
+  })
+
+  it('searches cached apps by keyword', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Map(),
+      json: () =>
+        Promise.resolve({
+          name: 'x',
+          version: '1',
+          updated: '2025-01-01',
+          apps: [
+            { id: 'xin.dweb.teleport', name: 'Teleport', url: '/', icon: '', description: 'hello', version: '1.0.0' },
+          ],
+        }),
+    })
+
+    await refreshSources()
+    const results = await searchCachedApps('tele')
+    expect(results.map((r) => r.id)).toEqual(['xin.dweb.teleport'])
+  })
+
+  it('ranks featured apps by featuredScore', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Map(),
+      json: () =>
+        Promise.resolve({
+          name: 'x',
+          version: '1',
+          updated: '2025-01-01',
+          apps: [
+            {
+              id: 'xin.dweb.a',
+              name: 'A',
+              url: '/',
+              icon: '',
+              description: '',
+              version: '1.0.0',
+              officialScore: 100,
+              communityScore: 0,
+            },
+            {
+              id: 'xin.dweb.b',
+              name: 'B',
+              url: '/',
+              icon: '',
+              description: '',
+              version: '1.0.0',
+              officialScore: 0,
+              communityScore: 100,
+            },
+          ],
+        }),
+    })
+
+    await refreshSources()
+    const featured = await getFeaturedApps(1, new Date('2025-01-05T00:00:00.000Z'))
+    expect(featured).toHaveLength(1)
+    expect(featured[0]?.id).toBe('xin.dweb.b')
+  })
+})
diff --git a/src/services/ecosystem/__tests__/types.test.ts b/src/services/ecosystem/__tests__/types.test.ts
new file mode 100644
index 00000000..4278f8fc
--- /dev/null
+++ b/src/services/ecosystem/__tests__/types.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import {
+  BioErrorCodes,
+  createErrorResponse,
+  createSuccessResponse,
+} from '../types'
+
+describe('Bio Ecosystem Types', () => {
+  describe('BioErrorCodes', () => {
+    it('has standard error codes', () => {
+      expect(BioErrorCodes.USER_REJECTED).toBe(4001)
+      expect(BioErrorCodes.UNAUTHORIZED).toBe(4100)
+      expect(BioErrorCodes.UNSUPPORTED_METHOD).toBe(4200)
+      expect(BioErrorCodes.DISCONNECTED).toBe(4900)
+      expect(BioErrorCodes.INTERNAL_ERROR).toBe(-32603)
+      expect(BioErrorCodes.INVALID_PARAMS).toBe(-32602)
+      expect(BioErrorCodes.METHOD_NOT_FOUND).toBe(-32601)
+    })
+  })
+
+  describe('createErrorResponse', () => {
+    it('creates error response with code and message', () => {
+      const response = createErrorResponse('req-1', 4001, 'User rejected')
+      
+      expect(response).toEqual({
+        type: 'bio_response',
+        id: 'req-1',
+        success: false,
+        error: {
+          code: 4001,
+          message: 'User rejected',
+        },
+      })
+    })
+
+    it('includes optional data', () => {
+      const response = createErrorResponse('req-2', -32602, 'Invalid params', { field: 'address' })
+      
+      expect(response.error?.data).toEqual({ field: 'address' })
+    })
+  })
+
+  describe('createSuccessResponse', () => {
+    it('creates success response with result', () => {
+      const result = [{ address: '0x123', chain: 'ethereum' }]
+      const response = createSuccessResponse('req-3', result)
+      
+      expect(response).toEqual({
+        type: 'bio_response',
+        id: 'req-3',
+        success: true,
+        result,
+      })
+    })
+
+    it('handles null result', () => {
+      const response = createSuccessResponse('req-4', null)
+      
+      expect(response.success).toBe(true)
+      expect(response.result).toBeNull()
+    })
+  })
+})
diff --git a/src/services/ecosystem/bridge.ts b/src/services/ecosystem/bridge.ts
new file mode 100644
index 00000000..dcdecbcb
--- /dev/null
+++ b/src/services/ecosystem/bridge.ts
@@ -0,0 +1,219 @@
+/**
+ * PostMessage Bridge for miniapp communication
+ */
+
+import type {
+  BioRequestMessage,
+  BioResponseMessage,
+  BioEventMessage,
+  MethodHandler,
+  HandlerContext,
+} from './types'
+import {
+  BioErrorCodes,
+  createErrorResponse,
+  createSuccessResponse,
+} from './types'
+import {
+  hasPermission,
+  isSensitiveMethod,
+  grantPermissions as storeGrantPermissions,
+} from './permissions'
+
+/** 权限请求回调类型 */
+export type PermissionRequestCallback = (
+  appId: string,
+  appName: string,
+  permissions: string[]
+) => Promise<boolean>
+
+export class PostMessageBridge {
+  private handlers = new Map<string, MethodHandler>()
+  private iframe: HTMLIFrameElement | null = null
+  private appId: string = ''
+  private appName: string = ''
+  private origin: string = '*'
+  private manifestPermissions: string[] = []  // manifest 声明的权限
+  private messageHandler: ((event: MessageEvent) => void) | null = null
+  private permissionRequestCallback: PermissionRequestCallback | null = null
+
+  /** Register a method handler */
+  registerHandler(method: string, handler: MethodHandler): void {
+    this.handlers.set(method, handler)
+  }
+
+  /** Set permission request callback */
+  setPermissionRequestCallback(callback: PermissionRequestCallback | null): void {
+    this.permissionRequestCallback = callback
+  }
+
+  /** Attach to an iframe */
+  attach(
+    iframe: HTMLIFrameElement,
+    appId: string,
+    appName: string,
+    manifestPermissions: string[] = []
+  ): void {
+    this.detach()
+
+    this.iframe = iframe
+    this.appId = appId
+    this.appName = appName
+    this.manifestPermissions = manifestPermissions
+
+    // Get origin from iframe src
+    try {
+      const url = new URL(iframe.src, window.location.origin)
+      this.origin = url.origin
+    } catch {
+      this.origin = '*'
+    }
+
+    this.messageHandler = this.handleMessage.bind(this)
+    window.addEventListener('message', this.messageHandler)
+
+    console.log('[BioProvider] Attached to iframe:', appId)
+  }
+
+  /** Detach from iframe */
+  detach(): void {
+    if (this.messageHandler) {
+      window.removeEventListener('message', this.messageHandler)
+      this.messageHandler = null
+    }
+    this.iframe = null
+    this.appId = ''
+    this.appName = ''
+    this.manifestPermissions = []
+  }
+
+  /** Send event to miniapp */
+  emit(event: string, ...args: unknown[]): void {
+    if (!this.iframe?.contentWindow) return
+
+    const message: BioEventMessage = {
+      type: 'bio_event',
+      event,
+      args,
+    }
+
+    this.iframe.contentWindow.postMessage(message, this.origin)
+  }
+
+  private handleMessage(event: MessageEvent): void {
+    // Validate origin
+    if (this.origin !== '*' && event.origin !== this.origin) {
+      return
+    }
+
+    // Validate source
+    if (event.source !== this.iframe?.contentWindow) {
+      return
+    }
+
+    const data = event.data as BioRequestMessage
+    if (!data || data.type !== 'bio_request') {
+      return
+    }
+
+    this.processRequest(data)
+  }
+
+  private async processRequest(request: BioRequestMessage): Promise<void> {
+    const { id, method, params } = request
+
+    console.log('[BioProvider] Request:', method, params)
+
+    // Check if handler exists
+    const handler = this.handlers.get(method)
+    if (!handler) {
+      this.sendResponse(createErrorResponse(
+        id,
+        BioErrorCodes.METHOD_NOT_FOUND,
+        `Method not found: ${method}`
+      ))
+      return
+    }
+
+    // Check permissions
+    const skipPermissionCheck = ['bio_connect'].includes(method)
+    if (!skipPermissionCheck) {
+      // 1. 检查 manifest 是否声明了该权限
+      if (!this.manifestPermissions.includes(method) && method !== 'bio_requestAccounts') {
+        this.sendResponse(createErrorResponse(
+          id,
+          BioErrorCodes.UNAUTHORIZED,
+          `Permission not declared in manifest: ${method}`
+        ))
+        return
+      }
+
+      // 2. 对于敏感方法，检查用户是否已授权
+      if (isSensitiveMethod(method)) {
+        const granted = hasPermission(this.appId, method)
+        if (!granted) {
+          // 请求权限
+          const approved = await this.requestPermission([method])
+          if (!approved) {
+            this.sendResponse(createErrorResponse(
+              id,
+              BioErrorCodes.USER_REJECTED,
+              'Permission denied by user'
+            ))
+            return
+          }
+        }
+      }
+    }
+
+    // Execute handler
+    try {
+      const context: HandlerContext = {
+        appId: this.appId,
+        appName: this.appName,
+        origin: this.origin,
+        permissions: this.manifestPermissions,
+      }
+
+      const result = await handler(params?.[0], context)
+      this.sendResponse(createSuccessResponse(id, result))
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      const code = (error as { code?: number }).code ?? BioErrorCodes.INTERNAL_ERROR
+      this.sendResponse(createErrorResponse(id, code, message))
+    }
+  }
+
+  /** 请求用户授权权限 */
+  private async requestPermission(permissions: string[]): Promise<boolean> {
+    if (!this.permissionRequestCallback) {
+      console.warn('[BioProvider] No permission request callback set')
+      return false
+    }
+
+    try {
+      const approved = await this.permissionRequestCallback(
+        this.appId,
+        this.appName,
+        permissions
+      )
+      if (approved) {
+        storeGrantPermissions(this.appId, permissions)
+      }
+      return approved
+    } catch (error) {
+      console.error('[BioProvider] Permission request failed:', error)
+      return false
+    }
+  }
+
+  private sendResponse(response: BioResponseMessage): void {
+    if (!this.iframe?.contentWindow) return
+
+    console.log('[BioProvider] Response:', response)
+    this.iframe.contentWindow.postMessage(response, this.origin)
+  }
+}
+
+/** Singleton bridge instance */
+export const bridge = new PostMessageBridge()
diff --git a/src/services/ecosystem/handlers/context.ts b/src/services/ecosystem/handlers/context.ts
new file mode 100644
index 00000000..559d7cdd
--- /dev/null
+++ b/src/services/ecosystem/handlers/context.ts
@@ -0,0 +1,99 @@
+/**
+ * Handler Context
+ * 管理小程序回调的注册中心，支持多实例
+ */
+
+import type { BioAccount, BioSignedTransaction, BioUnsignedTransaction, TransferParams } from '../types'
+
+/** 小程序信息（用于在 Sheet 中显示） */
+export interface MiniappInfo {
+  name: string
+  icon?: string
+}
+
+/** 签名参数 */
+export interface SigningParams {
+  message: string
+  address: string
+  app: MiniappInfo
+}
+
+/** 交易签名参数 */
+export interface SignTransactionParams {
+  from: string
+  chain: string
+  unsignedTx: BioUnsignedTransaction
+  app: MiniappInfo
+}
+
+/** Handler 回调接口 */
+export interface HandlerCallbacks {
+  showWalletPicker: (opts?: { chain?: string; exclude?: string; app?: MiniappInfo }) => Promise<BioAccount | null>
+  getConnectedAccounts: () => BioAccount[]
+  showSigningDialog: (params: SigningParams) => Promise<string | null>
+  showTransferDialog: (params: TransferParams & { app: MiniappInfo }) => Promise<{ txHash: string } | null>
+  showSignTransactionDialog: (params: SignTransactionParams) => Promise<BioSignedTransaction | null>
+}
+
+/** 回调注册表 */
+const callbackRegistry = new Map<string, HandlerCallbacks>()
+
+/**
+ * Handler 上下文管理
+ */
+export const HandlerContext = {
+  /**
+   * 注册回调
+   */
+  register(appId: string, callbacks: HandlerCallbacks): void {
+    callbackRegistry.set(appId, callbacks)
+    console.log('[HandlerContext] Registered callbacks for:', appId)
+  },
+
+  /**
+   * 注销回调
+   */
+  unregister(appId: string): void {
+    callbackRegistry.delete(appId)
+    console.log('[HandlerContext] Unregistered callbacks for:', appId)
+  },
+
+  /**
+   * 获取回调
+   */
+  get(appId: string): HandlerCallbacks | undefined {
+    return callbackRegistry.get(appId)
+  },
+
+  /**
+   * 检查是否有注册的回调
+   */
+  has(appId: string): boolean {
+    return callbackRegistry.has(appId)
+  },
+
+  /**
+   * 获取所有已注册的 appId
+   */
+  getRegisteredApps(): string[] {
+    return Array.from(callbackRegistry.keys())
+  },
+
+  /**
+   * 清除所有回调（用于测试）
+   */
+  clear(): void {
+    callbackRegistry.clear()
+  },
+}
+
+/**
+ * 获取指定应用的回调，如果不存在则抛出错误
+ */
+export function getCallbacksOrThrow(appId: string): HandlerCallbacks {
+  const callbacks = HandlerContext.get(appId)
+  if (!callbacks) {
+    throw new Error(`No callbacks registered for app: ${appId}`)
+  }
+  return callbacks
+}
diff --git a/src/services/ecosystem/handlers/index.ts b/src/services/ecosystem/handlers/index.ts
new file mode 100644
index 00000000..c136076c
--- /dev/null
+++ b/src/services/ecosystem/handlers/index.ts
@@ -0,0 +1,35 @@
+/**
+ * Handler exports
+ */
+
+export { HandlerContext, getCallbacksOrThrow, type HandlerCallbacks, type SigningParams, type SignTransactionParams } from './context'
+
+export {
+  handleConnect,
+  handleRequestAccounts,
+  handleAccounts,
+  handleSelectAccount,
+  handlePickWallet,
+  handleChainId,
+  handleGetBalance,
+  setWalletPicker,
+  setGetAccounts,
+} from './wallet'
+
+export {
+  handleSignMessage,
+  handleSignTypedData,
+  setSigningDialog,
+} from './signing'
+
+export {
+  handleSendTransaction,
+  setTransferDialog,
+} from './transfer'
+
+export {
+  handleCreateTransaction,
+  handleSignTransaction,
+  setSignTransactionDialog,
+  signUnsignedTransaction,
+} from './transaction'
diff --git a/src/services/ecosystem/handlers/signing.ts b/src/services/ecosystem/handlers/signing.ts
new file mode 100644
index 00000000..72fddc78
--- /dev/null
+++ b/src/services/ecosystem/handlers/signing.ts
@@ -0,0 +1,74 @@
+/**
+ * Signing-related method handlers
+ */
+
+import type { MethodHandler } from '../types'
+import { BioErrorCodes } from '../types'
+import { HandlerContext, type SigningParams } from './context'
+
+// 兼容旧 API
+let _showSigningDialog: ((params: SigningParams) => Promise<string | null>) | null = null
+
+/** @deprecated 使用 HandlerContext.register 替代 */
+export function setSigningDialog(dialog: typeof _showSigningDialog): void {
+  _showSigningDialog = dialog
+}
+
+/** 获取签名对话框 */
+function getSigningDialog(appId: string) {
+  const callbacks = HandlerContext.get(appId)
+  return callbacks?.showSigningDialog ?? _showSigningDialog
+}
+
+/** bio_signMessage - Sign a message */
+export const handleSignMessage: MethodHandler = async (params, context) => {
+  const opts = params as { message?: string; address?: string } | undefined
+  if (!opts?.message || !opts?.address) {
+    throw Object.assign(new Error('Missing message or address'), { code: BioErrorCodes.INVALID_PARAMS })
+  }
+
+  const showSigningDialog = getSigningDialog(context.appId)
+  if (!showSigningDialog) {
+    throw Object.assign(new Error('Signing dialog not available'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  const signature = await showSigningDialog({
+    message: opts.message,
+    address: opts.address,
+    app: { name: context.appName },
+  })
+
+  if (!signature) {
+    throw Object.assign(new Error('User rejected'), { code: BioErrorCodes.USER_REJECTED })
+  }
+
+  return signature
+}
+
+/** bio_signTypedData - Sign typed data */
+export const handleSignTypedData: MethodHandler = async (params, context) => {
+  const opts = params as { data?: object; address?: string } | undefined
+  if (!opts?.data || !opts?.address) {
+    throw Object.assign(new Error('Missing data or address'), { code: BioErrorCodes.INVALID_PARAMS })
+  }
+
+  const showSigningDialog = getSigningDialog(context.appId)
+  if (!showSigningDialog) {
+    throw Object.assign(new Error('Signing dialog not available'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  // Convert typed data to readable message
+  const message = JSON.stringify(opts.data, null, 2)
+
+  const signature = await showSigningDialog({
+    message,
+    address: opts.address,
+    app: { name: context.appName },
+  })
+
+  if (!signature) {
+    throw Object.assign(new Error('User rejected'), { code: BioErrorCodes.USER_REJECTED })
+  }
+
+  return signature
+}
diff --git a/src/services/ecosystem/handlers/transaction.ts b/src/services/ecosystem/handlers/transaction.ts
new file mode 100644
index 00000000..26260c19
--- /dev/null
+++ b/src/services/ecosystem/handlers/transaction.ts
@@ -0,0 +1,194 @@
+/**
+ * Transaction pipeline handlers
+ *
+ * - bio_createTransaction: build unsigned tx (no signature, no broadcast)
+ * - bio_signTransaction: sign unsigned tx (requires user confirmation)
+ */
+
+import type { MethodHandler, TransferParams, BioUnsignedTransaction, BioSignedTransaction } from '../types'
+import { BioErrorCodes } from '../types'
+import { HandlerContext, type MiniappInfo, type SignTransactionParams } from './context'
+
+import { Amount } from '@/types/amount'
+import { chainConfigActions, chainConfigSelectors, chainConfigStore, walletStore } from '@/stores'
+import { getAdapterRegistry, setupAdapters } from '@/services/chain-adapter'
+import { hexToBytes } from '@noble/hashes/utils.js'
+import { deriveKey } from '@/lib/crypto/derivation'
+import { createBioforestKeypair, publicKeyToBioforestAddress } from '@/lib/crypto'
+
+let adaptersInitialized = false
+function ensureAdapters(): void {
+  if (adaptersInitialized) return
+  setupAdapters()
+  adaptersInitialized = true
+}
+
+function findWalletIdByAddress(chainId: string, address: string): string | null {
+  const wallets = walletStore.state.wallets
+  const isHexLike = address.startsWith('0x')
+  const normalized = isHexLike ? address.toLowerCase() : address
+
+  for (const wallet of wallets) {
+    const match = wallet.chainAddresses.find((ca) => {
+      if (ca.chain !== chainId) return false
+      if (isHexLike || ca.address.startsWith('0x')) {
+        return ca.address.toLowerCase() === normalized
+      }
+      return ca.address === normalized
+    })
+    if (match) return wallet.id
+  }
+  return null
+}
+
+async function getChainConfigOrThrow(chainId: string) {
+  if (!chainConfigStore.state.snapshot) {
+    await chainConfigActions.initialize()
+  }
+
+  const snapshot = chainConfigStore.state.snapshot
+  if (!snapshot) {
+    throw Object.assign(new Error('Chain configs not initialized'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  const config = chainConfigSelectors.getChainById(chainConfigStore.state, chainId)
+  if (!config) {
+    throw Object.assign(new Error(`Unsupported chain: ${chainId}`), { code: BioErrorCodes.INVALID_PARAMS })
+  }
+
+  return config
+}
+
+/** bio_createTransaction - build unsigned tx */
+export const handleCreateTransaction: MethodHandler = async (params, _context) => {
+  const opts = params as Partial<TransferParams> | undefined
+  if (!opts?.from || !opts?.to || !opts?.amount || !opts?.chain) {
+    throw Object.assign(
+      new Error('Missing required parameters: from, to, amount, chain'),
+      { code: BioErrorCodes.INVALID_PARAMS },
+    )
+  }
+
+  const walletId = findWalletIdByAddress(opts.chain, opts.from)
+  if (!walletId) {
+    throw Object.assign(
+      new Error('From address is not owned by current user'),
+      { code: BioErrorCodes.UNAUTHORIZED },
+    )
+  }
+
+  const chainConfig = await getChainConfigOrThrow(opts.chain)
+  const amount = Amount.parse(opts.amount, chainConfig.decimals, chainConfig.symbol)
+
+  ensureAdapters()
+  const registry = getAdapterRegistry()
+  const adapter = registry.getAdapter(chainConfig.id)
+  if (!adapter) {
+    throw Object.assign(new Error(`No adapter for chain: ${chainConfig.id}`), { code: BioErrorCodes.UNSUPPORTED_METHOD })
+  }
+
+  const unsignedTx = await adapter.transaction.buildTransaction({
+    from: opts.from,
+    to: opts.to,
+    amount,
+  })
+
+  const result: BioUnsignedTransaction = {
+    chainId: unsignedTx.chainId,
+    data: unsignedTx.data,
+  }
+
+  return result
+}
+
+// 兼容旧 API
+let _showSignTransactionDialog: ((params: SignTransactionParams) => Promise<BioSignedTransaction | null>) | null = null
+
+/** @deprecated 使用 HandlerContext.register 替代 */
+export function setSignTransactionDialog(dialog: typeof _showSignTransactionDialog): void {
+  _showSignTransactionDialog = dialog
+}
+
+function getSignTransactionDialog(appId: string) {
+  const callbacks = HandlerContext.get(appId)
+  return callbacks?.showSignTransactionDialog ?? _showSignTransactionDialog
+}
+
+/** bio_signTransaction - sign an unsigned tx (requires user confirmation) */
+export const handleSignTransaction: MethodHandler = async (params, context) => {
+  const opts = params as { from?: string; chain?: string; unsignedTx?: BioUnsignedTransaction } | undefined
+  if (!opts?.from || !opts?.chain || !opts?.unsignedTx) {
+    throw Object.assign(new Error('Missing required parameters: from, chain, unsignedTx'), { code: BioErrorCodes.INVALID_PARAMS })
+  }
+
+  const showDialog = getSignTransactionDialog(context.appId)
+  if (!showDialog) {
+    throw Object.assign(new Error('SignTransaction dialog not available'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  const result = await showDialog({
+    from: opts.from,
+    chain: opts.chain,
+    unsignedTx: opts.unsignedTx,
+    app: { name: context.appName } satisfies MiniappInfo,
+  })
+
+  if (!result) {
+    throw Object.assign(new Error('User rejected'), { code: BioErrorCodes.USER_REJECTED })
+  }
+
+  return result
+}
+
+/**
+ * Low-level signing helper for UI implementations.
+ * Not exposed to miniapps directly.
+ */
+export async function signUnsignedTransaction(params: {
+  walletId: string
+  password: string
+  from: string
+  chainId: string
+  unsignedTx: BioUnsignedTransaction
+}): Promise<BioSignedTransaction> {
+  const chainConfig = await getChainConfigOrThrow(params.chainId)
+
+  ensureAdapters()
+  const registry = getAdapterRegistry()
+  const adapter = registry.getAdapter(chainConfig.id)
+  if (!adapter) {
+    throw Object.assign(new Error(`No adapter for chain: ${chainConfig.id}`), { code: BioErrorCodes.UNSUPPORTED_METHOD })
+  }
+
+  // Derive chain private key from mnemonic/arbitrary secret.
+  const mnemonic = await (await import('@/services/wallet-storage')).walletStorageService.getMnemonic(params.walletId, params.password)
+
+  let privateKeyBytes: Uint8Array
+  if (chainConfig.type === 'evm') {
+    const derived = deriveKey(mnemonic, 'ethereum', 0, 0)
+    if (derived.address.toLowerCase() !== params.from.toLowerCase()) {
+      throw Object.assign(new Error('Signing address mismatch'), { code: BioErrorCodes.INVALID_PARAMS })
+    }
+    privateKeyBytes = hexToBytes(derived.privateKey)
+  } else if (chainConfig.type === 'bioforest') {
+    const keypair = createBioforestKeypair(mnemonic)
+    const derivedAddress = publicKeyToBioforestAddress(keypair.publicKey, chainConfig.prefix ?? 'b')
+    if (derivedAddress !== params.from) {
+      throw Object.assign(new Error('Signing address mismatch'), { code: BioErrorCodes.INVALID_PARAMS })
+    }
+    privateKeyBytes = keypair.secretKey
+  } else {
+    throw Object.assign(new Error(`Unsupported chain type: ${chainConfig.type}`), { code: BioErrorCodes.UNSUPPORTED_METHOD })
+  }
+
+  const signed = await adapter.transaction.signTransaction(
+    { chainId: params.unsignedTx.chainId, data: params.unsignedTx.data },
+    privateKeyBytes,
+  )
+
+  return {
+    chainId: signed.chainId,
+    data: signed.data,
+    signature: signed.signature,
+  }
+}
diff --git a/src/services/ecosystem/handlers/transfer.ts b/src/services/ecosystem/handlers/transfer.ts
new file mode 100644
index 00000000..82fb0243
--- /dev/null
+++ b/src/services/ecosystem/handlers/transfer.ts
@@ -0,0 +1,56 @@
+/**
+ * Transfer-related method handlers
+ */
+
+import type { MethodHandler, TransferParams } from '../types'
+import { BioErrorCodes } from '../types'
+import { HandlerContext, type MiniappInfo } from './context'
+
+// 兼容旧 API
+let _showTransferDialog: ((params: TransferParams & { app: MiniappInfo }) => Promise<{ txHash: string } | null>) | null = null
+
+/** @deprecated 使用 HandlerContext.register 替代 */
+export function setTransferDialog(dialog: typeof _showTransferDialog): void {
+  _showTransferDialog = dialog
+}
+
+/** 获取转账对话框 */
+function getTransferDialog(appId: string) {
+  const callbacks = HandlerContext.get(appId)
+  return callbacks?.showTransferDialog ?? _showTransferDialog
+}
+
+/** bio_sendTransaction - Send a transaction */
+export const handleSendTransaction: MethodHandler = async (params, context) => {
+  const opts = params as Partial<TransferParams> | undefined
+  if (!opts?.from || !opts?.to || !opts?.amount || !opts?.chain) {
+    throw Object.assign(
+      new Error('Missing required parameters: from, to, amount, chain'),
+      { code: BioErrorCodes.INVALID_PARAMS }
+    )
+  }
+
+  const showTransferDialog = getTransferDialog(context.appId)
+  if (!showTransferDialog) {
+    throw Object.assign(new Error('Transfer dialog not available'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  const transferParams: TransferParams & { app: MiniappInfo } = {
+    from: opts.from,
+    to: opts.to,
+    amount: opts.amount,
+    chain: opts.chain,
+    app: { name: context.appName },
+  }
+  if (opts.asset) {
+    transferParams.asset = opts.asset
+  }
+
+  const result = await showTransferDialog(transferParams)
+
+  if (!result) {
+    throw Object.assign(new Error('User rejected'), { code: BioErrorCodes.USER_REJECTED })
+  }
+
+  return result
+}
diff --git a/src/services/ecosystem/handlers/wallet.ts b/src/services/ecosystem/handlers/wallet.ts
new file mode 100644
index 00000000..6ebc2ace
--- /dev/null
+++ b/src/services/ecosystem/handlers/wallet.ts
@@ -0,0 +1,111 @@
+/**
+ * Wallet-related method handlers
+ */
+
+import type { MethodHandler, BioAccount } from '../types'
+import { BioErrorCodes } from '../types'
+import { HandlerContext } from './context'
+
+// 兼容旧 API，逐步迁移到 HandlerContext
+let _showWalletPicker: ((opts?: { chain?: string; exclude?: string }) => Promise<BioAccount | null>) | null = null
+let _getConnectedAccounts: (() => BioAccount[]) | null = null
+
+/** @deprecated 使用 HandlerContext.register 替代 */
+export function setWalletPicker(picker: typeof _showWalletPicker): void {
+  _showWalletPicker = picker
+}
+
+/** @deprecated 使用 HandlerContext.register 替代 */
+export function setGetAccounts(getter: typeof _getConnectedAccounts): void {
+  _getConnectedAccounts = getter
+}
+
+/** 获取钱包选择器 */
+function getWalletPicker(appId: string) {
+  const callbacks = HandlerContext.get(appId)
+  return callbacks?.showWalletPicker ?? _showWalletPicker
+}
+
+/** 获取已连接账户函数 */
+function getAccountsGetter(appId: string) {
+  const callbacks = HandlerContext.get(appId)
+  return callbacks?.getConnectedAccounts ?? _getConnectedAccounts
+}
+
+/** bio_connect - Internal handshake */
+export const handleConnect: MethodHandler = async (_params, _context) => {
+  return { connected: true }
+}
+
+/** bio_requestAccounts - Request wallet connection (shows UI) */
+export const handleRequestAccounts: MethodHandler = async (_params, context) => {
+  const showWalletPicker = getWalletPicker(context.appId)
+  if (!showWalletPicker) {
+    throw Object.assign(new Error('Wallet picker not available'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  const wallet = await showWalletPicker()
+  if (!wallet) {
+    throw Object.assign(new Error('User rejected'), { code: BioErrorCodes.USER_REJECTED })
+  }
+
+  return [wallet]
+}
+
+/** bio_accounts - Get connected accounts (no UI) */
+export const handleAccounts: MethodHandler = async (_params, context) => {
+  const getConnectedAccounts = getAccountsGetter(context.appId)
+  if (!getConnectedAccounts) {
+    return []
+  }
+  return getConnectedAccounts()
+}
+
+/** bio_selectAccount - Select an account (shows picker) */
+export const handleSelectAccount: MethodHandler = async (params, context) => {
+  const showWalletPicker = getWalletPicker(context.appId)
+  if (!showWalletPicker) {
+    throw Object.assign(new Error('Wallet picker not available'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  const opts = params as { chain?: string } | undefined
+  const wallet = await showWalletPicker(opts)
+  if (!wallet) {
+    throw Object.assign(new Error('User rejected'), { code: BioErrorCodes.USER_REJECTED })
+  }
+
+  return wallet
+}
+
+/** bio_pickWallet - Pick another wallet address */
+export const handlePickWallet: MethodHandler = async (params, context) => {
+  const showWalletPicker = getWalletPicker(context.appId)
+  if (!showWalletPicker) {
+    throw Object.assign(new Error('Wallet picker not available'), { code: BioErrorCodes.INTERNAL_ERROR })
+  }
+
+  const opts = params as { chain?: string; exclude?: string } | undefined
+  const account = await showWalletPicker(opts)
+  if (!account) {
+    throw Object.assign(new Error('User rejected'), { code: BioErrorCodes.USER_REJECTED })
+  }
+
+  return account
+}
+
+/** bio_chainId - Get current chain ID */
+export const handleChainId: MethodHandler = async (_params, _context) => {
+  // TODO: Get from current selected chain
+  return 'bfmeta'
+}
+
+/** bio_getBalance - Get balance */
+export const handleGetBalance: MethodHandler = async (params, _context) => {
+  const opts = params as { address?: string; chain?: string } | undefined
+  if (!opts?.address || !opts?.chain) {
+    throw Object.assign(new Error('Missing address or chain'), { code: BioErrorCodes.INVALID_PARAMS })
+  }
+
+  // TODO: Query actual balance from chain adapter
+  return '0'
+}
diff --git a/src/services/ecosystem/index.ts b/src/services/ecosystem/index.ts
new file mode 100644
index 00000000..65e2bfa2
--- /dev/null
+++ b/src/services/ecosystem/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Bio Ecosystem Service
+ */
+
+export * from './types'
+export * from './bridge'
+export * from './provider'
+export * from './registry'
+export * from './my-apps'
diff --git a/src/services/ecosystem/my-apps.ts b/src/services/ecosystem/my-apps.ts
new file mode 100644
index 00000000..023ffb84
--- /dev/null
+++ b/src/services/ecosystem/my-apps.ts
@@ -0,0 +1,74 @@
+/**
+ * My Apps - 本地已安装应用管理
+ */
+
+const MY_APPS_KEY = 'ecosystem_my_apps'
+
+export interface MyAppRecord {
+  appId: string
+  installedAt: number
+  lastUsedAt: number
+}
+
+const LEGACY_APP_ID_MAP: Record<string, string> = {
+  teleport: 'xin.dweb.teleport',
+  forge: 'xin.dweb.forge',
+}
+
+function normalizeAppId(appId: string): string {
+  return LEGACY_APP_ID_MAP[appId] ?? appId
+}
+
+export function loadMyApps(): MyAppRecord[] {
+  try {
+    const raw = localStorage.getItem(MY_APPS_KEY)
+    const parsed = raw ? (JSON.parse(raw) as MyAppRecord[]) : []
+
+    // Migrate legacy short ids to reverse-domain ids (best-effort).
+    const migrated = parsed.map((r) => ({
+      ...r,
+      appId: normalizeAppId(r.appId),
+    }))
+
+    if (JSON.stringify(parsed) !== JSON.stringify(migrated)) {
+      saveMyApps(migrated)
+    }
+
+    return migrated
+  } catch {
+    return []
+  }
+}
+
+export function saveMyApps(apps: MyAppRecord[]): void {
+  localStorage.setItem(MY_APPS_KEY, JSON.stringify(apps))
+}
+
+export function isInMyApps(appId: string): boolean {
+  return loadMyApps().some((a) => a.appId === normalizeAppId(appId))
+}
+
+export function addToMyApps(appId: string): void {
+  appId = normalizeAppId(appId)
+  const apps = loadMyApps()
+  if (!apps.some((a) => a.appId === appId)) {
+    apps.unshift({ appId, installedAt: Date.now(), lastUsedAt: Date.now() })
+    saveMyApps(apps)
+  }
+}
+
+export function updateLastUsed(appId: string): void {
+  appId = normalizeAppId(appId)
+  const apps = loadMyApps()
+  const app = apps.find((a) => a.appId === appId)
+  if (app) {
+    app.lastUsedAt = Date.now()
+    saveMyApps(apps)
+  }
+}
+
+export function removeFromMyApps(appId: string): void {
+  appId = normalizeAppId(appId)
+  const apps = loadMyApps().filter((a) => a.appId !== appId)
+  saveMyApps(apps)
+}
diff --git a/src/services/ecosystem/permissions.ts b/src/services/ecosystem/permissions.ts
new file mode 100644
index 00000000..344694b5
--- /dev/null
+++ b/src/services/ecosystem/permissions.ts
@@ -0,0 +1,148 @@
+/**
+ * 权限控制模块
+ * 管理小程序的权限请求和检查
+ */
+
+import { ecosystemStore, ecosystemSelectors, ecosystemActions } from '@/stores/ecosystem'
+
+/** 敏感方法列表（需要用户确认） */
+export const SENSITIVE_METHODS = [
+  'bio_signMessage',
+  'bio_signTypedData',
+  'bio_signTransaction',
+  'bio_sendTransaction',
+] as const
+
+/** 所有可授权的方法 */
+export const ALL_PERMISSIONS = [
+  'bio_requestAccounts',
+  'bio_accounts',
+  'bio_selectAccount',
+  'bio_pickWallet',
+  'bio_chainId',
+  'bio_getBalance',
+  'bio_createTransaction',
+  ...SENSITIVE_METHODS,
+] as const
+
+export type Permission = (typeof ALL_PERMISSIONS)[number]
+export type SensitiveMethod = (typeof SENSITIVE_METHODS)[number]
+
+/**
+ * 检查方法是否为敏感方法
+ */
+export function isSensitiveMethod(method: string): method is SensitiveMethod {
+  return SENSITIVE_METHODS.includes(method as SensitiveMethod)
+}
+
+/**
+ * 检查应用是否有指定权限
+ */
+export function hasPermission(appId: string, permission: string): boolean {
+  // 非敏感方法默认允许
+  if (!isSensitiveMethod(permission)) {
+    return true
+  }
+  return ecosystemSelectors.hasPermission(ecosystemStore.state, appId, permission)
+}
+
+/**
+ * 检查应用是否有所有指定权限
+ */
+export function hasAllPermissions(appId: string, permissions: string[]): boolean {
+  return permissions.every((p) => hasPermission(appId, p))
+}
+
+/**
+ * 获取应用已授权的权限
+ */
+export function getGrantedPermissions(appId: string): string[] {
+  return ecosystemSelectors.getGrantedPermissions(ecosystemStore.state, appId)
+}
+
+/**
+ * 获取应用缺失的权限
+ */
+export function getMissingPermissions(appId: string, requested: string[]): string[] {
+  return requested.filter((p) => !hasPermission(appId, p))
+}
+
+/**
+ * 授予权限
+ */
+export function grantPermissions(appId: string, permissions: string[]): void {
+  ecosystemActions.grantPermissions(appId, permissions)
+}
+
+/**
+ * 撤销权限
+ */
+export function revokePermissions(appId: string, permissions?: string[]): void {
+  ecosystemActions.revokePermissions(appId, permissions)
+}
+
+/**
+ * 获取权限的显示信息
+ */
+export function getPermissionInfo(permission: string): {
+  label: string
+  description: string
+  sensitive: boolean
+} {
+  const info: Record<string, { label: string; description: string }> = {
+    bio_requestAccounts: {
+      label: '查看账户',
+      description: '查看您的钱包地址',
+    },
+    bio_accounts: {
+      label: '获取账户',
+      description: '获取已连接的账户列表',
+    },
+    bio_selectAccount: {
+      label: '选择账户',
+      description: '选择要使用的账户',
+    },
+    bio_pickWallet: {
+      label: '选择钱包',
+      description: '选择目标钱包地址',
+    },
+    bio_chainId: {
+      label: '获取链 ID',
+      description: '获取当前区块链网络',
+    },
+    bio_getBalance: {
+      label: '查询余额',
+      description: '查询账户余额',
+    },
+    bio_createTransaction: {
+      label: '创建交易',
+      description: '构造未签名交易（不做签名/不做广播）',
+    },
+    bio_signMessage: {
+      label: '签名消息',
+      description: '请求签名消息（需要您确认）',
+    },
+    bio_signTypedData: {
+      label: '签名数据',
+      description: '请求签名结构化数据（需要您确认）',
+    },
+    bio_signTransaction: {
+      label: '签名交易',
+      description: '请求签名交易（需要您确认）',
+    },
+    bio_sendTransaction: {
+      label: '发送交易',
+      description: '请求发送转账（需要您确认）',
+    },
+  }
+
+  const defaultInfo = {
+    label: permission,
+    description: '未知权限',
+  }
+
+  return {
+    ...(info[permission] ?? defaultInfo),
+    sensitive: isSensitiveMethod(permission),
+  }
+}
diff --git a/src/services/ecosystem/provider.ts b/src/services/ecosystem/provider.ts
new file mode 100644
index 00000000..f9dc80af
--- /dev/null
+++ b/src/services/ecosystem/provider.ts
@@ -0,0 +1,73 @@
+/**
+ * Bio Provider Host
+ *
+ * Registers all handlers and manages the PostMessage bridge
+ */
+
+import { bridge } from './bridge'
+import {
+  handleConnect,
+  handleRequestAccounts,
+  handleAccounts,
+  handleSelectAccount,
+  handlePickWallet,
+  handleChainId,
+  handleGetBalance,
+  handleSignMessage,
+  handleSignTypedData,
+  handleCreateTransaction,
+  handleSignTransaction,
+  handleSendTransaction,
+} from './handlers'
+
+/** Initialize the Bio provider with all handlers */
+export function initBioProvider(): void {
+  // Wallet methods
+  bridge.registerHandler('bio_connect', handleConnect)
+  bridge.registerHandler('bio_requestAccounts', handleRequestAccounts)
+  bridge.registerHandler('bio_accounts', handleAccounts)
+  bridge.registerHandler('bio_selectAccount', handleSelectAccount)
+  bridge.registerHandler('bio_pickWallet', handlePickWallet)
+  bridge.registerHandler('bio_chainId', handleChainId)
+  bridge.registerHandler('bio_getBalance', handleGetBalance)
+
+  // Signing methods
+  bridge.registerHandler('bio_signMessage', handleSignMessage)
+  bridge.registerHandler('bio_signTypedData', handleSignTypedData)
+
+  // Transaction pipeline
+  bridge.registerHandler('bio_createTransaction', handleCreateTransaction)
+  bridge.registerHandler('bio_signTransaction', handleSignTransaction)
+
+  // Transfer methods
+  bridge.registerHandler('bio_sendTransaction', handleSendTransaction)
+
+  console.log('[BioProvider] Initialized with handlers:', [
+    'bio_connect',
+    'bio_requestAccounts',
+    'bio_accounts',
+    'bio_selectAccount',
+    'bio_pickWallet',
+    'bio_chainId',
+    'bio_getBalance',
+    'bio_signMessage',
+    'bio_signTypedData',
+    'bio_createTransaction',
+    'bio_signTransaction',
+    'bio_sendTransaction',
+  ])
+}
+
+/** Get the bridge instance */
+export function getBridge() {
+  return bridge
+}
+
+/** Re-export handler setters for React integration */
+export {
+  setWalletPicker,
+  setGetAccounts,
+  setSigningDialog,
+  setTransferDialog,
+  setSignTransactionDialog,
+} from './handlers'
diff --git a/src/services/ecosystem/registry.ts b/src/services/ecosystem/registry.ts
new file mode 100644
index 00000000..5404118e
--- /dev/null
+++ b/src/services/ecosystem/registry.ts
@@ -0,0 +1,357 @@
+/**
+ * Miniapp Registry (Subscription v2)
+ *
+ * Responsibilities:
+ * - Read trusted source configs from `ecosystemStore`
+ * - Cache source payloads in IndexedDB (ETag/304)
+ * - Provide merged app catalog + helpers (ranking/search)
+ */
+
+import { ecosystemStore, ecosystemSelectors, ecosystemActions } from '@/stores/ecosystem'
+import type { EcosystemSource, MiniappManifest, SourceRecord } from './types'
+import { EcosystemSearchResponseSchema, EcosystemSourceSchema } from './schema'
+import { loadSourcePayload, saveSourcePayload } from './storage'
+import { computeFeaturedScore } from './scoring'
+import { createResolver } from '@/lib/url-resolver'
+
+const REQUEST_TIMEOUT = 10_000
+
+const SUPPORTED_SEARCH_RESPONSE_VERSIONS = new Set(['1', '1.0.0'])
+
+/** Cached apps from enabled sources */
+let cachedApps: MiniappManifest[] = []
+
+type AppsSubscriber = (apps: MiniappManifest[]) => void
+const appSubscribers: AppsSubscriber[] = []
+
+function notifyApps(): void {
+  const snapshot = [...cachedApps]
+  appSubscribers.forEach((fn) => fn(snapshot))
+}
+
+export function subscribeApps(listener: AppsSubscriber): () => void {
+  appSubscribers.push(listener)
+  return () => {
+    const index = appSubscribers.indexOf(listener)
+    if (index >= 0) appSubscribers.splice(index, 1)
+  }
+}
+
+function isValidAppId(appId: string): boolean {
+  // Reverse-domain style: com.domain.my-app (must contain at least one dot)
+  return /^[a-z0-9]+(?:\.[a-z0-9-]+)+$/i.test(appId)
+}
+
+function normalizeAppFromSource(app: MiniappManifest, source: SourceRecord, payload: EcosystemSource): MiniappManifest | null {
+  if (!isValidAppId(app.id)) {
+    console.warn(`[Registry] Invalid appId "${app.id}" from source "${source.url}", skipping`)
+    return null
+  }
+
+  // 创建基于 source URL 的路径解析器
+  const resolve = createResolver(source.url)
+
+  return {
+    ...app,
+    // 解析相对路径
+    icon: resolve(app.icon),
+    url: resolve(app.url),
+    screenshots: app.screenshots?.map(resolve),
+    splashScreen: app.splashScreen
+      ? {
+          ...app.splashScreen,
+          icon: app.splashScreen.icon ? resolve(app.splashScreen.icon) : undefined,
+        }
+      : undefined,
+    // 来源元数据
+    sourceUrl: source.url,
+    sourceName: source.name,
+    sourceIcon: source.icon ?? (payload.icon ? resolve(payload.icon) : undefined),
+  }
+}
+
+function requestWithTimeout(input: RequestInfo | URL, init?: RequestInit, timeoutMs = REQUEST_TIMEOUT): Promise<Response> {
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
+
+  return fetch(input, { ...init, signal: controller.signal })
+    .finally(() => clearTimeout(timeoutId))
+}
+
+async function fetchSourceWithCache(url: string, force: boolean): Promise<EcosystemSource | null> {
+  const cached = await loadSourcePayload(url)
+  const etag = !force ? cached?.etag : undefined
+
+  try {
+    const response = await requestWithTimeout(url, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        ...(etag !== undefined ? { 'If-None-Match': etag } : {}),
+      },
+    })
+
+    if (response.status === 304) {
+      return cached?.payload ?? null
+    }
+
+    if (!response.ok) {
+      console.warn(`[Registry] Failed to fetch source: ${url}`, response.status, response.statusText)
+      return cached?.payload ?? null
+    }
+
+    const json: unknown = await response.json()
+    const parsed = EcosystemSourceSchema.safeParse(json)
+    if (!parsed.success) {
+      console.warn(`[Registry] Invalid source JSON: ${url}`, parsed.error)
+      return cached?.payload ?? null
+    }
+
+    const payload = parsed.data as EcosystemSource
+    const responseEtag = response.headers.get('ETag') ?? undefined
+
+    await saveSourcePayload({
+      url,
+      payload,
+      ...(responseEtag !== undefined ? { etag: responseEtag } : {}),
+      lastUpdated: new Date().toISOString(),
+    })
+
+    return payload
+  } catch (error) {
+    const message =
+      error instanceof Error && error.name === 'AbortError'
+        ? 'request timeout'
+        : error instanceof Error
+          ? error.message
+          : String(error)
+    console.warn(`[Registry] Error fetching source: ${url}`, message)
+    return cached?.payload ?? null
+  }
+}
+
+async function rebuildCachedAppsFromCache(): Promise<void> {
+  const enabledSources = ecosystemSelectors.getEnabledSources(ecosystemStore.state)
+
+  const entries = await Promise.all(
+    enabledSources.map(async (source) => {
+      const cached = await loadSourcePayload(source.url)
+      return { source, cached }
+    }),
+  )
+
+  const next: MiniappManifest[] = []
+  const seen = new Set<string>()
+
+  for (const { source, cached } of entries) {
+    const payload = cached?.payload
+    if (!payload) continue
+
+    for (const app of payload.apps ?? []) {
+      const normalized = normalizeAppFromSource(app, source, payload)
+      if (!normalized) continue
+
+      if (seen.has(normalized.id)) {
+        console.warn(`[Registry] Duplicate appId "${normalized.id}" detected, skipping later entry`)
+        continue
+      }
+      seen.add(normalized.id)
+      next.push(normalized)
+    }
+  }
+
+  cachedApps = next
+  notifyApps()
+}
+
+let lastSourcesSignature = ''
+ecosystemStore.subscribe(() => {
+  // Only react to source config changes (not permissions).
+  const nextSignature = JSON.stringify(ecosystemStore.state.sources)
+  if (nextSignature === lastSourcesSignature) return
+  lastSourcesSignature = nextSignature
+  void rebuildCachedAppsFromCache()
+})
+
+/** Initialize registry: load cached apps first, then refresh in background */
+export async function initRegistry(options?: { refresh?: boolean }): Promise<void> {
+  await rebuildCachedAppsFromCache()
+
+  if (options?.refresh === true) {
+    void refreshSources({ force: false })
+  }
+}
+
+/** Get all sources (from ecosystemStore) */
+export function getSources(): SourceRecord[] {
+  // ecosystemStore is the single source of truth for source configs.
+  return ecosystemStore.state.sources.map((s) => ({
+    url: s.url,
+    name: s.name,
+    enabled: s.enabled,
+    lastUpdated: s.lastUpdated,
+  }))
+}
+
+/** Fetch enabled sources and update cache + store timestamp */
+export async function refreshSources(options?: { force?: boolean }): Promise<MiniappManifest[]> {
+  const force = options?.force === true
+  const enabledSources = ecosystemSelectors.getEnabledSources(ecosystemStore.state)
+
+  const results = await Promise.all(
+    enabledSources.map(async (source) => {
+      const payload = await fetchSourceWithCache(source.url, force)
+      if (payload) {
+        ecosystemActions.updateSourceTimestamp(source.url)
+      }
+      return { source, payload }
+    }),
+  )
+
+  // Rebuild from payloads fetched (avoid extra IndexedDB reads)
+  const next: MiniappManifest[] = []
+  const seen = new Set<string>()
+
+  for (const { source, payload } of results) {
+    if (!payload) continue
+    for (const app of payload.apps ?? []) {
+      const normalized = normalizeAppFromSource(app, source, payload)
+      if (!normalized) continue
+
+      if (seen.has(normalized.id)) {
+        console.warn(`[Registry] Duplicate appId "${normalized.id}" detected, skipping later entry`)
+        continue
+      }
+      seen.add(normalized.id)
+      next.push(normalized)
+    }
+  }
+
+  cachedApps = next
+  notifyApps()
+
+  console.log(`[Registry] Loaded ${cachedApps.length} apps from ${enabledSources.length} sources`)
+  return [...cachedApps]
+}
+
+export async function loadSource(url: string): Promise<EcosystemSource | null> {
+  const cached = await loadSourcePayload(url)
+  return cached?.payload ?? null
+}
+
+/** Get all cached apps */
+export function getApps(): MiniappManifest[] {
+  return [...cachedApps]
+}
+
+/** Get app by ID */
+export function getAppById(id: string): MiniappManifest | undefined {
+  return cachedApps.find((app) => app.id === id)
+}
+
+export async function getAllApps(): Promise<MiniappManifest[]> {
+  return getApps()
+}
+
+export async function getFeaturedApps(limit: number, date: Date = new Date()): Promise<MiniappManifest[]> {
+  const apps = getApps()
+  const ranked = [...apps].sort((a, b) => computeFeaturedScore(b, date) - computeFeaturedScore(a, date))
+  return ranked.slice(0, Math.max(0, limit))
+}
+
+export async function searchCachedApps(query: string): Promise<MiniappManifest[]> {
+  const q = query.trim().toLowerCase()
+  if (!q) return []
+
+  return getApps().filter((app) => {
+    const haystacks = [
+      app.name,
+      app.description,
+      app.longDescription ?? '',
+      ...(app.tags ?? []),
+    ]
+    return haystacks.some((v) => v.toLowerCase().includes(q))
+  })
+}
+
+function isSupportedSearchResponseVersion(version: string): boolean {
+  if (SUPPORTED_SEARCH_RESPONSE_VERSIONS.has(version)) return true
+  // Allow "1.x" as forward-compatible minor bumps.
+  if (version.startsWith('1.')) return true
+  return false
+}
+
+async function fetchRemoteSearch(source: SourceRecord, urlTemplate: string, query: string): Promise<MiniappManifest[]> {
+  const encoded = encodeURIComponent(query)
+  const url = urlTemplate.replace(/%s/g, encoded)
+
+  const response = await requestWithTimeout(url, {
+    method: 'GET',
+    headers: { Accept: 'application/json' },
+  })
+
+  if (!response.ok) {
+    console.warn(`[Registry] Remote search failed: ${source.url}`, response.status, response.statusText)
+    return []
+  }
+
+  const json: unknown = await response.json()
+  const parsed = EcosystemSearchResponseSchema.safeParse(json)
+  if (!parsed.success) {
+    console.warn(`[Registry] Invalid search response from source: ${source.url}`, parsed.error)
+    return []
+  }
+
+  const { version, data } = parsed.data as { version: string; data: MiniappManifest[] }
+  if (!isSupportedSearchResponseVersion(version)) {
+    console.warn(`[Registry] Unsupported search response version "${version}" from source: ${source.url}`)
+    return []
+  }
+
+  // Attach source metadata and validate appId.
+  return data
+    .map((app) => ({
+      ...app,
+      sourceUrl: source.url,
+      sourceName: source.name,
+    }))
+    .filter((app) => {
+      if (isValidAppId(app.id)) return true
+      console.warn(`[Registry] Invalid appId "${app.id}" from remote search of source "${source.url}", skipping`)
+      return false
+    })
+}
+
+export async function searchRemoteApps(query: string): Promise<MiniappManifest[]> {
+  const q = query.trim()
+  if (!q) return []
+
+  const enabledSources = ecosystemSelectors.getEnabledSources(ecosystemStore.state)
+  const cachedPayloads = await Promise.all(
+    enabledSources.map(async (source) => ({
+      source,
+      cached: await loadSourcePayload(source.url),
+    })),
+  )
+
+  const searchTargets = cachedPayloads
+    .map(({ source, cached }) => ({ source, urlTemplate: cached?.payload.search?.urlTemplate }))
+    .filter((t): t is { source: SourceRecord; urlTemplate: string } => typeof t.urlTemplate === 'string' && t.urlTemplate.length > 0)
+
+  const results = await Promise.all(
+    searchTargets.map(({ source, urlTemplate }) => fetchRemoteSearch(source, urlTemplate, q)),
+  )
+
+  const merged: MiniappManifest[] = []
+  const seen = new Set<string>()
+
+  for (const list of results) {
+    for (const app of list) {
+      if (seen.has(app.id)) continue
+      seen.add(app.id)
+      merged.push(app)
+    }
+  }
+
+  return merged
+}
diff --git a/src/services/ecosystem/schema.ts b/src/services/ecosystem/schema.ts
new file mode 100644
index 00000000..2caf6b7e
--- /dev/null
+++ b/src/services/ecosystem/schema.ts
@@ -0,0 +1,72 @@
+import { z } from 'zod'
+
+const MiniappCategorySchema = z.enum([
+  'defi',
+  'nft',
+  'tools',
+  'games',
+  'social',
+  'exchange',
+  'other',
+])
+
+const SplashScreenSchema = z
+  .object({
+    backgroundColor: z.string().optional(),
+    icon: z.string().optional(),
+    timeout: z.number().int().positive().optional(),
+  })
+  .passthrough()
+
+export const MiniappManifestSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    description: z.string(),
+    longDescription: z.string().optional(),
+    icon: z.string(),
+    url: z.string(),
+    version: z.string(),
+    author: z.string().optional(),
+    website: z.string().optional(),
+    category: MiniappCategorySchema.optional(),
+    tags: z.array(z.string()).optional(),
+    permissions: z.array(z.string()).optional(),
+    chains: z.array(z.string()).optional(),
+    screenshots: z.array(z.string()).optional(),
+    minWalletVersion: z.string().optional(),
+    publishedAt: z.string().optional(),
+    updatedAt: z.string().optional(),
+    beta: z.boolean().optional(),
+    officialScore: z.number().min(0).max(100).optional(),
+    communityScore: z.number().min(0).max(100).optional(),
+    splashScreen: SplashScreenSchema.optional(),
+    themeColor: z.string().optional(),
+    themeColorFrom: z.string().optional(),
+    themeColorTo: z.string().optional(),
+  })
+  .passthrough()
+
+export const EcosystemSourceSchema = z
+  .object({
+    name: z.string(),
+    version: z.string(),
+    updated: z.string(),
+    icon: z.string().optional(),
+    search: z
+      .object({
+        urlTemplate: z.string(),
+      })
+      .passthrough()
+      .optional(),
+    apps: z.array(MiniappManifestSchema),
+  })
+  .passthrough()
+
+export const EcosystemSearchResponseSchema = z
+  .object({
+    version: z.string(),
+    data: z.array(MiniappManifestSchema),
+  })
+  .passthrough()
+
diff --git a/src/services/ecosystem/scoring.ts b/src/services/ecosystem/scoring.ts
new file mode 100644
index 00000000..35de7b95
--- /dev/null
+++ b/src/services/ecosystem/scoring.ts
@@ -0,0 +1,32 @@
+import type { MiniappManifest } from './types'
+
+const WEIGHT_STEP = 15
+const DAY_MS = 24 * 60 * 60 * 1000
+
+function getUtcDayIndex(date: Date): number {
+  return Math.floor(date.getTime() / DAY_MS)
+}
+
+/**
+ * Date-based dynamic weight for official/community scores.
+ *
+ * Cycles daily by +15 mod 100:
+ * 15,30,45,60,75,90,5,20,35,...
+ */
+export function getOfficialWeightPct(date: Date = new Date()): number {
+  const dayIndex = getUtcDayIndex(date)
+  return (WEIGHT_STEP * (dayIndex + 1)) % 100
+}
+
+export function getCommunityWeightPct(date: Date = new Date()): number {
+  return 100 - getOfficialWeightPct(date)
+}
+
+export function computeFeaturedScore(app: Pick<MiniappManifest, 'officialScore' | 'communityScore'>, date: Date = new Date()): number {
+  const official = typeof app.officialScore === 'number' ? app.officialScore : 0
+  const community = typeof app.communityScore === 'number' ? app.communityScore : 0
+  const ow = getOfficialWeightPct(date)
+  const cw = 100 - ow
+  return (official * ow + community * cw) / 100
+}
+
diff --git a/src/services/ecosystem/storage.ts b/src/services/ecosystem/storage.ts
new file mode 100644
index 00000000..97085e35
--- /dev/null
+++ b/src/services/ecosystem/storage.ts
@@ -0,0 +1,118 @@
+import type { EcosystemSource } from './types'
+
+const DB_NAME = 'bfm_ecosystem'
+const DB_VERSION = 1
+
+const STORE_SOURCE_PAYLOADS = 'ecosystem_source_payloads'
+
+export interface SourcePayloadRecord {
+  url: string
+  etag?: string
+  lastUpdated: string
+  payload: EcosystemSource
+}
+
+let dbInstance: IDBDatabase | null = null
+let dbOpening: Promise<IDBDatabase> | null = null
+
+function assertIndexedDbAvailable(): void {
+  if (typeof indexedDB === 'undefined') {
+    throw new Error('indexedDB is not available in this environment')
+  }
+}
+
+function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result)
+    request.onerror = () => reject(request.error ?? new Error('IndexedDB request failed'))
+  })
+}
+
+function transactionDone(tx: IDBTransaction): Promise<void> {
+  return new Promise((resolve, reject) => {
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error ?? new Error('IndexedDB transaction failed'))
+    tx.onabort = () => reject(tx.error ?? new Error('IndexedDB transaction aborted'))
+  })
+}
+
+async function getDb(): Promise<IDBDatabase> {
+  assertIndexedDbAvailable()
+
+  if (dbInstance) return dbInstance
+  if (dbOpening) return dbOpening
+
+  dbOpening = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION)
+
+    request.onupgradeneeded = () => {
+      const db = request.result
+
+      if (!db.objectStoreNames.contains(STORE_SOURCE_PAYLOADS)) {
+        db.createObjectStore(STORE_SOURCE_PAYLOADS, { keyPath: 'url' })
+      }
+    }
+
+    request.onsuccess = () => resolve(request.result)
+    request.onerror = () => reject(request.error ?? new Error('Failed to open IndexedDB'))
+  })
+
+  try {
+    dbInstance = await dbOpening
+    return dbInstance
+  } finally {
+    dbOpening = null
+  }
+}
+
+export async function saveSourcePayload(record: SourcePayloadRecord): Promise<void> {
+  const db = await getDb()
+  const tx = db.transaction([STORE_SOURCE_PAYLOADS], 'readwrite')
+  const store = tx.objectStore(STORE_SOURCE_PAYLOADS)
+  store.put(record)
+  await transactionDone(tx)
+}
+
+export async function loadSourcePayload(url: string): Promise<SourcePayloadRecord | null> {
+  const db = await getDb()
+  const tx = db.transaction([STORE_SOURCE_PAYLOADS], 'readonly')
+  const store = tx.objectStore(STORE_SOURCE_PAYLOADS)
+
+  const record = await requestToPromise(store.get(url))
+  await transactionDone(tx)
+
+  if (!record || typeof record !== 'object') return null
+  const parsed = record as Partial<SourcePayloadRecord>
+
+  if (typeof parsed.url !== 'string') return null
+  if (typeof parsed.lastUpdated !== 'string') return null
+  if (typeof parsed.payload !== 'object' || parsed.payload === null) return null
+
+  return parsed as SourcePayloadRecord
+}
+
+export async function deleteSourcePayload(url: string): Promise<void> {
+  const db = await getDb()
+  const tx = db.transaction([STORE_SOURCE_PAYLOADS], 'readwrite')
+  const store = tx.objectStore(STORE_SOURCE_PAYLOADS)
+  store.delete(url)
+  await transactionDone(tx)
+}
+
+export async function resetEcosystemStorageForTests(): Promise<void> {
+  assertIndexedDbAvailable()
+
+  if (dbInstance) {
+    dbInstance.close()
+    dbInstance = null
+  }
+  dbOpening = null
+
+  await new Promise<void>((resolve, reject) => {
+    const request = indexedDB.deleteDatabase(DB_NAME)
+    request.onsuccess = () => resolve()
+    request.onerror = () => reject(request.error ?? new Error('Failed to delete IndexedDB database'))
+    request.onblocked = () => resolve()
+  })
+}
+
diff --git a/src/services/ecosystem/types.ts b/src/services/ecosystem/types.ts
new file mode 100644
index 00000000..6b639e9a
--- /dev/null
+++ b/src/services/ecosystem/types.ts
@@ -0,0 +1,285 @@
+/**
+ * Bio Ecosystem Types
+ */
+
+/** Account information */
+export interface BioAccount {
+  address: string
+  chain: string
+  name?: string
+}
+
+/** Transfer parameters */
+export interface TransferParams {
+  from: string
+  to: string
+  amount: string
+  chain: string
+  asset?: string
+}
+
+/** Unsigned transaction payload (chain-specific) */
+export interface BioUnsignedTransaction {
+  chainId: string
+  data: unknown
+}
+
+/** Signed transaction payload (chain-specific) */
+export interface BioSignedTransaction {
+  chainId: string
+  data: unknown
+  signature: string
+}
+
+/** Request message from miniapp */
+export interface BioRequestMessage {
+  type: 'bio_request'
+  id: string
+  method: string
+  params?: unknown[]
+}
+
+/** Response message to miniapp */
+export interface BioResponseMessage {
+  type: 'bio_response'
+  id: string
+  success: boolean
+  result?: unknown
+  error?: { code: number; message: string; data?: unknown }
+}
+
+/** Event message to miniapp */
+export interface BioEventMessage {
+  type: 'bio_event'
+  event: string
+  args: unknown[]
+}
+
+/** Miniapp category */
+export type MiniappCategory = 
+  | 'defi'      // DeFi 应用
+  | 'nft'       // NFT 相关
+  | 'tools'     // 工具类
+  | 'games'     // 游戏
+  | 'social'    // 社交
+  | 'exchange'  // 交易所
+  | 'other'     // 其他
+
+/** Permission definition */
+export interface PermissionDefinition {
+  id: string
+  name: string
+  description: string
+  risk: 'low' | 'medium' | 'high'
+}
+
+/** Known permissions */
+export const KNOWN_PERMISSIONS: Record<string, PermissionDefinition> = {
+  bio_requestAccounts: {
+    id: 'bio_requestAccounts',
+    name: '请求账户',
+    description: '获取您的钱包地址列表',
+    risk: 'low',
+  },
+  bio_selectAccount: {
+    id: 'bio_selectAccount',
+    name: '选择账户',
+    description: '让您选择一个账户',
+    risk: 'low',
+  },
+  bio_pickWallet: {
+    id: 'bio_pickWallet',
+    name: '选择钱包',
+    description: '让您选择一个钱包',
+    risk: 'low',
+  },
+  bio_createTransaction: {
+    id: 'bio_createTransaction',
+    name: '创建交易',
+    description: '构造未签名交易（不做签名/不做广播）',
+    risk: 'low',
+  },
+  bio_signMessage: {
+    id: 'bio_signMessage',
+    name: '签名消息',
+    description: '使用您的私钥签名消息（需要您确认）',
+    risk: 'medium',
+  },
+  bio_signTypedData: {
+    id: 'bio_signTypedData',
+    name: '签名数据',
+    description: '签名结构化数据（需要您确认）',
+    risk: 'medium',
+  },
+  bio_signTransaction: {
+    id: 'bio_signTransaction',
+    name: '签名交易',
+    description: '对未签名交易进行签名（需要您确认）',
+    risk: 'high',
+  },
+  bio_sendTransaction: {
+    id: 'bio_sendTransaction',
+    name: '发送交易',
+    description: '请求发送转账（需要您确认）',
+    risk: 'high',
+  },
+}
+
+/** Miniapp manifest - 完整的小程序元数据 */
+export interface MiniappManifest {
+  /** 唯一标识符 */
+  id: string
+  /** 显示名称 */
+  name: string
+  /** 简短描述 */
+  description: string
+  /** 详细介绍 (可选，支持 Markdown) */
+  longDescription?: string
+  /** 应用图标 URL */
+  icon: string
+  /** 应用入口 URL */
+  url: string
+  /** 版本号 (semver) */
+  version: string
+  /** 作者/开发者 */
+  author?: string
+  /** 开发者网站 */
+  website?: string
+  /** 分类 */
+  category?: MiniappCategory
+  /** 标签 */
+  tags?: string[]
+  /** 请求的权限列表 */
+  permissions?: string[]
+  /** 支持的链 */
+  chains?: string[]
+  /** 截图 URL 列表 */
+  screenshots?: string[]
+  /** 最低钱包版本要求 */
+  minWalletVersion?: string
+  /** 发布时间 */
+  publishedAt?: string
+  /** 更新时间 */
+  updatedAt?: string
+  /** 是否为测试版 */
+  beta?: boolean
+  /** 推荐分（官方评分，0-100，可选） */
+  officialScore?: number
+  /** 热门分（社区评分，0-100，可选） */
+  communityScore?: number
+  /**
+   * 启动屏配置
+   * 如果配置了启动屏，小程序需要调用 bio.closeSplashScreen() 来关闭
+   * 如果未配置，则使用 iframe load 事件自动关闭加载状态
+   */
+  splashScreen?: {
+    /** 启动屏背景色 (CSS 颜色值) */
+    backgroundColor?: string
+    /** 启动屏图标 URL (默认使用 app.icon) */
+    icon?: string
+    /** 最大等待时间 (ms)，超时后自动关闭启动屏，默认 5000 */
+    timeout?: number
+  }
+  /** 
+   * 主题色 - 用于卡片背景等 
+   * 格式: CSS 渐变类名 (Tailwind) 或 HEX 颜色
+   * 例: "from-violet-500 to-purple-600" 或 "#6366f1"
+   */
+  themeColor?: string
+  /**
+   * 主题色（起始）- HEX 格式
+   */
+  themeColorFrom?: string
+  /**
+   * 主题色（结束）- HEX 格式
+   */
+  themeColorTo?: string
+  
+  // ============================================
+  // 以下字段由 registry 在加载时自动填充
+  // ============================================
+  
+  /** 来源 URL（运行时填充） */
+  sourceUrl?: string
+  /** 来源图标（运行时填充） */
+  sourceIcon?: string
+  /** 来源名称（运行时填充） */
+  sourceName?: string
+}
+
+/** Ecosystem source - JSON 文件格式 */
+export interface EcosystemSource {
+  name: string
+  version: string
+  updated: string
+  /** 订阅源图标 URL */
+  icon?: string
+  /** 可选：远程搜索能力（固定 GET，使用 %s 替换 query） */
+  search?: {
+    urlTemplate: string
+  }
+  apps: MiniappManifest[]
+}
+
+/** 订阅源记录 - 本地存储格式 */
+export interface SourceRecord {
+  url: string
+  name: string
+  enabled: boolean
+  lastUpdated: string
+  /** 图标 URL，默认使用 https 锁图标 */
+  icon?: string
+  /** 是否为内置源 */
+  builtin?: boolean
+}
+
+/** Method handler */
+export type MethodHandler = (
+  params: unknown,
+  context: HandlerContext
+) => Promise<unknown>
+
+/** Handler context */
+export interface HandlerContext {
+  appId: string
+  appName: string
+  origin: string
+  permissions: string[]
+}
+
+/** Error codes */
+export const BioErrorCodes = {
+  USER_REJECTED: 4001,
+  UNAUTHORIZED: 4100,
+  UNSUPPORTED_METHOD: 4200,
+  DISCONNECTED: 4900,
+  CHAIN_DISCONNECTED: 4901,
+  INTERNAL_ERROR: -32603,
+  INVALID_PARAMS: -32602,
+  METHOD_NOT_FOUND: -32601,
+} as const
+
+/** Create error response */
+export function createErrorResponse(
+  id: string,
+  code: number,
+  message: string,
+  data?: unknown
+): BioResponseMessage {
+  return {
+    type: 'bio_response',
+    id,
+    success: false,
+    error: { code, message, data },
+  }
+}
+
+/** Create success response */
+export function createSuccessResponse(id: string, result: unknown): BioResponseMessage {
+  return {
+    type: 'bio_response',
+    id,
+    success: true,
+    result,
+  }
+}
diff --git a/src/stackflow/activities/MainTabsActivity.tsx b/src/stackflow/activities/MainTabsActivity.tsx
index 111f134a..34718b90 100644
--- a/src/stackflow/activities/MainTabsActivity.tsx
+++ b/src/stackflow/activities/MainTabsActivity.tsx
@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useState, Activity } from "react";
 import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { TabBar, type TabId } from "../components/TabBar";
 import { WalletTab } from "./tabs/WalletTab";
+import { EcosystemTab } from "./tabs/EcosystemTab";
 import { SettingsTab } from "./tabs/SettingsTab";
 
 type MainTabsParams = {
@@ -10,19 +11,23 @@ type MainTabsParams = {
 };
 
 export const MainTabsActivity: ActivityComponentType<MainTabsParams> = ({ params }) => {
-  // 默认显示钱包页（合并了原来的首页）
   const [activeTab, setActiveTab] = useState<TabId>(params.tab || "wallet");
 
   return (
     <AppScreen>
-      <div className="flex h-full flex-col bg-background">
-        {/* Content area */}
-        <div className="flex-1 overflow-auto pb-20">
-          {activeTab === "wallet" && <WalletTab />}
-          {activeTab === "settings" && <SettingsTab />}
-        </div>
+      <div className="bg-background relative h-dvh">
+        {/* Content area - 各 Tab 内部自己管理滚动和 pb */}
+        <Activity mode={activeTab === "wallet" ? "visible" : "hidden"}>
+          <WalletTab />
+        </Activity>
+        <Activity mode={activeTab === "ecosystem" ? "visible" : "hidden"}>
+          <EcosystemTab />
+        </Activity>
+        <Activity mode={activeTab === "settings" ? "visible" : "hidden"}>
+          <SettingsTab />
+        </Activity>
 
-        {/* Bottom Tab Bar */}
+        {/* TabBar - 固定在底部 */}
         <TabBar activeTab={activeTab} onTabChange={setActiveTab} />
       </div>
     </AppScreen>
diff --git a/src/stackflow/activities/MiniappActivity.tsx b/src/stackflow/activities/MiniappActivity.tsx
new file mode 100644
index 00000000..210f4958
--- /dev/null
+++ b/src/stackflow/activities/MiniappActivity.tsx
@@ -0,0 +1,18 @@
+import type { ActivityComponentType } from '@stackflow/react'
+import { AppScreen } from '@stackflow/plugin-basic-ui'
+import { useFlow } from '../stackflow'
+import { MiniappPage } from '@/pages/ecosystem/miniapp'
+
+type MiniappParams = {
+  appId: string
+}
+
+export const MiniappActivity: ActivityComponentType<MiniappParams> = ({ params }) => {
+  const { pop } = useFlow()
+
+  return (
+    <AppScreen>
+      <MiniappPage appId={params.appId} onClose={() => pop()} />
+    </AppScreen>
+  )
+}
diff --git a/src/stackflow/activities/MiniappDetailActivity.tsx b/src/stackflow/activities/MiniappDetailActivity.tsx
new file mode 100644
index 00000000..61765c90
--- /dev/null
+++ b/src/stackflow/activities/MiniappDetailActivity.tsx
@@ -0,0 +1,412 @@
+/**
+ * MiniappDetailActivity - 小程序详情页 (App Store 风格)
+ */
+
+import { useEffect, useState, useCallback } from 'react'
+import type { ActivityComponentType } from '@stackflow/react'
+import { AppScreen } from '@stackflow/plugin-basic-ui'
+import { useTranslation } from 'react-i18next'
+import { useFlow } from '../stackflow'
+import { 
+  getAppById, 
+  initRegistry, 
+  refreshSources,
+  addToMyApps,
+  isInMyApps,
+  updateLastUsed,
+  type MiniappManifest, 
+  KNOWN_PERMISSIONS 
+} from '@/services/ecosystem'
+import { LoadingSpinner } from '@/components/common/loading-spinner'
+import { MiniappIcon } from '@/components/ecosystem'
+import { 
+  IconArrowLeft, 
+  IconExternalLink, 
+  IconShieldCheck, 
+  IconAlertTriangle,
+  IconChevronRight,
+  IconChevronDown,
+  IconChevronUp,
+  IconShare,
+  IconLink,
+} from '@tabler/icons-react'
+import { cn } from '@/lib/utils'
+
+type MiniappDetailActivityParams = {
+  appId: string
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  defi: 'DeFi',
+  nft: 'NFT',
+  tools: '工具',
+  games: '游戏',
+  social: '社交',
+  exchange: '交易所',
+  other: '其他',
+}
+
+function PrivacyItem({ 
+  permission, 
+  isLast 
+}: { 
+  permission: string
+  isLast: boolean 
+}) {
+  const def = KNOWN_PERMISSIONS[permission]
+  const risk = def?.risk ?? 'medium'
+  
+  const Icon = risk === 'high' ? IconAlertTriangle : IconShieldCheck
+  const iconColor = risk === 'high' ? 'text-red-500' : risk === 'medium' ? 'text-amber-500' : 'text-green-500'
+  
+  return (
+    <div className={cn(
+      'flex items-start gap-3 py-3',
+      !isLast && 'border-b border-border/50'
+    )}>
+      <Icon className={cn('size-5 mt-0.5 shrink-0', iconColor)} stroke={1.5} />
+      <div className="flex-1 min-w-0">
+        <p className="font-medium text-sm">{def?.name ?? permission}</p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {def?.description ?? '此应用可能访问此功能'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function InfoRow({ 
+  label, 
+  value, 
+  isLink = false,
+  href 
+}: { 
+  label: string
+  value: string
+  isLink?: boolean
+  href?: string
+}) {
+  const content = (
+    <div className="flex items-center justify-between py-3 border-b border-border/50 last:border-0">
+      <span className="text-muted-foreground text-sm">{label}</span>
+      <span className={cn(
+        'text-sm font-medium',
+        isLink && 'text-primary flex items-center gap-1'
+      )}>
+        {value}
+        {isLink && <IconChevronRight className="size-4" />}
+      </span>
+    </div>
+  )
+  
+  if (isLink && href) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        {content}
+      </a>
+    )
+  }
+  
+  return content
+}
+
+export const MiniappDetailActivity: ActivityComponentType<MiniappDetailActivityParams> = ({ params }) => {
+  const { t } = useTranslation('common')
+  const { pop, push } = useFlow()
+  const [app, setApp] = useState<MiniappManifest | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [descExpanded, setDescExpanded] = useState(false)
+  const [installed, setInstalled] = useState(false)
+
+  useEffect(() => {
+    let disposed = false
+
+    const load = async () => {
+      setLoading(true)
+
+      await initRegistry()
+      let manifest = getAppById(params.appId)
+
+      // If opened via deep-link, cache may be empty. Refresh once to ensure we can resolve the app.
+      if (!manifest) {
+        await refreshSources({ force: false })
+        manifest = getAppById(params.appId)
+      }
+
+      if (disposed) return
+      setApp(manifest ?? null)
+      setInstalled(isInMyApps(params.appId))
+      setLoading(false)
+    }
+
+    void load()
+
+    return () => {
+      disposed = true
+    }
+  }, [params.appId])
+
+  const handleInstall = useCallback(() => {
+    if (!app) return
+    addToMyApps(app.id)
+    setInstalled(true)
+  }, [app])
+
+  const handleOpen = useCallback(() => {
+    if (!app) return
+    updateLastUsed(app.id)
+    push('MiniappActivity', { appId: app.id })
+  }, [app, push])
+
+  if (loading) {
+    return (
+      <AppScreen>
+        <div className="flex min-h-screen items-center justify-center bg-background">
+          <LoadingSpinner size="lg" />
+        </div>
+      </AppScreen>
+    )
+  }
+
+  if (!app) {
+    return (
+      <AppScreen>
+        <div className="flex min-h-screen flex-col items-center justify-center bg-background gap-4">
+          <p className="text-muted-foreground">应用不存在</p>
+          <button
+            onClick={() => pop()}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-full text-sm font-medium"
+          >
+            返回
+          </button>
+        </div>
+      </AppScreen>
+    )
+  }
+
+  const description = app.longDescription ?? app.description
+  const isDescLong = description.length > 150
+  const displayDesc = descExpanded || !isDescLong 
+    ? description 
+    : description.slice(0, 150) + '...'
+
+  return (
+    <AppScreen>
+      <div className="flex min-h-screen flex-col bg-background detail-scroll-container">
+        {/* Header - 滚动驱动效果：滚动后显示 app 名称 */}
+        <div className="sticky top-0 z-20 bg-background/80 backdrop-blur-xl border-b border-border/50">
+          <div className="flex items-center justify-between px-4 py-3">
+            <button
+              onClick={() => pop()}
+              className="p-1.5 -ml-1.5 rounded-full hover:bg-muted transition-colors"
+            >
+              <IconArrowLeft className="size-5" stroke={1.5} />
+            </button>
+            
+            {/* App 名称 - 滚动后显示（渐进增强，不支持时保持隐藏） */}
+            <span className="font-semibold truncate max-w-[200px] detail-header-title">
+              {app.name}
+            </span>
+            
+            <button className="p-1.5 -mr-1.5 rounded-full hover:bg-muted transition-colors">
+              <IconShare className="size-5" stroke={1.5} />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto detail-scroller">
+          {/* App Header - App Store 风格 */}
+          <div className="px-5 pt-4 pb-5">
+          <div className="flex items-start gap-4">
+            {/* 大图标 */}
+            <MiniappIcon 
+              src={app.icon}
+              name={app.name}
+              size="2xl"
+              shadow="lg"
+              className="shrink-0"
+            />
+
+            {/* 信息区 */}
+            <div className="flex-1 min-w-0 pt-1">
+              <h1 className="text-xl font-bold truncate">{app.name}</h1>
+              <p className="text-sm text-muted-foreground mt-0.5 truncate">
+                {app.author ?? '未知开发者'}
+              </p>
+              
+              {/* 获取/打开按钮 */}
+              {installed ? (
+                <button
+                  onClick={handleOpen}
+                  className="mt-4 px-8 py-2 bg-primary text-primary-foreground rounded-full text-sm font-semibold"
+                >
+                  打开
+                </button>
+              ) : (
+                <button
+                  onClick={handleInstall}
+                  className="mt-4 px-8 py-2 bg-primary text-primary-foreground rounded-full text-sm font-semibold"
+                >
+                  获取
+                </button>
+              )}
+            </div>
+          </div>
+          
+          {/* 元信息行 */}
+          <div className="flex items-center gap-4 mt-5 text-xs text-muted-foreground">
+            {app.category && (
+              <span className="font-medium text-foreground">
+                {CATEGORY_LABELS[app.category] ?? app.category}
+              </span>
+            )}
+            {app.beta && (
+              <span className="px-2 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full font-medium">
+                Beta
+              </span>
+            )}
+            <span>v{app.version}</span>
+          </div>
+        </div>
+
+        {/* 截图预览 - App Store 风格 */}
+        {app.screenshots && app.screenshots.length > 0 && (
+          <div className="border-t border-border/50">
+            <div className="px-5 py-4">
+              <h2 className="text-lg font-bold mb-4">预览</h2>
+              <div 
+                className="flex gap-3 overflow-x-auto pb-2 -mx-5 px-5 snap-x snap-mandatory"
+                style={{ scrollbarWidth: 'none' }}
+              >
+                {app.screenshots.map((url, i) => (
+                  <div 
+                    key={i}
+                    className="w-[220px] aspect-[9/19.5] rounded-2xl bg-muted overflow-hidden shrink-0 snap-center shadow-lg ring-1 ring-black/5"
+                  >
+                    <img 
+                      src={url} 
+                      alt={`${app.name} screenshot ${i + 1}`}
+                      className="w-full h-full object-cover"
+                      loading="lazy"
+                      onError={(e) => {
+                        e.currentTarget.parentElement!.style.display = 'none'
+                      }}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 描述 */}
+        <div className="border-t border-border/50 px-5 py-4">
+          <p className="text-sm leading-relaxed whitespace-pre-wrap">
+            {displayDesc}
+          </p>
+          {isDescLong && (
+            <button
+              onClick={() => setDescExpanded(!descExpanded)}
+              className="text-primary text-sm font-medium mt-2 flex items-center gap-1"
+            >
+              {descExpanded ? '收起' : '更多'}
+              {descExpanded ? (
+                <IconChevronUp className="size-4" />
+              ) : (
+                <IconChevronDown className="size-4" />
+              )}
+            </button>
+          )}
+        </div>
+
+        {/* 支持的链 */}
+        {app.chains && app.chains.length > 0 && (
+          <div className="border-t border-border/50 px-5 py-4">
+            <h2 className="text-lg font-bold mb-3">支持的区块链</h2>
+            <div className="flex flex-wrap gap-2">
+              {app.chains.map((chain) => (
+                <span 
+                  key={chain}
+                  className="px-3 py-1.5 bg-muted rounded-full text-sm font-medium"
+                >
+                  {chain}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 隐私 / 权限 - App Store 风格 */}
+        {app.permissions && app.permissions.length > 0 && (
+          <div className="border-t border-border/50 px-5 py-4">
+            <h2 className="text-lg font-bold mb-1">应用隐私</h2>
+            <p className="text-xs text-muted-foreground mb-4">
+              开发者声明此应用可能会请求以下权限
+            </p>
+            <div className="bg-muted/50 rounded-2xl px-4">
+              {app.permissions.map((perm, i) => (
+                <PrivacyItem 
+                  key={perm} 
+                  permission={perm}
+                  isLast={i === app.permissions!.length - 1}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 标签 */}
+        {app.tags && app.tags.length > 0 && (
+          <div className="border-t border-border/50 px-5 py-4">
+            <h2 className="text-lg font-bold mb-3">标签</h2>
+            <div className="flex flex-wrap gap-2">
+              {app.tags.map((tag) => (
+                <span 
+                  key={tag}
+                  className="px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 信息 */}
+        <div className="border-t border-border/50 px-5 py-4">
+          <h2 className="text-lg font-bold mb-2">信息</h2>
+          <div className="bg-muted/50 rounded-2xl px-4">
+            {app.author && (
+              <InfoRow label="开发者" value={app.author} />
+            )}
+            <InfoRow label="版本" value={app.version} />
+            {app.category && (
+              <InfoRow 
+                label="类别" 
+                value={CATEGORY_LABELS[app.category] ?? app.category} 
+              />
+            )}
+            {app.publishedAt && (
+              <InfoRow label="发布日期" value={app.publishedAt} />
+            )}
+            {app.updatedAt && (
+              <InfoRow label="更新日期" value={app.updatedAt} />
+            )}
+            {app.website && (
+              <InfoRow 
+                label="开发者网站" 
+                value="访问" 
+                isLink 
+                href={app.website}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* 底部安全间距 */}
+        <div className="h-8" />
+      </div>
+    </div>
+    </AppScreen>
+  )
+}
diff --git a/src/stackflow/activities/SettingsSourcesActivity.tsx b/src/stackflow/activities/SettingsSourcesActivity.tsx
new file mode 100644
index 00000000..44d7870c
--- /dev/null
+++ b/src/stackflow/activities/SettingsSourcesActivity.tsx
@@ -0,0 +1,264 @@
+/**
+ * SettingsSourcesActivity - 可信源管理页面
+ * 管理小程序订阅源
+ */
+
+import { useState } from 'react'
+import type { ActivityComponentType } from '@stackflow/react'
+import { AppScreen } from '@stackflow/plugin-basic-ui'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@tanstack/react-store'
+import { cn } from '@/lib/utils'
+import {
+  IconPlus,
+  IconTrash,
+  IconRefresh,
+  IconCheck,
+  IconX,
+  IconWorld,
+  IconArrowLeft,
+} from '@tabler/icons-react'
+import { ecosystemStore, ecosystemActions, type SourceRecord } from '@/stores/ecosystem'
+import { refreshSources } from '@/services/ecosystem/registry'
+import { useFlow } from '../stackflow'
+
+export const SettingsSourcesActivity: ActivityComponentType = () => {
+  const { t } = useTranslation('common')
+  const { pop } = useFlow()
+  const state = useStore(ecosystemStore)
+
+  const [isAdding, setIsAdding] = useState(false)
+  const [newUrl, setNewUrl] = useState('')
+  const [newName, setNewName] = useState('')
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleAdd = async () => {
+    if (!newUrl.trim()) {
+      setError('请输入订阅 URL')
+      return
+    }
+
+    // 验证 URL
+    try {
+      new URL(newUrl)
+    } catch {
+      setError('无效的 URL 格式')
+      return
+    }
+
+    // 检查是否已存在
+    if (state.sources.some((s) => s.url === newUrl)) {
+      setError('该订阅源已存在')
+      return
+    }
+
+    ecosystemActions.addSource(newUrl, newName || '自定义源')
+    setNewUrl('')
+    setNewName('')
+    setIsAdding(false)
+    setError(null)
+  }
+
+  const handleRemove = (url: string) => {
+    ecosystemActions.removeSource(url)
+  }
+
+  const handleToggle = (url: string) => {
+    ecosystemActions.toggleSource(url)
+  }
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true)
+    try {
+      await refreshSources()
+    } catch (e) {
+      console.error('Refresh failed:', e)
+    }
+    setIsRefreshing(false)
+  }
+
+  return (
+    <AppScreen>
+      <div className="flex flex-col min-h-full bg-background">
+        {/* Header */}
+        <div className="sticky top-0 z-10 bg-background border-b">
+          <div className="flex items-center gap-3 px-4 py-3">
+            <button
+              onClick={() => pop()}
+              className="p-1.5 rounded-full hover:bg-muted transition-colors"
+              aria-label={t('back', '返回')}
+            >
+              <IconArrowLeft className="size-5" stroke={1.5} />
+            </button>
+            <h1 className="flex-1 text-lg font-semibold">可信源管理</h1>
+            <button
+              onClick={handleRefresh}
+              disabled={isRefreshing}
+              className="p-1.5 rounded-full hover:bg-muted transition-colors"
+              aria-label={t('refresh', '刷新')}
+            >
+              <IconRefresh
+                className={cn('size-5', isRefreshing && 'animate-spin')}
+                stroke={1.5}
+              />
+            </button>
+          </div>
+        </div>
+
+        {/* Sources List */}
+        <div className="flex-1 p-4 space-y-3">
+          {state.sources.map((source) => (
+            <SourceItem
+              key={source.url}
+              source={source}
+              onToggle={() => handleToggle(source.url)}
+              onRemove={() => handleRemove(source.url)}
+            />
+          ))}
+
+          {state.sources.length === 0 && (
+            <div className="text-center py-12 text-muted-foreground">
+              暂无订阅源
+            </div>
+          )}
+        </div>
+
+        {/* Add Source */}
+        {isAdding ? (
+          <div className="border-t p-4 bg-background space-y-3">
+            <input
+              type="url"
+              value={newUrl}
+              onChange={(e) => {
+                setNewUrl(e.target.value)
+                setError(null)
+              }}
+              placeholder="订阅 URL (https://...)"
+              className="w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+              autoFocus
+            />
+            <input
+              type="text"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              placeholder="名称 (可选)"
+              className="w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+            {error && (
+              <p className="text-sm text-destructive">{error}</p>
+            )}
+            <div className="flex gap-2">
+              <button
+                onClick={() => {
+                  setIsAdding(false)
+                  setNewUrl('')
+                  setNewName('')
+                  setError(null)
+                }}
+                className="flex-1 py-2 rounded-lg bg-muted hover:bg-muted/80 font-medium"
+              >
+                取消
+              </button>
+              <button
+                onClick={handleAdd}
+                className="flex-1 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 font-medium"
+              >
+                添加
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="border-t p-4">
+            <button
+              onClick={() => setIsAdding(true)}
+              className="w-full py-3 rounded-xl border-2 border-dashed border-muted-foreground/30 hover:border-primary hover:bg-primary/5 transition-colors flex items-center justify-center gap-2 text-muted-foreground hover:text-primary"
+            >
+              <IconPlus className="size-5" stroke={1.5} />
+              <span>添加订阅源</span>
+            </button>
+          </div>
+        )}
+
+        {/* Safe area */}
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </AppScreen>
+  )
+}
+
+interface SourceItemProps {
+  source: SourceRecord
+  onToggle: () => void
+  onRemove: () => void
+}
+
+function SourceItem({ source, onToggle, onRemove }: SourceItemProps) {
+  const isDefault = source.url === '/ecosystem.json'
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border p-4 transition-colors',
+        source.enabled ? 'bg-card' : 'bg-muted/30 opacity-60'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {/* Icon */}
+        <div className="rounded-full bg-primary/10 p-2 shrink-0">
+          <IconWorld className="size-5 text-primary" />
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="font-medium truncate">{source.name}</h3>
+            {isDefault && (
+              <span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded">
+                官方
+              </span>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground truncate mt-0.5">
+            {source.url}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">
+            更新于 {new Date(source.lastUpdated).toLocaleDateString()}
+          </p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 shrink-0">
+          {/* Toggle */}
+          <button
+            onClick={onToggle}
+            className={cn(
+              'p-2 rounded-full transition-colors',
+              source.enabled
+                ? 'bg-green-100 text-green-600 hover:bg-green-200'
+                : 'bg-muted text-muted-foreground hover:bg-muted/80'
+            )}
+            aria-label={source.enabled ? '禁用' : '启用'}
+          >
+            {source.enabled ? (
+              <IconCheck className="size-4" stroke={2} />
+            ) : (
+              <IconX className="size-4" stroke={2} />
+            )}
+          </button>
+
+          {/* Remove (not for default) */}
+          {!isDefault && (
+            <button
+              onClick={onRemove}
+              className="p-2 rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+              aria-label="删除"
+            >
+              <IconTrash className="size-4" stroke={1.5} />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/stackflow/activities/sheets/MiniappSignTransactionJob.tsx b/src/stackflow/activities/sheets/MiniappSignTransactionJob.tsx
new file mode 100644
index 00000000..6c23d57c
--- /dev/null
+++ b/src/stackflow/activities/sheets/MiniappSignTransactionJob.tsx
@@ -0,0 +1,222 @@
+/**
+ * MiniappSignTransactionJob - 小程序交易签名确认对话框
+ * 用于小程序请求 `bio_signTransaction` 时显示
+ */
+
+import { useState, useCallback, useMemo } from 'react'
+import type { ActivityComponentType } from '@stackflow/react'
+import { BottomSheet } from '@/components/layout/bottom-sheet'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import { IconApps, IconAlertTriangle, IconLoader2 } from '@tabler/icons-react'
+import { useFlow } from '../../stackflow'
+import { ActivityParamsProvider, useActivityParams } from '../../hooks'
+import { setWalletLockConfirmCallback } from './WalletLockConfirmJob'
+import { walletStore } from '@/stores'
+import type { BioUnsignedTransaction } from '@/services/ecosystem'
+import { signUnsignedTransaction } from '@/services/ecosystem/handlers'
+
+type MiniappSignTransactionJobParams = {
+  /** 来源小程序名称 */
+  appName: string
+  /** 来源小程序图标 */
+  appIcon?: string
+  /** 签名地址 */
+  from: string
+  /** 链 ID */
+  chain: string
+  /** 未签名交易（JSON 字符串） */
+  unsignedTx: string
+}
+
+function findWalletIdByAddress(chainId: string, address: string): string | null {
+  const isHexLike = address.startsWith('0x')
+  const normalized = isHexLike ? address.toLowerCase() : address
+
+  for (const wallet of walletStore.state.wallets) {
+    const match = wallet.chainAddresses.find((ca) => {
+      if (ca.chain !== chainId) return false
+      if (isHexLike || ca.address.startsWith('0x')) return ca.address.toLowerCase() === normalized
+      return ca.address === normalized
+    })
+    if (match) return wallet.id
+  }
+  return null
+}
+
+function MiniappSignTransactionJobContent() {
+  const { t } = useTranslation('common')
+  const { pop, push } = useFlow()
+  const params = useActivityParams<MiniappSignTransactionJobParams>()
+  const { appName, appIcon, from, chain, unsignedTx: unsignedTxJson } = params
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const unsignedTx = useMemo((): BioUnsignedTransaction | null => {
+    try {
+      return JSON.parse(unsignedTxJson) as BioUnsignedTransaction
+    } catch {
+      return null
+    }
+  }, [unsignedTxJson])
+
+  const walletId = useMemo(() => {
+    return findWalletIdByAddress(chain, from)
+  }, [chain, from])
+
+  const handleConfirm = useCallback(() => {
+    if (isSubmitting) return
+    if (!unsignedTx) return
+    if (!walletId) return
+
+    setWalletLockConfirmCallback(async (password: string) => {
+      setIsSubmitting(true)
+      try {
+        const signedTx = await signUnsignedTransaction({
+          walletId,
+          password,
+          from,
+          chainId: chain,
+          unsignedTx,
+        })
+
+        const event = new CustomEvent('miniapp-sign-transaction-confirm', {
+          detail: {
+            confirmed: true,
+            signedTx,
+          },
+        })
+        window.dispatchEvent(event)
+
+        pop()
+        return true
+      } catch (error) {
+        console.error('[MiniappSignTransactionJob] signTransaction failed:', error)
+        return false
+      } finally {
+        setIsSubmitting(false)
+      }
+    })
+
+    push('WalletLockConfirmJob', {
+      title: t('signTransaction', '签名交易'),
+    })
+  }, [chain, from, isSubmitting, pop, push, t, unsignedTx, walletId])
+
+  const handleCancel = useCallback(() => {
+    const event = new CustomEvent('miniapp-sign-transaction-confirm', {
+      detail: { confirmed: false },
+    })
+    window.dispatchEvent(event)
+    pop()
+  }, [pop])
+
+  const rawPreview = useMemo(() => {
+    if (!unsignedTx) return ''
+    try {
+      return JSON.stringify(unsignedTx.data, null, 2)
+    } catch {
+      return String(unsignedTx.data)
+    }
+  }, [unsignedTx])
+
+  return (
+    <BottomSheet>
+      <div className="bg-background rounded-t-2xl">
+        <div className="flex justify-center py-3">
+          <div className="bg-muted h-1 w-10 rounded-full" />
+        </div>
+
+        <div className="border-border border-b px-4 pb-4">
+          <div className="mx-auto mb-3 flex size-14 items-center justify-center rounded-2xl bg-primary/10 overflow-hidden">
+            {appIcon ? (
+              <img src={appIcon} alt={appName} className="size-full object-cover" />
+            ) : (
+              <IconApps className="size-8 text-primary" />
+            )}
+          </div>
+          <h2 className="text-center text-lg font-semibold">{t('signTransaction', '签名交易')}</h2>
+          <p className="text-muted-foreground mt-1 text-center text-sm">
+            {appName || t('unknownDApp', '未知 DApp')}
+          </p>
+        </div>
+
+        <div className="space-y-4 p-4">
+          {!unsignedTx && (
+            <div className="rounded-xl bg-destructive/10 p-3 text-sm text-destructive">
+              {t('invalidTransaction', '无效的交易数据')}
+            </div>
+          )}
+
+          {unsignedTx && !walletId && (
+            <div className="rounded-xl bg-amber-50 p-3 text-sm text-amber-800 dark:bg-amber-950/30 dark:text-amber-200">
+              {t('signingAddressNotFound', '找不到对应的钱包地址，无法签名')}
+            </div>
+          )}
+
+          <div className="bg-muted/50 rounded-xl p-3">
+            <p className="text-muted-foreground mb-1 text-xs">{t('network', '网络')}</p>
+            <p className="text-sm font-medium">{chain}</p>
+          </div>
+
+          <div className="bg-muted/50 rounded-xl p-3">
+            <p className="text-muted-foreground mb-1 text-xs">{t('signingAddress', '签名地址')}</p>
+            <p className="text-sm font-mono break-all">{from}</p>
+          </div>
+
+          <div className="bg-muted/50 rounded-xl p-3">
+            <p className="text-muted-foreground mb-1 text-xs">{t('transaction', '交易内容')}</p>
+            <div className="max-h-44 overflow-y-auto">
+              <pre className="whitespace-pre-wrap break-all font-mono text-xs">{rawPreview}</pre>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-2 rounded-xl bg-amber-50 p-3 dark:bg-amber-950/30">
+            <IconAlertTriangle className="size-5 shrink-0 text-amber-600 mt-0.5" />
+            <p className="text-sm text-amber-800 dark:text-amber-200">
+              {t('signTxWarning', '请确认您信任此应用，并仔细核对交易内容。')}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-3 p-4">
+          <button
+            onClick={handleCancel}
+            disabled={isSubmitting}
+            className="bg-muted hover:bg-muted/80 disabled:opacity-50 flex-1 rounded-xl py-3 font-medium transition-colors"
+          >
+            {t('cancel', '取消')}
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={isSubmitting || !unsignedTx || !walletId}
+            className={cn(
+              'flex-1 rounded-xl py-3 font-medium transition-colors',
+              'bg-primary text-primary-foreground hover:bg-primary/90',
+              'disabled:opacity-50 flex items-center justify-center gap-2',
+            )}
+          >
+            {isSubmitting ? (
+              <>
+                <IconLoader2 className="size-4 animate-spin" />
+                {t('signing', '签名中...')}
+              </>
+            ) : (
+              t('sign', '签名')
+            )}
+          </button>
+        </div>
+
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </BottomSheet>
+  )
+}
+
+export const MiniappSignTransactionJob: ActivityComponentType<MiniappSignTransactionJobParams> = ({ params }) => {
+  return (
+    <ActivityParamsProvider params={params}>
+      <MiniappSignTransactionJobContent />
+    </ActivityParamsProvider>
+  )
+}
diff --git a/src/stackflow/activities/sheets/MiniappTransferConfirmJob.tsx b/src/stackflow/activities/sheets/MiniappTransferConfirmJob.tsx
new file mode 100644
index 00000000..3c5f2771
--- /dev/null
+++ b/src/stackflow/activities/sheets/MiniappTransferConfirmJob.tsx
@@ -0,0 +1,249 @@
+/**
+ * MiniappTransferConfirmJob - 小程序转账确认对话框
+ * 用于小程序请求发送转账时显示
+ */
+
+import { useState, useCallback } from 'react'
+import type { ActivityComponentType } from '@stackflow/react'
+import { BottomSheet } from '@/components/layout/bottom-sheet'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import { IconArrowDown, IconAlertTriangle, IconLoader2, IconApps } from '@tabler/icons-react'
+import { useFlow } from '../../stackflow'
+import { ActivityParamsProvider, useActivityParams } from '../../hooks'
+import { setWalletLockConfirmCallback } from './WalletLockConfirmJob'
+import { useCurrentWallet } from '@/stores'
+import { SignatureAuthService, plaocAdapter } from '@/services/authorize'
+import { AddressDisplay } from '@/components/wallet/address-display'
+import { AmountDisplay } from '@/components/common/amount-display'
+
+type MiniappTransferConfirmJobParams = {
+  /** 来源小程序名称 */
+  appName: string
+  /** 来源小程序图标 */
+  appIcon?: string
+  /** 发送地址 */
+  from: string
+  /** 接收地址 */
+  to: string
+  /** 金额 */
+  amount: string
+  /** 链 ID */
+  chain: string
+  /** 代币 (可选) */
+  asset?: string
+}
+
+function MiniappTransferConfirmJobContent() {
+  const { t } = useTranslation('common')
+  const { pop, push } = useFlow()
+  const params = useActivityParams<MiniappTransferConfirmJobParams>()
+  const { appName, appIcon, from, to, amount, chain, asset } = params
+  const currentWallet = useCurrentWallet()
+
+  const [isConfirming, setIsConfirming] = useState(false)
+
+  const handleConfirm = useCallback(() => {
+    if (isConfirming) return
+
+    // 设置钱包锁验证回调
+    setWalletLockConfirmCallback(async (password: string) => {
+      setIsConfirming(true)
+      
+      try {
+        const encryptedSecret = currentWallet?.encryptedMnemonic
+        if (!encryptedSecret) {
+          console.error('[MiniappTransferConfirmJob] No encrypted mnemonic found')
+          return false
+        }
+
+        // 创建签名服务
+        const eventId = `miniapp_transfer_${Date.now()}`
+        const authService = new SignatureAuthService(plaocAdapter, eventId)
+
+        // 执行转账签名
+        const transferPayload: {
+          chainName: string
+          senderAddress: string
+          receiveAddress: string
+          balance: string
+          assetType?: string
+        } = {
+          chainName: chain,
+          senderAddress: from,
+          receiveAddress: to,
+          balance: amount,
+        }
+        if (asset) {
+          transferPayload.assetType = asset
+        }
+        
+        const signature = await authService.handleTransferSign(
+          transferPayload,
+          encryptedSecret,
+          password
+        )
+
+        // TODO: 广播交易到链上 (需要调用 chain adapter 的 broadcastTransaction)
+        // 目前先返回签名作为 txHash 的占位符
+        const txHash = signature
+
+        // 发送成功事件
+        const event = new CustomEvent('miniapp-transfer-confirm', {
+          detail: {
+            confirmed: true,
+            txHash,
+          },
+        })
+        window.dispatchEvent(event)
+        
+        pop()
+        return true
+      } catch (error) {
+        console.error('[MiniappTransferConfirmJob] Transfer failed:', error)
+        return false
+      } finally {
+        setIsConfirming(false)
+      }
+    })
+
+    // 打开钱包锁验证
+    push('WalletLockConfirmJob', {
+      title: t('confirmTransfer', '确认转账'),
+    })
+  }, [isConfirming, currentWallet, chain, from, to, amount, asset, pop, push, t])
+
+  const handleCancel = useCallback(() => {
+    const event = new CustomEvent('miniapp-transfer-confirm', {
+      detail: { confirmed: false },
+    })
+    window.dispatchEvent(event)
+    pop()
+  }, [pop])
+
+  const displayAsset = asset || chain.toUpperCase()
+
+  return (
+    <BottomSheet>
+      <div className="bg-background rounded-t-2xl">
+        {/* Handle */}
+        <div className="flex justify-center py-3">
+          <div className="bg-muted h-1 w-10 rounded-full" />
+        </div>
+
+        {/* Header */}
+        <div className="border-border border-b px-4 pb-4">
+          <div className="mx-auto mb-3 flex size-14 items-center justify-center rounded-2xl bg-primary/10 overflow-hidden">
+            {appIcon ? (
+              <img src={appIcon} alt={appName} className="size-full object-cover" />
+            ) : (
+              <IconApps className="size-8 text-primary" />
+            )}
+          </div>
+          <h2 className="text-center text-lg font-semibold">
+            {t('confirmTransfer', '确认转账')}
+          </h2>
+          <p className="text-muted-foreground mt-1 text-center text-sm">
+            {appName || t('unknownDApp', '未知 DApp')} {t('requestsTransfer', '请求发送转账')}
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4 p-4">
+          {/* Amount */}
+          <div className="bg-muted/50 rounded-xl p-4 text-center">
+            <AmountDisplay 
+              value={amount} 
+              symbol={displayAsset} 
+              size="xl" 
+              weight="bold"
+              decimals={8}
+            />
+          </div>
+
+          {/* From -> To */}
+          <div className="bg-muted/50 rounded-xl p-4 space-y-3">
+            {/* From */}
+            <div className="flex items-center gap-3">
+              <span className="text-muted-foreground text-xs w-10 shrink-0">
+                {t('from', '来自')}
+              </span>
+              <AddressDisplay address={from} copyable className="flex-1 text-sm" />
+            </div>
+
+            {/* Arrow */}
+            <div className="flex justify-center">
+              <IconArrowDown className="size-4 text-muted-foreground" />
+            </div>
+
+            {/* To */}
+            <div className="flex items-center gap-3">
+              <span className="text-muted-foreground text-xs w-10 shrink-0">
+                {t('to', '接收')}
+              </span>
+              <AddressDisplay address={to} copyable className="flex-1 text-sm" />
+            </div>
+          </div>
+
+          {/* Chain */}
+          <div className="bg-muted/50 rounded-xl p-3 flex items-center justify-between">
+            <span className="text-muted-foreground text-sm">
+              {t('network', '网络')}
+            </span>
+            <span className="text-sm font-medium">{chain}</span>
+          </div>
+
+          {/* Warning */}
+          <div className="flex items-start gap-2 rounded-xl bg-amber-50 p-3 dark:bg-amber-950/30">
+            <IconAlertTriangle className="size-5 shrink-0 text-amber-600 mt-0.5" />
+            <p className="text-sm text-amber-800 dark:text-amber-200">
+              {t('transferWarning', '请仔细核对收款地址和金额，转账后无法撤回。')}
+            </p>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-3 p-4">
+          <button
+            onClick={handleCancel}
+            disabled={isConfirming}
+            className="bg-muted hover:bg-muted/80 disabled:opacity-50 flex-1 rounded-xl py-3 font-medium transition-colors"
+          >
+            {t('cancel', '取消')}
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={isConfirming}
+            className={cn(
+              'flex-1 rounded-xl py-3 font-medium transition-colors',
+              'bg-primary text-primary-foreground hover:bg-primary/90',
+              'disabled:opacity-50 flex items-center justify-center gap-2'
+            )}
+          >
+            {isConfirming ? (
+              <>
+                <IconLoader2 className="size-4 animate-spin" />
+                {t('confirming', '确认中...')}
+              </>
+            ) : (
+              t('confirm', '确认')
+            )}
+          </button>
+        </div>
+
+        {/* Safe area */}
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </BottomSheet>
+  )
+}
+
+export const MiniappTransferConfirmJob: ActivityComponentType<MiniappTransferConfirmJobParams> = ({
+  params,
+}) => {
+  return (
+    <ActivityParamsProvider params={params}>
+      <MiniappTransferConfirmJobContent />
+    </ActivityParamsProvider>
+  )
+}
diff --git a/src/stackflow/activities/sheets/PermissionRequestJob.tsx b/src/stackflow/activities/sheets/PermissionRequestJob.tsx
new file mode 100644
index 00000000..3031a908
--- /dev/null
+++ b/src/stackflow/activities/sheets/PermissionRequestJob.tsx
@@ -0,0 +1,180 @@
+/**
+ * PermissionRequestJob - 权限请求对话框
+ * 用于小程序首次请求权限时显示
+ */
+
+import type { ActivityComponentType } from '@stackflow/react'
+import { BottomSheet } from '@/components/layout/bottom-sheet'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  IconWallet,
+  IconSignature,
+  IconCurrencyDollar,
+  IconFileText,
+  IconShieldCheck,
+  IconApps,
+} from '@tabler/icons-react'
+import { useFlow } from '../../stackflow'
+import { ActivityParamsProvider, useActivityParams } from '../../hooks'
+
+type PermissionRequestJobParams = {
+  /** 小程序名称 */
+  appName: string
+  /** 小程序图标 */
+  appIcon?: string
+  /** 请求的权限列表 (JSON 字符串) */
+  permissions: string
+}
+
+const PERMISSION_INFO: Record<string, { icon: typeof IconWallet; label: string; description: string }> = {
+  bio_requestAccounts: {
+    icon: IconWallet,
+    label: '查看账户',
+    description: '查看您的钱包地址',
+  },
+  bio_createTransaction: {
+    icon: IconFileText,
+    label: '创建交易',
+    description: '构造未签名交易（不做签名/不做广播）',
+  },
+  bio_signMessage: {
+    icon: IconSignature,
+    label: '签名消息',
+    description: '请求签名消息（需要您确认）',
+  },
+  bio_signTypedData: {
+    icon: IconSignature,
+    label: '签名数据',
+    description: '请求签名结构化数据（需要您确认）',
+  },
+  bio_signTransaction: {
+    icon: IconSignature,
+    label: '签名交易',
+    description: '请求签名交易（需要您确认）',
+  },
+  bio_sendTransaction: {
+    icon: IconCurrencyDollar,
+    label: '发送交易',
+    description: '请求发送转账（需要您确认）',
+  },
+}
+
+function PermissionRequestJobContent() {
+  const { t } = useTranslation('common')
+  const { pop } = useFlow()
+  const { appName, appIcon, permissions: permissionsJson } = useActivityParams<PermissionRequestJobParams>()
+
+  // 解析权限列表
+  const permissions: string[] = (() => {
+    try {
+      return JSON.parse(permissionsJson) as string[]
+    } catch {
+      return []
+    }
+  })()
+
+  const handleApprove = () => {
+    const event = new CustomEvent('permission-request', {
+      detail: { approved: true, permissions },
+    })
+    window.dispatchEvent(event)
+    pop()
+  }
+
+  const handleReject = () => {
+    const event = new CustomEvent('permission-request', {
+      detail: { approved: false },
+    })
+    window.dispatchEvent(event)
+    pop()
+  }
+
+  return (
+    <BottomSheet>
+      <div className="bg-background rounded-t-2xl">
+        {/* Handle */}
+        <div className="flex justify-center py-3">
+          <div className="bg-muted h-1 w-10 rounded-full" />
+        </div>
+
+        {/* Header */}
+        <div className="border-border border-b px-4 pb-4">
+          <div className="mx-auto mb-3 flex size-14 items-center justify-center rounded-2xl bg-primary/10">
+            {appIcon ? (
+              <img src={appIcon} alt={appName} className="size-10 rounded-xl" />
+            ) : (
+              <IconApps className="text-primary size-8" />
+            )}
+          </div>
+          <h2 className="text-center text-lg font-semibold">{appName}</h2>
+          <p className="text-muted-foreground mt-1 text-center text-sm">
+            {t('requestsPermissions', '请求以下权限')}
+          </p>
+        </div>
+
+        {/* Permissions List */}
+        <div className="p-4">
+          <div className="space-y-3">
+            {permissions.map((permission) => {
+              const info = PERMISSION_INFO[permission]
+              if (!info) return null
+
+              const Icon = info.icon
+              return (
+                <div
+                  key={permission}
+                  className="bg-muted/50 flex items-center gap-3 rounded-xl p-3"
+                >
+                  <div className="bg-primary/10 flex size-10 shrink-0 items-center justify-center rounded-full">
+                    <Icon className="text-primary size-5" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="font-medium">{info.label}</p>
+                    <p className="text-muted-foreground text-sm">{info.description}</p>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+
+          {/* Trust indicator */}
+          <div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
+            <IconShieldCheck className="size-4" />
+            <span>{t('permissionNote', '敏感操作需要您的确认')}</span>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-3 p-4">
+          <button
+            onClick={handleReject}
+            className="bg-muted hover:bg-muted/80 flex-1 rounded-xl py-3 font-medium transition-colors"
+          >
+            {t('reject', '拒绝')}
+          </button>
+          <button
+            onClick={handleApprove}
+            className={cn(
+              'flex-1 rounded-xl py-3 font-medium transition-colors',
+              'bg-primary text-primary-foreground hover:bg-primary/90'
+            )}
+          >
+            {t('approve', '允许')}
+          </button>
+        </div>
+
+        {/* Safe area */}
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </BottomSheet>
+  )
+}
+
+export const PermissionRequestJob: ActivityComponentType<PermissionRequestJobParams> = ({ params }) => {
+  return (
+    <ActivityParamsProvider params={params}>
+      <PermissionRequestJobContent />
+    </ActivityParamsProvider>
+  )
+}
diff --git a/src/stackflow/activities/sheets/SigningConfirmJob.tsx b/src/stackflow/activities/sheets/SigningConfirmJob.tsx
new file mode 100644
index 00000000..3b3c329d
--- /dev/null
+++ b/src/stackflow/activities/sheets/SigningConfirmJob.tsx
@@ -0,0 +1,201 @@
+/**
+ * SigningConfirmJob - 签名确认对话框
+ * 用于小程序请求用户签名消息
+ */
+
+import { useCallback, useState } from 'react'
+import type { ActivityComponentType } from '@stackflow/react'
+import { BottomSheet } from '@/components/layout/bottom-sheet'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import { IconAlertTriangle, IconLoader2, IconApps } from '@tabler/icons-react'
+import { useFlow } from '../../stackflow'
+import { ActivityParamsProvider, useActivityParams } from '../../hooks'
+import { setWalletLockConfirmCallback } from './WalletLockConfirmJob'
+import { useCurrentWallet } from '@/stores'
+import { SignatureAuthService, plaocAdapter } from '@/services/authorize'
+import { AddressDisplay } from '@/components/wallet/address-display'
+
+type SigningConfirmJobParams = {
+  /** 要签名的消息 */
+  message: string
+  /** 签名地址 */
+  address: string
+  /** 请求来源小程序名称 */
+  appName?: string
+  /** 请求来源小程序图标 */
+  appIcon?: string
+  /** 链名称（用于签名） */
+  chainName?: string
+}
+
+function SigningConfirmJobContent() {
+  const { t } = useTranslation('common')
+  const { pop, push } = useFlow()
+  const { message, address, appName, appIcon, chainName } = useActivityParams<SigningConfirmJobParams>()
+  const currentWallet = useCurrentWallet()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleConfirm = useCallback(() => {
+    if (isSubmitting) return
+
+    // 设置钱包锁验证回调
+    setWalletLockConfirmCallback(async (password: string) => {
+      setIsSubmitting(true)
+      
+      try {
+        const encryptedSecret = currentWallet?.encryptedMnemonic
+        if (!encryptedSecret) {
+          console.error('[SigningConfirmJob] No encrypted mnemonic found')
+          return false
+        }
+
+        // 创建签名服务 (使用临时 eventId)
+        const eventId = `miniapp_sign_${Date.now()}`
+        const authService = new SignatureAuthService(plaocAdapter, eventId)
+
+        // 执行真实签名
+        const signature = await authService.handleMessageSign(
+          {
+            chainName: chainName || 'bioforest',
+            senderAddress: address,
+            message,
+          },
+          encryptedSecret,
+          password
+        )
+
+        // 发送成功事件
+        const event = new CustomEvent('signing-confirm', {
+          detail: { confirmed: true, signature },
+        })
+        window.dispatchEvent(event)
+        
+        pop()
+        return true
+      } catch (error) {
+        console.error('[SigningConfirmJob] Signing failed:', error)
+        return false
+      } finally {
+        setIsSubmitting(false)
+      }
+    })
+
+    // 打开钱包锁验证
+    push('WalletLockConfirmJob', {
+      title: t('sign', '签名'),
+    })
+  }, [isSubmitting, currentWallet, chainName, address, message, pop, push, t])
+
+  const handleCancel = useCallback(() => {
+    const event = new CustomEvent('signing-confirm', {
+      detail: { confirmed: false },
+    })
+    window.dispatchEvent(event)
+    pop()
+  }, [pop])
+
+  // Check if message looks like hex data (potential risk)
+  const isHexData = message.startsWith('0x') && /^0x[0-9a-fA-F]+$/.test(message)
+
+  return (
+    <BottomSheet>
+      <div className="bg-background rounded-t-2xl">
+        {/* Handle */}
+        <div className="flex justify-center py-3">
+          <div className="bg-muted h-1 w-10 rounded-full" />
+        </div>
+
+        {/* Header */}
+        <div className="border-border border-b px-4 pb-4">
+          <div className="mx-auto mb-3 flex size-14 items-center justify-center rounded-2xl bg-primary/10 overflow-hidden">
+            {appIcon ? (
+              <img src={appIcon} alt={appName} className="size-full object-cover" />
+            ) : (
+              <IconApps className="size-8 text-primary" />
+            )}
+          </div>
+          <h2 className="text-center text-lg font-semibold">
+            {t('signMessage', '签名请求')}
+          </h2>
+          <p className="text-muted-foreground mt-1 text-center text-sm">
+            {appName || t('unknownDApp', '未知 DApp')}
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4 p-4">
+          {/* Address */}
+          <div className="bg-muted/50 rounded-xl p-3">
+            <p className="text-muted-foreground mb-1 text-xs">
+              {t('signingAddress', '签名地址')}
+            </p>
+            <AddressDisplay address={address} copyable={false} className="text-sm" />
+          </div>
+
+          {/* Message */}
+          <div className="bg-muted/50 rounded-xl p-3">
+            <p className="text-muted-foreground mb-1 text-xs">
+              {t('message', '消息内容')}
+            </p>
+            <div className="max-h-40 overflow-y-auto">
+              <pre className="whitespace-pre-wrap break-all font-mono text-sm">
+                {message}
+              </pre>
+            </div>
+          </div>
+
+          {/* Warning for hex data */}
+          {isHexData && (
+            <div className="flex items-start gap-2 rounded-xl bg-amber-50 p-3 dark:bg-amber-950/30">
+              <IconAlertTriangle className="size-5 shrink-0 text-amber-600" />
+              <p className="text-sm text-amber-800 dark:text-amber-200">
+                {t('hexDataWarning', '此消息包含十六进制数据，请确认您信任此应用。')}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-3 p-4">
+          <button
+            onClick={handleCancel}
+            disabled={isSubmitting}
+            className="bg-muted hover:bg-muted/80 disabled:opacity-50 flex-1 rounded-xl py-3 font-medium transition-colors"
+          >
+            {t('cancel', '取消')}
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={isSubmitting}
+            className={cn(
+              'flex-1 rounded-xl py-3 font-medium transition-colors',
+              'bg-primary text-primary-foreground hover:bg-primary/90',
+              'disabled:opacity-50 flex items-center justify-center gap-2'
+            )}
+          >
+            {isSubmitting ? (
+              <>
+                <IconLoader2 className="size-4 animate-spin" />
+                {t('signing', '签名中...')}
+              </>
+            ) : (
+              t('sign', '签名')
+            )}
+          </button>
+        </div>
+
+        {/* Safe area */}
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </BottomSheet>
+  )
+}
+
+export const SigningConfirmJob: ActivityComponentType<SigningConfirmJobParams> = ({ params }) => {
+  return (
+    <ActivityParamsProvider params={params}>
+      <SigningConfirmJobContent />
+    </ActivityParamsProvider>
+  )
+}
diff --git a/src/stackflow/activities/sheets/WalletPickerJob.tsx b/src/stackflow/activities/sheets/WalletPickerJob.tsx
new file mode 100644
index 00000000..94282056
--- /dev/null
+++ b/src/stackflow/activities/sheets/WalletPickerJob.tsx
@@ -0,0 +1,160 @@
+/**
+ * WalletPickerJob - 钱包选择器
+ * 用于小程序请求用户选择钱包
+ */
+
+import { useMemo } from 'react'
+import type { ActivityComponentType } from '@stackflow/react'
+import { BottomSheet } from '@/components/layout/bottom-sheet'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@tanstack/react-store'
+import { IconApps } from '@tabler/icons-react'
+import { walletStore, walletSelectors, type Wallet, type ChainAddress } from '@/stores'
+import { useFlow } from '../../stackflow'
+import { ActivityParamsProvider, useActivityParams } from '../../hooks'
+import { WalletList, type WalletListItem } from '@/components/wallet/wallet-list'
+import { MiniappIcon } from '@/components/ecosystem'
+
+type WalletPickerJobParams = {
+  /** 限定链类型 */
+  chain?: string
+  /** 请求来源小程序名称 */
+  appName?: string
+  /** 请求来源小程序图标 */
+  appIcon?: string
+}
+
+function WalletPickerJobContent() {
+  const { t } = useTranslation('common')
+  const { pop } = useFlow()
+  const { chain, appName, appIcon } = useActivityParams<WalletPickerJobParams>()
+
+  const walletState = useStore(walletStore)
+  const currentWallet = walletSelectors.getCurrentWallet(walletState)
+
+  // 转换钱包数据为 WalletListItem 格式
+  const walletItems = useMemo((): WalletListItem[] => {
+    return walletState.wallets
+      .map((wallet) => {
+        const chainAddress = chain
+          ? wallet.chainAddresses.find((ca) => ca.chain === chain)
+          : wallet.chainAddresses[0]
+
+        if (!chainAddress) return null
+
+        return {
+          id: wallet.id,
+          name: wallet.name,
+          address: chainAddress.address,
+          themeHue: wallet.themeHue,
+          chainIconUrl: undefined, // TODO: 从链配置获取图标
+        }
+      })
+      .filter((item): item is WalletListItem => item !== null)
+  }, [walletState.wallets, chain])
+
+  // 保存钱包到链地址的映射
+  const walletChainMap = useMemo(() => {
+    const map = new Map<string, { wallet: Wallet; chainAddress: ChainAddress }>()
+    walletState.wallets.forEach((wallet) => {
+      const chainAddress = chain
+        ? wallet.chainAddresses.find((ca) => ca.chain === chain)
+        : wallet.chainAddresses[0]
+      if (chainAddress) {
+        map.set(wallet.id, { wallet, chainAddress })
+      }
+    })
+    return map
+  }, [walletState.wallets, chain])
+
+  const handleSelect = (walletId: string) => {
+    const data = walletChainMap.get(walletId)
+    if (!data) return
+
+    const event = new CustomEvent('wallet-picker-select', {
+      detail: {
+        address: data.chainAddress.address,
+        chain: data.chainAddress.chain,
+        name: data.wallet.name,
+      },
+    })
+    window.dispatchEvent(event)
+    pop()
+  }
+
+  const handleCancel = () => {
+    const event = new CustomEvent('wallet-picker-cancel')
+    window.dispatchEvent(event)
+    pop()
+  }
+
+  return (
+    <BottomSheet>
+      <div className="bg-background rounded-t-2xl">
+        {/* Handle */}
+        <div className="flex justify-center py-3">
+          <div className="bg-muted h-1 w-10 rounded-full" />
+        </div>
+
+        {/* Title with App Icon */}
+        <div className="border-border border-b px-4 pb-4">
+          {(appName || appIcon) && (
+            <div className="mx-auto mb-3">
+              <MiniappIcon
+                src={appIcon}
+                name={appName}
+                size="lg"
+                shadow="sm"
+              />
+            </div>
+          )}
+          <h2 className="text-center text-lg font-semibold">
+            {t('selectWallet', '选择钱包')}
+          </h2>
+          <p className="text-muted-foreground mt-1 text-center text-sm">
+            {appName || t('unknownDApp', '未知 DApp')} {t('requestsAccess', '请求访问')}
+          </p>
+        </div>
+
+        {/* Wallet List */}
+        <div className="max-h-[50vh] overflow-y-auto p-4">
+          {walletItems.length === 0 ? (
+            <div className="text-muted-foreground py-12 text-center text-sm">
+              {chain
+                ? t('noWalletsForChain', '暂无支持 {{chain}} 的钱包', { chain })
+                : t('noWallets', '暂无钱包')}
+            </div>
+          ) : (
+            <WalletList
+              wallets={walletItems}
+              currentWalletId={currentWallet?.id}
+              onSelect={handleSelect}
+              showAddButton={false}
+            />
+          )}
+        </div>
+
+        {/* Cancel button */}
+        <div className="border-border border-t p-4">
+          <button
+            onClick={handleCancel}
+            className="bg-muted hover:bg-muted/80 w-full rounded-xl py-3 font-medium transition-colors"
+          >
+            {t('cancel', '取消')}
+          </button>
+        </div>
+
+        {/* Safe area */}
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </BottomSheet>
+  )
+}
+
+export const WalletPickerJob: ActivityComponentType<WalletPickerJobParams> = ({ params }) => {
+  return (
+    <ActivityParamsProvider params={params}>
+      <WalletPickerJobContent />
+    </ActivityParamsProvider>
+  )
+}
diff --git a/src/stackflow/activities/sheets/index.ts b/src/stackflow/activities/sheets/index.ts
index 953d8467..158b560c 100644
--- a/src/stackflow/activities/sheets/index.ts
+++ b/src/stackflow/activities/sheets/index.ts
@@ -17,3 +17,8 @@ export { ScannerJob, setScannerResultCallback, scanValidators, getValidatorForCh
 export { ContactAddConfirmJob, type ContactAddConfirmJobParams } from "./ContactAddConfirmJob";
 export { ContactShareJob, type ContactShareJobParams } from "./ContactShareJob";
 export { ClearDataConfirmJob } from "./ClearDataConfirmJob";
+export { WalletPickerJob } from "./WalletPickerJob";
+export { SigningConfirmJob } from "./SigningConfirmJob";
+export { PermissionRequestJob } from "./PermissionRequestJob";
+export { MiniappTransferConfirmJob } from "./MiniappTransferConfirmJob";
+export { MiniappSignTransactionJob } from "./MiniappSignTransactionJob";
diff --git a/src/stackflow/activities/tabs/EcosystemTab.tsx b/src/stackflow/activities/tabs/EcosystemTab.tsx
new file mode 100644
index 00000000..dd74fcdf
--- /dev/null
+++ b/src/stackflow/activities/tabs/EcosystemTab.tsx
@@ -0,0 +1,181 @@
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import type { Swiper as SwiperType } from 'swiper';
+import 'swiper/css';
+import { useFlow } from '../../stackflow';
+import { LoadingSpinner } from '@/components/common/loading-spinner';
+import {
+  initRegistry,
+  getApps,
+  subscribeApps,
+  loadMyApps,
+  addToMyApps,
+  updateLastUsed,
+  removeFromMyApps,
+  type MyAppRecord,
+} from '@/services/ecosystem';
+import type { MiniappManifest } from '@/services/ecosystem';
+import { DiscoverPage, MyAppsPage, type DiscoverPageRef } from '@/components/ecosystem';
+import { computeFeaturedScore } from '@/services/ecosystem/scoring';
+import { ecosystemActions } from '@/stores/ecosystem';
+
+type TabType = 'discover' | 'mine';
+
+export function EcosystemTab() {
+  const { push } = useFlow();
+  const [apps, setApps] = useState<MiniappManifest[]>([]);
+  const [myAppRecords, setMyAppRecords] = useState<MyAppRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // 从 localStorage 读取上次的 tab
+  const [activeTab, setActiveTab] = useState<TabType>(() => {
+    try {
+      const saved = localStorage.getItem('ecosystem_active_tab');
+      const tab = saved === 'mine' ? 'mine' : 'discover';
+      // 同步到 store
+      ecosystemActions.setActiveSubPage(tab);
+      return tab;
+    } catch {
+      return 'discover';
+    }
+  });
+
+  // 保存 tab 到 localStorage
+  useEffect(() => {
+    try {
+      localStorage.setItem('ecosystem_active_tab', activeTab);
+    } catch {
+      // ignore
+    }
+  }, [activeTab]);
+
+  const swiperRef = useRef<SwiperType | null>(null);
+  const discoverPageRef = useRef<DiscoverPageRef>(null);
+
+  // 初始化数据
+  useEffect(() => {
+    const unsubscribe = subscribeApps((nextApps) => setApps(nextApps));
+
+    initRegistry({ refresh: true }).then(() => {
+      setApps(getApps());
+      setMyAppRecords(loadMyApps());
+      setLoading(false);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  // Swiper 事件
+  const handleSlideChange = useCallback((swiper: SwiperType) => {
+    const newTab = swiper.activeIndex === 0 ? 'discover' : 'mine';
+    setActiveTab(newTab);
+    // 同步到 store（用于 TabBar 图标切换）
+    ecosystemActions.setActiveSubPage(newTab);
+  }, []);
+
+  // 搜索胶囊点击：滑到发现页 + 聚焦搜索框
+  const handleSearchClick = useCallback(() => {
+    swiperRef.current?.slideTo(0);
+    // 延迟聚焦，等待滑动完成
+    setTimeout(() => {
+      discoverPageRef.current?.focusSearch();
+    }, 300);
+  }, []);
+
+  // App 操作
+  const handleAppDetail = useCallback(
+    (app: MiniappManifest) => {
+      push('MiniappDetailActivity', { appId: encodeURIComponent(app.id) });
+    },
+    [push],
+  );
+
+  const handleAppOpen = useCallback(
+    (app: MiniappManifest) => {
+      addToMyApps(app.id);
+      updateLastUsed(app.id);
+      setMyAppRecords(loadMyApps());
+      push('MiniappActivity', { appId: app.id });
+    },
+    [push],
+  );
+
+  const handleAppRemove = useCallback((appId: string) => {
+    removeFromMyApps(appId);
+    setMyAppRecords(loadMyApps());
+  }, []);
+
+  // 计算数据
+  const myApps = useMemo(() => {
+    return myAppRecords
+      .map((record) => ({
+        ...record,
+        app: apps.find((a) => a.id === record.appId),
+      }))
+      .filter((item): item is MyAppRecord & { app: MiniappManifest } => !!item.app);
+  }, [myAppRecords, apps]);
+
+  const featuredApps = useMemo(() => {
+    if (apps.length === 0) return [];
+    return [...apps].sort((a, b) => computeFeaturedScore(b) - computeFeaturedScore(a)).slice(0, 2);
+  }, [apps]);
+
+  const featuredApp = featuredApps[0];
+
+  const recommendedApps = useMemo(() => {
+    const featuredIds = new Set(featuredApps.map((a) => a.id));
+    return [...apps]
+      .filter((a) => !featuredIds.has(a.id))
+      .sort((a, b) => (b.officialScore ?? 0) - (a.officialScore ?? 0))
+      .slice(0, 6);
+  }, [apps, featuredApps]);
+
+  const hotApps = useMemo(() => {
+    return [...apps].sort((a, b) => (b.communityScore ?? 0) - (a.communityScore ?? 0)).slice(0, 10);
+  }, [apps]);
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-background h-full">
+      <Swiper
+        className="h-full w-full"
+        initialSlide={activeTab === 'mine' ? 1 : 0}
+        onSwiper={(swiper) => { swiperRef.current = swiper; }}
+        onSlideChange={handleSlideChange}
+        resistanceRatio={0.5}
+      >
+        {/* 发现页 - 负一屏 */}
+        <SwiperSlide className="!h-full !overflow-hidden">
+          <DiscoverPage
+            ref={discoverPageRef}
+            apps={apps}
+            featuredApp={featuredApp}
+            featuredApps={featuredApps}
+            recommendedApps={recommendedApps}
+            hotApps={hotApps}
+            onAppDetail={handleAppDetail}
+            onAppOpen={handleAppOpen}
+          />
+        </SwiperSlide>
+
+        {/* 我的页 - iOS 桌面 */}
+        <SwiperSlide className="!h-full !overflow-hidden">
+          <MyAppsPage
+            apps={myApps.map(({ app, lastUsed }) => ({ app, lastUsed }))}
+            onSearchClick={handleSearchClick}
+            onAppOpen={handleAppOpen}
+            onAppDetail={handleAppDetail}
+            onAppRemove={handleAppRemove}
+          />
+        </SwiperSlide>
+      </Swiper>
+    </div>
+  );
+}
diff --git a/src/stackflow/activities/tabs/WalletTab.tsx b/src/stackflow/activities/tabs/WalletTab.tsx
index 50592ccf..a9dec573 100644
--- a/src/stackflow/activities/tabs/WalletTab.tsx
+++ b/src/stackflow/activities/tabs/WalletTab.tsx
@@ -4,7 +4,7 @@ import { useFlow } from "../../stackflow";
 import { TokenList } from "@/components/token/token-list";
 import { TransactionList } from "@/components/transaction/transaction-list";
 import { WalletCardCarousel } from "@/components/wallet/wallet-card-carousel";
-import { SwipeableContentTabs } from "@/components/home/content-tabs";
+import { SwipeableTabs } from "@/components/layout/swipeable-tabs";
 import { LoadingSpinner } from "@/components/common/loading-spinner";
 import { GradientButton } from "@/components/common/gradient-button";
 import { Button } from "@/components/ui/button";
@@ -140,7 +140,7 @@ export function WalletTab() {
 
   if (!isInitialized) {
     return (
-      <div className="flex min-h-[80vh] items-center justify-center">
+      <div className="flex h-full items-center justify-center">
         <LoadingSpinner size="lg" />
       </div>
     );
@@ -151,7 +151,7 @@ export function WalletTab() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="flex h-full flex-col overflow-y-auto bg-background">
       {/* 钱包卡片轮播 */}
       <div className="pt-2 pb-1">
         <WalletCardCarousel
@@ -202,7 +202,7 @@ export function WalletTab() {
 
       {/* 内容区 Tab 切换 */}
       <div className="flex-1 pt-3">
-        <SwipeableContentTabs
+        <SwipeableTabs
           activeTab={activeTab}
           onTabChange={setActiveTab}
           className="h-full"
@@ -255,9 +255,11 @@ export function WalletTab() {
               </div>
             )
           }
-        </SwipeableContentTabs>
+        </SwipeableTabs>
       </div>
 
+      {/* TabBar spacer */}
+      <div className="shrink-0 h-[var(--tab-bar-height)]" />
     </div>
   );
 }
@@ -267,7 +269,7 @@ function NoWalletView() {
   const { t } = useTranslation("home");
 
   return (
-    <div className="flex min-h-[80vh] flex-col items-center justify-center gap-6 p-6 text-center">
+    <div className="flex h-full flex-col items-center justify-center gap-6 p-6 text-center">
       <div className="bg-primary/10 rounded-full p-6">
         <IconPlus className="text-primary size-12" />
       </div>
diff --git a/src/stackflow/activities/tabs/index.ts b/src/stackflow/activities/tabs/index.ts
index 3138e95a..c631243c 100644
--- a/src/stackflow/activities/tabs/index.ts
+++ b/src/stackflow/activities/tabs/index.ts
@@ -1,2 +1,3 @@
 export { WalletTab } from "./WalletTab";
+export { EcosystemTab } from "./EcosystemTab";
 export { SettingsTab } from "./SettingsTab";
diff --git a/src/stackflow/components/TabBar.tsx b/src/stackflow/components/TabBar.tsx
index 32165236..bb423bb0 100644
--- a/src/stackflow/components/TabBar.tsx
+++ b/src/stackflow/components/TabBar.tsx
@@ -3,12 +3,16 @@ import { useMemo } from "react";
 import {
   IconWallet,
   IconSettings,
+  IconApps,
+  IconBrandMiniprogram,
   type Icon,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import { useStore } from "@tanstack/react-store";
+import { ecosystemStore } from "@/stores/ecosystem";
 
-// 简化为2个tab：钱包（首页）和设置
-export type TabId = "wallet" | "settings";
+// 3个tab：钱包、生态、设置
+export type TabId = "wallet" | "ecosystem" | "settings";
 
 interface Tab {
   id: TabId;
@@ -19,19 +23,33 @@ interface Tab {
 interface TabBarProps {
   activeTab: TabId;
   onTabChange: (tab: TabId) => void;
+  className?: string;
 }
 
-export function TabBar({ activeTab, onTabChange }: TabBarProps) {
+export function TabBar({ activeTab, onTabChange, className }: TabBarProps) {
   const { t } = useTranslation('common');
+  const ecosystemSubPage = useStore(ecosystemStore, (s) => s.activeSubPage);
+
+  // 生态 tab 图标：发现用 IconApps，我的用 IconBrandMiniprogram
+  const ecosystemIcon = ecosystemSubPage === 'mine' ? IconBrandMiniprogram : IconApps;
 
   const tabConfigs: Tab[] = useMemo(() => [
     { id: "wallet", label: t('a11y.tabWallet'), icon: IconWallet },
+    { id: "ecosystem", label: t('a11y.tabEcosystem', '生态'), icon: ecosystemIcon },
     { id: "settings", label: t('a11y.tabSettings'), icon: IconSettings },
-  ], [t]);
+  ], [t, ecosystemIcon]);
 
   return (
-    <div className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="mx-auto flex max-w-md">
+    <div 
+      className={cn(
+        "fixed bottom-0 left-0 right-0 z-50",
+        "border-t bg-background/80 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60",
+        "pb-[env(safe-area-inset-bottom)]",
+        className
+      )}
+      style={{ height: 'var(--tab-bar-height)' }}
+    >
+      <div className="mx-auto flex h-[52px] max-w-md">
         {tabConfigs.map((tab) => {
           const Icon = tab.icon;
           const isActive = activeTab === tab.id;
@@ -42,7 +60,7 @@ export function TabBar({ activeTab, onTabChange }: TabBarProps) {
               onClick={() => onTabChange(tab.id)}
               data-testid={`tab-${tab.id}`}
               className={cn(
-                "flex flex-1 flex-col items-center gap-1 py-2 transition-colors",
+                "flex flex-1 flex-col items-center justify-center gap-1 transition-colors",
                 isActive ? "text-primary" : "text-muted-foreground"
               )}
               aria-label={label}
@@ -54,10 +72,8 @@ export function TabBar({ activeTab, onTabChange }: TabBarProps) {
           );
         })}
       </div>
-      {/* Safe area padding for iOS */}
-      <div className="h-[env(safe-area-inset-bottom)]" />
     </div>
   );
 }
 
-export const tabIds: TabId[] = ["wallet", "settings"];
+export const tabIds: TabId[] = ["wallet", "ecosystem", "settings"];
diff --git a/src/stackflow/stackflow.ts b/src/stackflow/stackflow.ts
index e6d50763..565b055b 100644
--- a/src/stackflow/stackflow.ts
+++ b/src/stackflow/stackflow.ts
@@ -1,92 +1,132 @@
-import { stackflow } from "@stackflow/react";
-import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
-import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
-import { historySyncPlugin } from "@stackflow/plugin-history-sync";
+import { stackflow } from '@stackflow/react';
+import { basicRendererPlugin } from '@stackflow/plugin-renderer-basic';
+import { basicUIPlugin } from '@stackflow/plugin-basic-ui';
+import { historySyncPlugin } from '@biochain/plugin-navigation-sync';
 
-import { MainTabsActivity } from "./activities/MainTabsActivity";
-import { WalletListActivity } from "./activities/WalletListActivity";
-import { WalletConfigActivity } from "./activities/WalletConfigActivity";
-import { WalletCreateActivity } from "./activities/WalletCreateActivity";
+import { MainTabsActivity } from './activities/MainTabsActivity';
+import { WalletListActivity } from './activities/WalletListActivity';
+import { WalletConfigActivity } from './activities/WalletConfigActivity';
+import { WalletCreateActivity } from './activities/WalletCreateActivity';
 
-import { SendActivity } from "./activities/SendActivity";
-import { ReceiveActivity } from "./activities/ReceiveActivity";
-import { SettingsActivity } from "./activities/SettingsActivity";
-import { SettingsLanguageActivity } from "./activities/SettingsLanguageActivity";
-import { SettingsCurrencyActivity } from "./activities/SettingsCurrencyActivity";
-import { SettingsChainsActivity } from "./activities/SettingsChainsActivity";
-import { SettingsMnemonicActivity } from "./activities/SettingsMnemonicActivity";
-import { SettingsWalletLockActivity } from "./activities/SettingsWalletLockActivity";
-import { HistoryActivity } from "./activities/HistoryActivity";
-import { TransactionDetailActivity } from "./activities/TransactionDetailActivity";
-import { ScannerActivity } from "./activities/ScannerActivity";
-import { AuthorizeAddressActivity } from "./activities/AuthorizeAddressActivity";
-import { AuthorizeSignatureActivity } from "./activities/AuthorizeSignatureActivity";
-import { OnboardingRecoverActivity } from "./activities/OnboardingRecoverActivity";
-import { TokenDetailActivity } from "./activities/TokenDetailActivity";
-import { AddressBookActivity } from "./activities/AddressBookActivity";
-import { NotificationsActivity } from "./activities/NotificationsActivity";
-import { StakingActivity } from "./activities/StakingActivity";
-import { WelcomeActivity } from "./activities/WelcomeActivity";
-import { SettingsWalletChainsActivity } from "./activities/SettingsWalletChainsActivity";
-import { SettingsStorageActivity } from "./activities/SettingsStorageActivity";
-import { ChainSelectorJob, WalletRenameJob, WalletDeleteJob, WalletLockConfirmJob, TwoStepSecretConfirmJob, SetTwoStepSecretJob, MnemonicOptionsJob, ContactEditJob, ContactPickerJob, WalletAddJob, WalletListJob, SecurityWarningJob, TransferConfirmJob, TransferWalletLockJob, FeeEditJob, ScannerJob, ContactAddConfirmJob, ContactShareJob, ClearDataConfirmJob } from "./activities/sheets";
+import { SendActivity } from './activities/SendActivity';
+import { ReceiveActivity } from './activities/ReceiveActivity';
+import { SettingsActivity } from './activities/SettingsActivity';
+import { SettingsLanguageActivity } from './activities/SettingsLanguageActivity';
+import { SettingsCurrencyActivity } from './activities/SettingsCurrencyActivity';
+import { SettingsChainsActivity } from './activities/SettingsChainsActivity';
+import { SettingsMnemonicActivity } from './activities/SettingsMnemonicActivity';
+import { SettingsWalletLockActivity } from './activities/SettingsWalletLockActivity';
+import { HistoryActivity } from './activities/HistoryActivity';
+import { TransactionDetailActivity } from './activities/TransactionDetailActivity';
+import { ScannerActivity } from './activities/ScannerActivity';
+import { AuthorizeAddressActivity } from './activities/AuthorizeAddressActivity';
+import { AuthorizeSignatureActivity } from './activities/AuthorizeSignatureActivity';
+import { OnboardingRecoverActivity } from './activities/OnboardingRecoverActivity';
+import { TokenDetailActivity } from './activities/TokenDetailActivity';
+import { AddressBookActivity } from './activities/AddressBookActivity';
+import { NotificationsActivity } from './activities/NotificationsActivity';
+import { StakingActivity } from './activities/StakingActivity';
+import { WelcomeActivity } from './activities/WelcomeActivity';
+import { SettingsWalletChainsActivity } from './activities/SettingsWalletChainsActivity';
+import { SettingsStorageActivity } from './activities/SettingsStorageActivity';
+import { SettingsSourcesActivity } from './activities/SettingsSourcesActivity';
+import { MiniappActivity } from './activities/MiniappActivity';
+import { MiniappDetailActivity } from './activities/MiniappDetailActivity';
+import {
+  ChainSelectorJob,
+  WalletRenameJob,
+  WalletDeleteJob,
+  WalletLockConfirmJob,
+  TwoStepSecretConfirmJob,
+  SetTwoStepSecretJob,
+  MnemonicOptionsJob,
+  ContactEditJob,
+  ContactPickerJob,
+  WalletAddJob,
+  WalletListJob,
+  SecurityWarningJob,
+  TransferConfirmJob,
+  TransferWalletLockJob,
+  FeeEditJob,
+  ScannerJob,
+  ContactAddConfirmJob,
+  ContactShareJob,
+  ClearDataConfirmJob,
+  WalletPickerJob,
+  SigningConfirmJob,
+  PermissionRequestJob,
+  MiniappTransferConfirmJob,
+  MiniappSignTransactionJob,
+} from './activities/sheets';
 
 export const { Stack, useFlow, useStepFlow, activities } = stackflow({
   transitionDuration: 350,
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({
-      theme: "cupertino",
+      theme: 'cupertino',
     }),
     historySyncPlugin({
       routes: {
-        MainTabsActivity: "/",
-        WalletListActivity: "/wallet/list",
-        WalletConfigActivity: "/wallet/:walletId",
-        WalletCreateActivity: "/wallet/create",
-        SendActivity: "/send",
-        ReceiveActivity: "/receive",
-        SettingsActivity: "/settings",
-        SettingsLanguageActivity: "/settings/language",
-        SettingsCurrencyActivity: "/settings/currency",
-        SettingsChainsActivity: "/settings/chains",
-        SettingsMnemonicActivity: "/settings/mnemonic",
-        SettingsWalletLockActivity: "/settings/wallet-lock",
-        SettingsWalletChainsActivity: "/settings/wallet-chains",
-        SettingsStorageActivity: "/settings/storage",
-        HistoryActivity: "/history",
-        TransactionDetailActivity: "/transaction/:txId",
-        ScannerActivity: "/scanner",
-        AuthorizeAddressActivity: "/authorize/address/:id",
-        AuthorizeSignatureActivity: "/authorize/signature/:id",
-        OnboardingRecoverActivity: "/onboarding/recover",
-        TokenDetailActivity: "/token/:tokenId",
-        AddressBookActivity: "/address-book",
-        NotificationsActivity: "/notifications",
-        StakingActivity: "/staking",
-        WelcomeActivity: "/welcome",
-        ChainSelectorJob: "/job/chain-selector",
-        WalletRenameJob: "/job/wallet-rename/:walletId",
-        WalletDeleteJob: "/job/wallet-delete/:walletId",
-        WalletLockConfirmJob: "/job/wallet-lock-confirm",
-        TwoStepSecretConfirmJob: "/job/two-step-secret-confirm",
-        SetTwoStepSecretJob: "/job/set-two-step-secret",
-        MnemonicOptionsJob: "/job/mnemonic-options",
-        ContactEditJob: "/job/contact-edit",
-        ContactPickerJob: "/job/contact-picker",
-        WalletAddJob: "/job/wallet-add",
-        WalletListJob: "/job/wallet-list",
-        SecurityWarningJob: "/job/security-warning",
-        TransferConfirmJob: "/job/transfer-confirm",
-        TransferWalletLockJob: "/job/transfer-wallet-lock",
-        FeeEditJob: "/job/fee-edit",
-        ScannerJob: "/job/scanner",
-        ContactAddConfirmJob: "/job/contact-add-confirm",
-        ContactShareJob: "/job/contact-share",
-        ClearDataConfirmJob: "/job/clear-data-confirm",
+        MainTabsActivity: '/',
+        WalletListActivity: '/wallet/list',
+        WalletConfigActivity: '/wallet/:walletId',
+        WalletCreateActivity: '/wallet/create',
+        SendActivity: '/send',
+        ReceiveActivity: '/receive',
+        SettingsActivity: '/settings',
+        SettingsLanguageActivity: '/settings/language',
+        SettingsCurrencyActivity: '/settings/currency',
+        SettingsChainsActivity: '/settings/chains',
+        SettingsMnemonicActivity: '/settings/mnemonic',
+        SettingsWalletLockActivity: '/settings/wallet-lock',
+        SettingsWalletChainsActivity: '/settings/wallet-chains',
+        SettingsStorageActivity: '/settings/storage',
+        HistoryActivity: '/history',
+        TransactionDetailActivity: '/transaction/:txId',
+        ScannerActivity: '/scanner',
+        AuthorizeAddressActivity: '/authorize/address/:id',
+        AuthorizeSignatureActivity: '/authorize/signature/:id',
+        OnboardingRecoverActivity: '/onboarding/recover',
+        TokenDetailActivity: '/token/:tokenId',
+        AddressBookActivity: '/address-book',
+        NotificationsActivity: '/notifications',
+        StakingActivity: '/staking',
+        WelcomeActivity: '/welcome',
+        SettingsSourcesActivity: '/settings/sources',
+        MiniappActivity: '/miniapp/:appId',
+        MiniappDetailActivity: '/miniapp/:appId/detail',
+        ChainSelectorJob: '/job/chain-selector',
+        WalletRenameJob: '/job/wallet-rename/:walletId',
+        WalletDeleteJob: '/job/wallet-delete/:walletId',
+        WalletLockConfirmJob: '/job/wallet-lock-confirm',
+        TwoStepSecretConfirmJob: '/job/two-step-secret-confirm',
+        SetTwoStepSecretJob: '/job/set-two-step-secret',
+        MnemonicOptionsJob: '/job/mnemonic-options',
+        ContactEditJob: '/job/contact-edit',
+        ContactPickerJob: '/job/contact-picker',
+        WalletAddJob: '/job/wallet-add',
+        WalletListJob: '/job/wallet-list',
+        SecurityWarningJob: '/job/security-warning',
+        TransferConfirmJob: '/job/transfer-confirm',
+        TransferWalletLockJob: '/job/transfer-wallet-lock',
+        FeeEditJob: '/job/fee-edit',
+        ScannerJob: '/job/scanner',
+        ContactAddConfirmJob: '/job/contact-add-confirm',
+        ContactShareJob: '/job/contact-share',
+        ClearDataConfirmJob: '/job/clear-data-confirm',
+        WalletPickerJob: '/job/wallet-picker',
+        SigningConfirmJob: '/job/signing-confirm',
+        PermissionRequestJob: '/job/permission-request',
+        MiniappTransferConfirmJob: '/job/miniapp-transfer-confirm',
+        MiniappSignTransactionJob: '/job/miniapp-sign-transaction',
       },
-      fallbackActivity: () => "MainTabsActivity",
+      fallbackActivity: () => 'MainTabsActivity',
       useHash: true,
+      // Allow dot-separated params (e.g. reverse-domain appId: com.domain.app)
+      urlPatternOptions: {
+        segmentValueCharset: 'a-zA-Z0-9-._~ %',
+      },
     }),
   ],
   activities: {
@@ -115,6 +155,9 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
     NotificationsActivity,
     StakingActivity,
     WelcomeActivity,
+    SettingsSourcesActivity,
+    MiniappActivity,
+    MiniappDetailActivity,
     ChainSelectorJob,
     WalletRenameJob,
     WalletDeleteJob,
@@ -134,6 +177,11 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
     ContactAddConfirmJob,
     ContactShareJob,
     ClearDataConfirmJob,
+    WalletPickerJob,
+    SigningConfirmJob,
+    PermissionRequestJob,
+    MiniappTransferConfirmJob,
+    MiniappSignTransactionJob,
   },
   // Note: Don't set initialActivity when using historySyncPlugin
   // The plugin will determine the initial activity based on the URL
diff --git a/src/stores/ecosystem.ts b/src/stores/ecosystem.ts
new file mode 100644
index 00000000..40dae7b0
--- /dev/null
+++ b/src/stores/ecosystem.ts
@@ -0,0 +1,209 @@
+/**
+ * Ecosystem Store
+ * 存储小程序生态系统状态：权限、订阅源等
+ */
+
+import { Store } from '@tanstack/react-store'
+
+/** 权限记录 */
+export interface PermissionRecord {
+  appId: string
+  granted: string[]
+  grantedAt: number
+}
+
+/** 订阅源记录 */
+export interface SourceRecord {
+  url: string
+  name: string
+  lastUpdated: string
+  enabled: boolean
+}
+
+/** Ecosystem 子页面类型 */
+export type EcosystemSubPage = 'discover' | 'mine'
+
+/** Ecosystem 状态 */
+export interface EcosystemState {
+  permissions: PermissionRecord[]
+  sources: SourceRecord[]
+  /** 当前子页面（发现/我的） */
+  activeSubPage: EcosystemSubPage
+}
+
+const STORAGE_KEY = 'ecosystem_store'
+
+/** 从 localStorage 加载状态 */
+function loadState(): EcosystemState {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      const parsed = JSON.parse(stored) as Partial<EcosystemState>
+      return {
+        permissions: parsed.permissions ?? [],
+        sources: parsed.sources ?? [
+          {
+            url: `${import.meta.env.BASE_URL}miniapps/ecosystem.json`,
+            name: 'Bio 官方生态',
+            lastUpdated: new Date().toISOString(),
+            enabled: true,
+          },
+        ],
+        activeSubPage: parsed.activeSubPage ?? 'discover',
+      }
+    }
+  } catch {
+    // ignore
+  }
+  return {
+    permissions: [],
+    sources: [
+      {
+        url: `${import.meta.env.BASE_URL}miniapps/ecosystem.json`,
+        name: 'Bio 官方生态',
+        lastUpdated: new Date().toISOString(),
+        enabled: true,
+      },
+    ],
+    activeSubPage: 'discover',
+  }
+}
+
+/** 保存状态到 localStorage */
+function saveState(state: EcosystemState): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+  } catch {
+    // ignore
+  }
+}
+
+/** Store 实例 */
+export const ecosystemStore = new Store<EcosystemState>(loadState())
+
+// 自动保存
+ecosystemStore.subscribe(() => {
+  saveState(ecosystemStore.state)
+})
+
+/** Selectors */
+export const ecosystemSelectors = {
+  /** 获取应用的已授权权限 */
+  getGrantedPermissions: (state: EcosystemState, appId: string): string[] => {
+    return state.permissions.find((p) => p.appId === appId)?.granted ?? []
+  },
+
+  /** 检查是否有特定权限 */
+  hasPermission: (state: EcosystemState, appId: string, permission: string): boolean => {
+    const granted = ecosystemSelectors.getGrantedPermissions(state, appId)
+    return granted.includes(permission)
+  },
+
+  /** 获取启用的订阅源 */
+  getEnabledSources: (state: EcosystemState): SourceRecord[] => {
+    return state.sources.filter((s) => s.enabled)
+  },
+}
+
+/** Actions */
+export const ecosystemActions = {
+  /** 授予权限 */
+  grantPermissions: (appId: string, permissions: string[]): void => {
+    ecosystemStore.setState((state) => {
+      const existing = state.permissions.find((p) => p.appId === appId)
+      if (existing) {
+        // 合并权限
+        const newGranted = [...new Set([...existing.granted, ...permissions])]
+        return {
+          ...state,
+          permissions: state.permissions.map((p) =>
+            p.appId === appId ? { ...p, granted: newGranted, grantedAt: Date.now() } : p
+          ),
+        }
+      } else {
+        // 新增记录
+        return {
+          ...state,
+          permissions: [
+            ...state.permissions,
+            { appId, granted: permissions, grantedAt: Date.now() },
+          ],
+        }
+      }
+    })
+  },
+
+  /** 撤销权限 */
+  revokePermissions: (appId: string, permissions?: string[]): void => {
+    ecosystemStore.setState((state) => {
+      if (!permissions) {
+        // 撤销所有权限
+        return {
+          ...state,
+          permissions: state.permissions.filter((p) => p.appId !== appId),
+        }
+      }
+      // 撤销指定权限
+      return {
+        ...state,
+        permissions: state.permissions.map((p) =>
+          p.appId === appId
+            ? { ...p, granted: p.granted.filter((g) => !permissions.includes(g)) }
+            : p
+        ),
+      }
+    })
+  },
+
+  /** 添加订阅源 */
+  addSource: (url: string, name: string): void => {
+    ecosystemStore.setState((state) => {
+      if (state.sources.some((s) => s.url === url)) {
+        return state // 已存在
+      }
+      return {
+        ...state,
+        sources: [
+          ...state.sources,
+          { url, name, lastUpdated: new Date().toISOString(), enabled: true },
+        ],
+      }
+    })
+  },
+
+  /** 移除订阅源 */
+  removeSource: (url: string): void => {
+    ecosystemStore.setState((state) => ({
+      ...state,
+      sources: state.sources.filter((s) => s.url !== url),
+    }))
+  },
+
+  /** 切换订阅源启用状态 */
+  toggleSource: (url: string): void => {
+    ecosystemStore.setState((state) => ({
+      ...state,
+      sources: state.sources.map((s) =>
+        s.url === url ? { ...s, enabled: !s.enabled } : s
+      ),
+    }))
+  },
+
+  /** 更新订阅源时间 */
+  updateSourceTimestamp: (url: string): void => {
+    ecosystemStore.setState((state) => ({
+      ...state,
+      sources: state.sources.map((s) =>
+        s.url === url ? { ...s, lastUpdated: new Date().toISOString() } : s
+      ),
+    }))
+  },
+
+  /** 设置当前子页面 */
+  setActiveSubPage: (subPage: EcosystemSubPage): void => {
+    ecosystemStore.setState((state) => ({
+      ...state,
+      activeSubPage: subPage,
+    }))
+  },
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 642fd6f0..2034226f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,14 +1,28 @@
+/**
+ * KeyApp 主程序全局样式
+ * 
+ * 导入共享主题 + 主程序专属样式
+ */
+
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @import 'shadcn/tailwind.css';
+
+/* 共享主题 - 小程序也可以导入此文件 */
+@import './theme.css';
+
+/* 字体包 - 主程序专属 */
 @import '@fontsource-variable/figtree';
+@import '@fontsource-variable/dm-sans';
+@import '@fontsource/dm-mono/400.css';
+@import '@fontsource/dm-mono/500.css';
+@import '@fontsource/dm-serif-display/400.css';
+@import '@fontsource/dm-serif-display/400-italic.css';
 
-/* Stackflow Navigation */
+/* Stackflow Navigation - 主程序专属 */
 @import '@stackflow/plugin-basic-ui/index.css';
 
 /* Override stackflow plugin colors for dark mode */
-/* The plugin uses vanilla-extract classes with hardcoded #fff backgrounds */
-/* Target stackflow screen containers (AppScreen) */
 .dark [data-stackflow-component-name='AppScreen'] {
   --stackflow-plugin-basic-ui-background-color: var(--background);
   --stackflow-plugin-basic-ui-app-bar-background-color: var(--background);
@@ -18,387 +32,385 @@
   background-color: var(--background) !important;
 }
 
-/* BottomSheet - light white backdrop in dark mode */
 .dark [data-stackflow-component-name='BottomSheet'] {
   --stackflow-plugin-basic-ui-dim-background-color: rgba(255, 255, 255, 0.15);
   --stackflow-plugin-basic-ui-background-color: var(--background);
 }
 
-/* Modal */
 .dark [data-stackflow-component-name='Modal'] {
   --stackflow-plugin-basic-ui-dim-background-color: rgba(255, 255, 255, 0.15);
   --stackflow-plugin-basic-ui-background-color: var(--background);
 }
 
-/* 本地字体 - DM 系列 (Fontsource) */
-@import '@fontsource-variable/dm-sans';
-@import '@fontsource/dm-mono/400.css';
-@import '@fontsource/dm-mono/500.css';
-@import '@fontsource/dm-serif-display/400.css';
-@import '@fontsource/dm-serif-display/400-italic.css';
+/* 基础样式 - 主程序专属 */
+@layer base {
+  * {
+    @apply border-border;
+  }
+  @supports (corner-shape: superellipse(2)) {
+    * {
+      --radius-base: 2rem;
+    }
+    :not(.rounded-full) {
+      corner-shape: superellipse(2);
+    }
+    :where(.rounded-full):not(.aspect-square) {
+      corner-shape: superellipse(1.1);
+    }
+  }
 
-/* shadcnui */
-@custom-variant dark (&:is(.dark *));
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-/* 注册 CSS 自定义属性类型 - 支持动画和继承 */
-@property --primary-hue {
-  syntax: '<number>';
-  inherits: true;
-  initial-value: 323;
-}
+  /* RTL 支持 */
+  [dir='rtl'] {
+    --direction-multiplier: -1;
+  }
 
-@property --primary-saturation {
-  syntax: '<number>';
-  inherits: true;
-  initial-value: 0.26;
+  [dir='ltr'] {
+    --direction-multiplier: 1;
+  }
 }
 
-@property --primary-lightness {
-  syntax: '<number>';
-  inherits: true;
-  initial-value: 0.59;
+/* 禁用长按和右键菜单（移动端 App 体验） */
+html, body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
-@property --primary {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(0.59 0.26 323);
+/* 允许输入框选择文本 */
+input, textarea, [contenteditable="true"] {
+  -webkit-user-select: text;
+  user-select: text;
 }
 
-@property --primary-foreground {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(1 0 0);
-}
+/* ============================================
+ * Scroll-Driven Animations
+ * 使用 CSS animation-timeline 实现滚动驱动动画
+ * 渐进增强：不支持的浏览器保持初始状态
+ * ============================================ */
 
-:root {
-  /* 动态主题色 - 可被钱包主题覆盖 */
-  --primary-hue: 323;
-  --primary-saturation: 0.26;
-  --primary-lightness: 0.59;
-  
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  /* primary 使用动态 hue */
-  --primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  /* chart 颜色使用动态 hue，通过偏移产生和谐色 */
-  --chart-1: oklch(0.83 0.13 calc(var(--primary-hue) - 2));
-  --chart-2: oklch(0.75 0.21 calc(var(--primary-hue) - 1));
-  --chart-3: oklch(0.67 0.26 calc(var(--primary-hue) - 1));
-  --chart-4: oklch(0.59 0.26 var(--primary-hue));
-  --chart-5: oklch(0.52 0.23 calc(var(--primary-hue) + 1));
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  /* sidebar-primary 使用动态 hue */
-  --sidebar-primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
-  --sidebar-primary-foreground: oklch(0.98 0.02 calc(var(--primary-hue) - 3));
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-}
-
-.dark {
-  /* dark 模式下调整亮度 */
-  --primary-lightness: 0.67;
-  
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  /* primary 继承动态 hue */
-  --primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
-  --primary-foreground: oklch(0.141 0.005 285.823);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  /* chart 颜色继承动态 hue */
-  --chart-1: oklch(0.83 0.13 calc(var(--primary-hue) - 2));
-  --chart-2: oklch(0.75 0.21 calc(var(--primary-hue) - 1));
-  --chart-3: oklch(0.67 0.26 calc(var(--primary-hue) - 1));
-  --chart-4: oklch(0.59 0.26 var(--primary-hue));
-  --chart-5: oklch(0.52 0.23 calc(var(--primary-hue) + 1));
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  /* sidebar-primary 继承动态 hue */
-  --sidebar-primary: oklch(0.75 0.21 var(--primary-hue));
-  --sidebar-primary-foreground: oklch(0.98 0.02 calc(var(--primary-hue) - 3));
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-
-@theme inline {
-  --font-sans: 'Figtree Variable', sans-serif;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-/* 主题配置 - Tailwind 4.x @theme 指令 */
-@theme {
-  /* 字体系统 - DM 品牌字体 */
-  --font-sans: 'DM Sans Variable', ui-sans-serif, system-ui, sans-serif;
-  --font-mono: 'DM Mono', ui-monospace, monospace;
-  --font-serif: 'DM Serif Display', ui-serif, Georgia, serif;
-
-  /* 成功色 - 绿色 */
-  --color-success: oklch(50% 0.2 145);
-  --color-success-foreground: oklch(100% 0 0);
-
-  /* 信息色 - 蓝色 */
-  --color-info: oklch(50% 0.16 239);
-  --color-info-foreground: oklch(100% 0 0);
-
-  /* 警告色 - 橙色 */
-  --color-warning: oklch(54% 0.17 64.05);
-  --color-warning-foreground: oklch(100% 0 0);
-
-  /* 错误色 - 红色 */
-  --color-destructive: oklch(55% 0.2 25);
-  --color-destructive-foreground: oklch(100% 0 0);
-
-  /* 链专属色 */
-  --color-chain-ethereum: oklch(55% 0.2 260);
-  --color-chain-tron: oklch(55% 0.25 25);
-  --color-chain-binance: oklch(80% 0.18 85);
-  --color-chain-bitcoin: oklch(70% 0.18 60);
-  --color-chain-bfmeta: oklch(60% 0.2 290);
-  --color-chain-bfchain: oklch(75% 0.15 195);
-  --color-chain-ccchain: oklch(70% 0.25 320);
-  --color-chain-pmchain: oklch(55% 0.2 280);
-  --color-chain-ethmeta: oklch(55% 0.3 265);
-
-  /* 交易类型专属色 - 按类别归类 */
-  --color-tx-out: oklch(65% 0.22 25);            /* 红橙色 - 资产流出（发送、销毁、迁出） */
-  --color-tx-in: oklch(60% 0.18 145);            /* 绿色 - 资产流入（接收、接受赠送、迁入） */
-  --color-tx-exchange: oklch(55% 0.2 260);       /* 蓝色 - 交换、转移 */
-  --color-tx-lock: oklch(60% 0.2 290);           /* 紫色 - 质押、委托 */
-  --color-tx-security: oklch(55% 0.2 200);       /* 青色 - 安全、签名 */
-  --color-tx-create: oklch(65% 0.18 60);         /* 橙色 - 创建、发行 */
-  --color-tx-system: oklch(50% 0.08 260);        /* 灰蓝色 - 系统操作 */
-
-  /* 渐变色 */
-  --gradient-blue: linear-gradient(to bottom, oklch(85% 0.12 200), oklch(70% 0.15 220));
-  --gradient-purple: linear-gradient(to bottom, oklch(75% 0.15 290), oklch(60% 0.2 280));
-  --gradient-red: linear-gradient(to bottom, oklch(75% 0.15 10), oklch(60% 0.2 350));
-  --gradient-mint: linear-gradient(to bottom, oklch(80% 0.15 320), oklch(55% 0.25 290));
-
-  /* 容器查询断点 */
-  --container-3xs: 16rem; /* 256px - 极窄 */
-  --container-2xs: 18rem; /* 288px - 窄 */
-  --container-xs: 20rem; /* 320px - 小 */
-  --container-sm: 24rem; /* 384px - 中 */
-  --container-md: 28rem; /* 448px - 标准 */
-  --container-lg: 32rem; /* 512px - 大 */
-  --container-xl: 36rem; /* 576px - 宽 */
-
-  /* 动画 */
-  --animate-slide-in-bottom: slide-in-bottom 0.3s ease-out;
-  --animate-fade-in: fade-in 0.2s ease-out;
-  --animate-rainbow-flow: rainbow-flow 3s linear infinite;
-}
-
-/* 自定义动画 */
-@keyframes slide-in-bottom {
+@keyframes show-compact-header {
   from {
-    transform: translateY(100%);
+    opacity: 0;
+    transform: translateY(-100%);
   }
   to {
+    opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+@keyframes fade-in-title {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 发现页滚动驱动动画（渐进增强） */
+.discover-page {
+  --header-height: 120px;
 }
 
-@keyframes rainbow-flow {
+@keyframes discover-header-shrink {
   0% {
-    background-position: 0% 50%;
+    padding-top: 3rem;
+    padding-bottom: 1rem;
   }
   100% {
-    background-position: 200% 50%;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 }
 
-@keyframes marquee {
-  0% {
-    transform: translateX(0);
+.discover-header {
+  animation: discover-header-shrink ease-out forwards;
+  animation-timeline: scroll();
+  animation-duration: 1s;
+  animation-range: entry 0 exit calc(2 * var(--header-height));
+}
+
+/* 详情页滚动驱动 */
+.detail-scroll-container {
+  timeline-scope: --detail-scroll;
+}
+
+.detail-scroller {
+  scroll-timeline: --detail-scroll block;
+}
+
+.detail-header-title {
+  opacity: 0;
+  animation: fade-in-title linear both;
+  animation-timeline: --detail-scroll;
+  animation-range: 0 120px;
+}
+
+/* 视图进入动画 */
+@keyframes scroll-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-  100% {
-    transform: translateX(calc(-100% - 2rem));
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-/* Marquee animation utilities */
-@utility animate-marquee {
-  animation: marquee var(--marquee-duration, 5s) linear infinite;
+.animate-on-scroll {
+  animation: scroll-fade-in linear both;
+  animation-timeline: view();
+  animation-range: entry 0% entry 100%;
 }
 
-@utility animate-paused {
-  animation-play-state: paused;
+/* iOS Desktop Icon 占位容器 */
+.ios-icon-wrapper {
+  position: relative;
 }
 
-/* 自定义工具类 */
-@utility bg-gradient-blue {
-  background: var(--gradient-blue);
+/* iOS Desktop Icon (popover=manual 强制可见) */
+.ios-desktop-icon {
+  /* 重置浏览器 popover 默认样式（未打开状态） */
+  display: block !important;
+  position: static !important;
+  inset: auto !important;
+  margin: 0 !important;
+  background: transparent;
+  border: none;
+  padding: 0;
+  overflow: visible;
 }
 
-@utility bg-gradient-purple {
-  background: var(--gradient-purple);
+/* popover 打开时固定定位到原位 */
+.ios-desktop-icon:popover-open {
+  position: fixed !important;
+  inset: auto !important;
+  top: var(--popover-top) !important;
+  left: var(--popover-left) !important;
+  margin: 0 !important;
+  z-index: 50;
 }
 
-@utility bg-gradient-red {
-  background: var(--gradient-red);
+/* ::backdrop 伪元素样式 */
+.ios-desktop-icon::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  
+  /* 用 CSS 变量控制退出动画 */
+  opacity: var(--backdrop-opacity, 1);
+  transition: 
+    opacity 0.2s ease-out,
+    backdrop-filter 0.2s ease-out,
+    -webkit-backdrop-filter 0.2s ease-out,
+    display 0.2s ease-out allow-discrete,
+    overlay 0.2s ease-out allow-discrete;
 }
 
-@utility bg-gradient-mint {
-  background: var(--gradient-mint);
+@starting-style {
+  .ios-desktop-icon::backdrop {
+    opacity: 0;
+    backdrop-filter: blur(0) saturate(100%);
+    -webkit-backdrop-filter: blur(0) saturate(100%);
+  }
 }
 
-/* 安全区域 */
-@utility safe-area-inset-bottom {
-  padding-bottom: env(safe-area-inset-bottom);
+/* popover 打开时图标效果 */
+.ios-desktop-icon:popover-open > button {
+  transform: scale(1.08) translateY(-4px);
+  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
 }
 
-@utility safe-area-inset-top {
-  padding-top: env(safe-area-inset-top);
+/* 点击拦截层（透明，只拦截事件） */
+.ios-backdrop-clickarea {
+  background: transparent;
 }
 
-/* 基础样式 */
-@layer base {
-  * {
-    @apply border-border;
-  }
-  @supports (corner-shape: superellipse(2)) {
-    * {
-      --radius-base: 2rem;
-    }
-    :not(.rounded-full) {
-      corner-shape: superellipse(2);
-    }
-    :where(.rounded-full):not(.aspect-square) {
-      corner-shape: superellipse(1.1);
-    }
-  }
+/* 上下文菜单 - 支持进入和退出动画 */
+.ios-context-menu {
+  z-index: 51;
+  transform-origin: center bottom;
+  
+  /* 动画属性 */
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: 
+    opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+    display 0.25s allow-discrete;
+}
 
-  body {
-    @apply bg-background text-foreground;
-    font-family: var(--font-sans);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+/* 菜单进入动画 */
+@starting-style {
+  .ios-context-menu {
+    opacity: 0;
+    transform: scale(0.85) translateY(8px);
   }
+}
 
-  /* RTL 支持 */
-  [dir='rtl'] {
-    /* RTL 时自动镜像部分图标 */
-    --direction-multiplier: -1;
-  }
+/* 菜单退出状态（通过 JS 添加 class） */
+.ios-context-menu.closing {
+  opacity: 0;
+  transform: scale(0.9) translateY(4px);
+}
 
-  [dir='ltr'] {
-    --direction-multiplier: 1;
-  }
+/* ============================================
+ * iOS Wallpaper 壁纸组件
+ * ============================================ */
+
+.ios-wallpaper {
+  overflow: hidden;
 }
 
-/* RTL 工具类 */
-@utility flip-rtl {
-  [dir='rtl'] & {
-    transform: scaleX(-1);
-  }
+/* 深色 1: Color Dodge 高光 */
+.ios-wallpaper--color-dodge {
+  background: #0f0f1a;
+}
+.ios-wallpaper--color-dodge::before {
+  content: '';
+  position: absolute;
+  inset: -20%;
+  background: 
+    radial-gradient(ellipse 40% 40% at 30% 30%, rgba(99, 102, 241, 0.4), transparent),
+    radial-gradient(ellipse 30% 30% at 70% 60%, rgba(236, 72, 153, 0.3), transparent);
+  mix-blend-mode: color-dodge;
+  filter: blur(40px);
+  pointer-events: none;
+}
+.ios-wallpaper--color-dodge::after {
+  content: '';
+  position: absolute;
+  inset: -20%;
+  background: 
+    radial-gradient(ellipse 35% 35% at 60% 20%, rgba(168, 85, 247, 0.35), transparent),
+    radial-gradient(ellipse 25% 25% at 20% 70%, rgba(59, 130, 246, 0.3), transparent);
+  mix-blend-mode: screen;
+  filter: blur(50px);
+  pointer-events: none;
+}
+/* 整点报时动画 */
+.ios-wallpaper--color-dodge.ios-wallpaper--animating::before {
+  animation: ios-wallpaper-float 5s ease-in-out infinite;
+}
+.ios-wallpaper--color-dodge.ios-wallpaper--animating::after {
+  animation: ios-wallpaper-float 6s ease-in-out infinite reverse;
 }
 
-/* Scanner animation */
-@keyframes scan {
-  0%,
-  100% {
-    top: 0.5rem;
-  }
-  50% {
-    top: calc(100% - 0.5rem);
-  }
+/* 深色 2: Hard Light + 星点 */
+.ios-wallpaper--hard-light {
+  background: radial-gradient(ellipse at center, #1a1a3e 0%, #0a0a15 100%);
+}
+.ios-wallpaper--hard-light .ios-wallpaper__stars {
+  position: absolute;
+  inset: 0;
+  background-image: 
+    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.5), transparent),
+    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.6), transparent),
+    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.5), transparent),
+    radial-gradient(2px 2px at 200px 150px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 250px 90px, rgba(255,255,255,0.5), transparent);
+  background-size: 300px 200px;
+  pointer-events: none;
+}
+.ios-wallpaper--hard-light .ios-wallpaper__glow {
+  position: absolute;
+  inset: 0;
+  background: 
+    radial-gradient(ellipse 60% 50% at 25% 25%, rgba(139, 92, 246, 0.6), transparent),
+    radial-gradient(ellipse 50% 40% at 75% 70%, rgba(59, 130, 246, 0.5), transparent);
+  mix-blend-mode: hard-light;
+  filter: blur(30px);
+  pointer-events: none;
+}
+.ios-wallpaper--hard-light .ios-wallpaper__highlight {
+  position: absolute;
+  inset: 0;
+  background: 
+    radial-gradient(ellipse 30% 30% at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
+  mix-blend-mode: overlay;
+  pointer-events: none;
 }
 
-@utility animate-scan {
-  animation: scan 2s ease-in-out infinite;
+/* 亮色 1: 动态彩虹 */
+.ios-wallpaper--rainbow {
+  background: #ffffff;
+}
+.ios-wallpaper--rainbow::before {
+  content: '';
+  position: absolute;
+  inset: -30%;
+  background: 
+    radial-gradient(ellipse 50% 50% at 15% 25%, rgba(99, 102, 241, 0.35), transparent),
+    radial-gradient(ellipse 45% 45% at 85% 15%, rgba(236, 72, 153, 0.3), transparent),
+    radial-gradient(ellipse 40% 40% at 70% 85%, rgba(34, 197, 94, 0.25), transparent);
+  mix-blend-mode: multiply;
+  filter: blur(50px);
+  pointer-events: none;
+}
+.ios-wallpaper--rainbow::after {
+  content: '';
+  position: absolute;
+  inset: -30%;
+  background: 
+    radial-gradient(ellipse 45% 45% at 30% 75%, rgba(251, 191, 36, 0.3), transparent),
+    radial-gradient(ellipse 50% 50% at 60% 40%, rgba(59, 130, 246, 0.25), transparent);
+  mix-blend-mode: multiply;
+  filter: blur(40px);
+  pointer-events: none;
+}
+/* 整点报时动画 */
+.ios-wallpaper--rainbow.ios-wallpaper--animating::before {
+  animation: ios-wallpaper-float 5s ease-in-out infinite;
+}
+.ios-wallpaper--rainbow.ios-wallpaper--animating::after {
+  animation: ios-wallpaper-float 6s ease-in-out infinite reverse;
 }
 
-/* 禁用长按和右键菜单（移动端 App 体验） */
-html, body {
-  -webkit-touch-callout: none; /* iOS 禁用长按弹出菜单 */
-  -webkit-user-select: none;   /* 禁用文本选择 */
-  user-select: none;
-  -webkit-tap-highlight-color: transparent; /* 禁用点击高亮 */
+/* 亮色 2: 强烈 Multiply */
+.ios-wallpaper--vivid {
+  background: linear-gradient(135deg, #fefefe 0%, #f8f8ff 100%);
+}
+.ios-wallpaper--vivid::before {
+  content: '';
+  position: absolute;
+  inset: -20%;
+  background: 
+    radial-gradient(ellipse 60% 50% at 10% 20%, rgba(99, 102, 241, 0.45), transparent 70%),
+    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(236, 72, 153, 0.4), transparent 70%);
+  mix-blend-mode: multiply;
+  filter: blur(30px);
+  pointer-events: none;
+}
+.ios-wallpaper--vivid::after {
+  content: '';
+  position: absolute;
+  inset: -20%;
+  background: 
+    radial-gradient(ellipse 55% 45% at 80% 20%, rgba(168, 85, 247, 0.35), transparent 70%),
+    radial-gradient(ellipse 45% 55% at 20% 80%, rgba(14, 165, 233, 0.3), transparent 70%);
+  mix-blend-mode: multiply;
+  filter: blur(35px);
+  pointer-events: none;
+}
+/* 整点报时动画 */
+.ios-wallpaper--vivid.ios-wallpaper--animating::before {
+  animation: ios-wallpaper-float 4.5s ease-in-out infinite;
+}
+.ios-wallpaper--vivid.ios-wallpaper--animating::after {
+  animation: ios-wallpaper-float 5.5s ease-in-out infinite reverse;
 }
 
-/* 允许输入框选择文本 */
-input, textarea, [contenteditable="true"] {
-  -webkit-user-select: text;
-  user-select: text;
+@keyframes ios-wallpaper-float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(5%, 5%) scale(1.05); }
+  50% { transform: translate(-3%, 8%) scale(0.98); }
+  75% { transform: translate(-5%, -3%) scale(1.02); }
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 00000000..340f81ed
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,334 @@
+/**
+ * KeyApp Theme - 可被小程序共享的主题定义
+ * 
+ * 包含：
+ * - CSS 自定义属性类型注册 (@property)
+ * - CSS 变量值 (:root, .dark)
+ * - Tailwind 颜色映射 (@theme inline)
+ * - 扩展主题 (@theme)
+ * - 动画定义 (@keyframes)
+ * - 自定义工具类 (@utility)
+ */
+
+/* Dark 模式变体 */
+@custom-variant dark (&:is(.dark *));
+
+/* 注册 CSS 自定义属性类型 - 支持动画和继承 */
+@property --primary-hue {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 323;
+}
+
+@property --primary-saturation {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.26;
+}
+
+@property --primary-lightness {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.59;
+}
+
+@property --primary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.59 0.26 323);
+}
+
+@property --primary-foreground {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(1 0 0);
+}
+
+/* ========== CSS 变量值 ========== */
+
+:root {
+  /* 布局变量 */
+  --tab-bar-height: calc(52px + env(safe-area-inset-bottom, 0px));
+
+  /* 动态主题色 - 可被钱包主题覆盖 */
+  --primary-hue: 323;
+  --primary-saturation: 0.26;
+  --primary-lightness: 0.59;
+  
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  /* primary 使用动态 hue */
+  --primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  /* chart 颜色使用动态 hue，通过偏移产生和谐色 */
+  --chart-1: oklch(0.83 0.13 calc(var(--primary-hue) - 2));
+  --chart-2: oklch(0.75 0.21 calc(var(--primary-hue) - 1));
+  --chart-3: oklch(0.67 0.26 calc(var(--primary-hue) - 1));
+  --chart-4: oklch(0.59 0.26 var(--primary-hue));
+  --chart-5: oklch(0.52 0.23 calc(var(--primary-hue) + 1));
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  /* sidebar-primary 使用动态 hue */
+  --sidebar-primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
+  --sidebar-primary-foreground: oklch(0.98 0.02 calc(var(--primary-hue) - 3));
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  /* dark 模式下调整亮度 */
+  --primary-lightness: 0.67;
+  
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  /* primary 继承动态 hue */
+  --primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
+  --primary-foreground: oklch(0.141 0.005 285.823);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  /* chart 颜色继承动态 hue */
+  --chart-1: oklch(0.83 0.13 calc(var(--primary-hue) - 2));
+  --chart-2: oklch(0.75 0.21 calc(var(--primary-hue) - 1));
+  --chart-3: oklch(0.67 0.26 calc(var(--primary-hue) - 1));
+  --chart-4: oklch(0.59 0.26 var(--primary-hue));
+  --chart-5: oklch(0.52 0.23 calc(var(--primary-hue) + 1));
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  /* sidebar-primary 继承动态 hue */
+  --sidebar-primary: oklch(0.75 0.21 var(--primary-hue));
+  --sidebar-primary-foreground: oklch(0.98 0.02 calc(var(--primary-hue) - 3));
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+/* ========== Tailwind 颜色映射 ========== */
+
+@theme inline {
+  --font-sans: 'Figtree Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* ========== 扩展主题 ========== */
+
+@theme {
+  /* 字体系统 - DM 品牌字体 */
+  --font-sans: 'DM Sans Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'DM Mono', ui-monospace, monospace;
+  --font-serif: 'DM Serif Display', ui-serif, Georgia, serif;
+
+  /* 成功色 - 绿色 */
+  --color-success: oklch(50% 0.2 145);
+  --color-success-foreground: oklch(100% 0 0);
+
+  /* 信息色 - 蓝色 */
+  --color-info: oklch(50% 0.16 239);
+  --color-info-foreground: oklch(100% 0 0);
+
+  /* 警告色 - 橙色 */
+  --color-warning: oklch(54% 0.17 64.05);
+  --color-warning-foreground: oklch(100% 0 0);
+
+  /* 错误色 - 红色 */
+  --color-destructive: oklch(55% 0.2 25);
+  --color-destructive-foreground: oklch(100% 0 0);
+
+  /* 链专属色 */
+  --color-chain-ethereum: oklch(55% 0.2 260);
+  --color-chain-tron: oklch(55% 0.25 25);
+  --color-chain-binance: oklch(80% 0.18 85);
+  --color-chain-bitcoin: oklch(70% 0.18 60);
+  --color-chain-bfmeta: oklch(60% 0.2 290);
+  --color-chain-bfchain: oklch(75% 0.15 195);
+  --color-chain-ccchain: oklch(70% 0.25 320);
+  --color-chain-pmchain: oklch(55% 0.2 280);
+  --color-chain-ethmeta: oklch(55% 0.3 265);
+
+  /* 交易类型专属色 - 按类别归类 */
+  --color-tx-out: oklch(65% 0.22 25);            /* 红橙色 - 资产流出 */
+  --color-tx-in: oklch(60% 0.18 145);            /* 绿色 - 资产流入 */
+  --color-tx-exchange: oklch(55% 0.2 260);       /* 蓝色 - 交换、转移 */
+  --color-tx-lock: oklch(60% 0.2 290);           /* 紫色 - 质押、委托 */
+  --color-tx-security: oklch(55% 0.2 200);       /* 青色 - 安全、签名 */
+  --color-tx-create: oklch(65% 0.18 60);         /* 橙色 - 创建、发行 */
+  --color-tx-system: oklch(50% 0.08 260);        /* 灰蓝色 - 系统操作 */
+
+  /* 渐变色 */
+  --gradient-blue: linear-gradient(to bottom, oklch(85% 0.12 200), oklch(70% 0.15 220));
+  --gradient-purple: linear-gradient(to bottom, oklch(75% 0.15 290), oklch(60% 0.2 280));
+  --gradient-red: linear-gradient(to bottom, oklch(75% 0.15 10), oklch(60% 0.2 350));
+  --gradient-mint: linear-gradient(to bottom, oklch(80% 0.15 320), oklch(55% 0.25 290));
+
+  /* 容器查询断点 */
+  --container-3xs: 16rem; /* 256px - 极窄 */
+  --container-2xs: 18rem; /* 288px - 窄 */
+  --container-xs: 20rem; /* 320px - 小 */
+  --container-sm: 24rem; /* 384px - 中 */
+  --container-md: 28rem; /* 448px - 标准 */
+  --container-lg: 32rem; /* 512px - 大 */
+  --container-xl: 36rem; /* 576px - 宽 */
+
+  /* 动画 */
+  --animate-slide-in-bottom: slide-in-bottom 0.3s ease-out;
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-rainbow-flow: rainbow-flow 3s linear infinite;
+}
+
+/* ========== 动画定义 ========== */
+
+@keyframes slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rainbow-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-100% - 2rem));
+  }
+}
+
+@keyframes scan {
+  0%,
+  100% {
+    top: 0.5rem;
+  }
+  50% {
+    top: calc(100% - 0.5rem);
+  }
+}
+
+/* ========== 自定义工具类 ========== */
+
+@utility animate-marquee {
+  animation: marquee var(--marquee-duration, 5s) linear infinite;
+}
+
+@utility animate-paused {
+  animation-play-state: paused;
+}
+
+@utility animate-scan {
+  animation: scan 2s ease-in-out infinite;
+}
+
+@utility bg-gradient-blue {
+  background: var(--gradient-blue);
+}
+
+@utility bg-gradient-purple {
+  background: var(--gradient-purple);
+}
+
+@utility bg-gradient-red {
+  background: var(--gradient-red);
+}
+
+@utility bg-gradient-mint {
+  background: var(--gradient-mint);
+}
+
+@utility safe-area-inset-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+@utility safe-area-inset-top {
+  padding-top: env(safe-area-inset-top);
+}
+
+@utility flip-rtl {
+  [dir='rtl'] & {
+    transform: scaleX(-1);
+  }
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 20381cf5..2a5d6e43 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -34,5 +34,5 @@
       "#currency-exchange-impl": ["./src/services/currency-exchange/web.ts"]
     }
   },
-  "include": ["vite.config.ts", "vitest.config.ts", ".storybook/**/*"]
+  "include": ["vite.config.ts", "vitest.config.ts", ".storybook/**/*", "scripts/**/*"]
 }
diff --git a/turbo.json b/turbo.json
index bb583fb7..9e2fc83b 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,6 +1,12 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "tasks": {
+    "lint:run": {
+      "dependsOn": [],
+      "inputs": ["src/**/*.ts", "src/**/*.tsx", ".oxlintrc.json"],
+      "outputs": [],
+      "cache": true
+    },
     "typecheck:run": {
       "dependsOn": [],
       "inputs": ["src/**/*.ts", "src/**/*.tsx", "tsconfig*.json"],
@@ -13,6 +19,12 @@
       "outputs": ["coverage/**"],
       "cache": true
     },
+    "test:storybook": {
+      "dependsOn": [],
+      "inputs": ["src/**/*.ts", "src/**/*.tsx", "vitest.config.ts"],
+      "outputs": [],
+      "cache": true
+    },
     "i18n:run": {
       "dependsOn": [],
       "inputs": ["src/**/*.ts", "src/**/*.tsx", "src/i18n/**/*.json", "scripts/i18n-check.ts"],
@@ -38,6 +50,12 @@
       "outputs": ["e2e/report/**", "e2e/test-results/**"],
       "cache": true
     },
+    "e2e:audit": {
+      "dependsOn": [],
+      "inputs": ["e2e/**/*.spec.ts", "e2e/__screenshots__/**"],
+      "outputs": [],
+      "cache": true
+    },
     "e2e:ci": {
       "dependsOn": [],
       "inputs": [
diff --git a/vite.config.ts b/vite.config.ts
index 4befe326..a53c90a6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,8 @@ import mkcert from 'vite-plugin-mkcert'
 import { networkInterfaces } from 'node:os'
 import { resolve } from 'node:path'
 import { mockDevToolsPlugin } from './scripts/vite-plugin-mock-devtools'
+import { miniappsPlugin } from './scripts/vite-plugin-miniapps'
+import { buildCheckPlugin } from './scripts/vite-plugin-build-check'
 
 /**
  * 服务实现选择（编译时）
@@ -82,6 +84,8 @@ export default defineConfig({
     react(),
     tailwindcss(),
     mockDevToolsPlugin(),
+    miniappsPlugin(),
+    buildCheckPlugin(),
   ],
   resolve: {
     alias: {