diff --git a/docs/white-book/11-DApp-Guide/01-Runtime-Env/01-Container-Architecture.md b/docs/white-book/11-DApp-Guide/01-Runtime-Env/01-Container-Architecture.md
new file mode 100644
index 000000000..00c380d6f
--- /dev/null
+++ b/docs/white-book/11-DApp-Guide/01-Runtime-Env/01-Container-Architecture.md
@@ -0,0 +1,170 @@
+# 01. Container 架构 (Container Architecture)
+
+> Code: `src/services/miniapp-runtime/container/`
+
+KeyApp 的 Miniapp 运行时采用 **Container 抽象层** 设计，支持多种沙箱隔离技术。
+
+## 设计目标
+
+1. **统一接口**: 无论底层使用 iframe 还是 Wujie，上层代码通过统一的 `ContainerHandle` 操作
+2. **可扩展性**: 未来可轻松添加新的容器实现（如 Web Worker、Shadow DOM）
+3. **平滑迁移**: 从 iframe 模式迁移到 Wujie 模式无需修改 UI 层代码
+
+## 容器类型
+
+| 类型     | 实现文件              | 特点               | 适用场景      |
+| -------- | --------------------- | ------------------ | ------------- |
+| `iframe` | `iframe-container.ts` | 原生浏览器隔离     | 简单 H5 应用  |
+| `wujie`  | `wujie-container.ts`  | JS 沙箱 + CSS 隔离 | 复杂 SPA 应用 |
+
+## 核心接口
+
+### ContainerCreateOptions
+
+创建容器时的配置选项：
+
+```typescript
+interface ContainerCreateOptions {
+  type: 'iframe' | 'wujie';
+  appId: string;
+  url: string;
+  mountTarget: HTMLElement; // 容器挂载的目标元素
+}
+```
+
+### ContainerHandle
+
+容器操作句柄：
+
+```typescript
+interface ContainerHandle {
+  element: HTMLElement; // 容器的 DOM 元素
+  destroy: () => void; // 销毁容器
+  moveToForeground: () => void; // 移到前台
+  moveToBackground: () => void; // 移到后台
+  getIframe: () => HTMLIFrameElement | null; // 获取 iframe（用于通讯）
+}
+```
+
+## 工作原理
+
+### 1. iframe 模式
+
+直接创建 `<iframe>` 元素：
+
+```
+┌─────────────────────────────────────┐
+│ KeyApp Host                         │
+│  ┌───────────────────────────────┐  │
+│  │ iframe (sandbox)              │  │
+│  │  ┌─────────────────────────┐  │  │
+│  │  │ Miniapp HTML/JS/CSS     │  │  │
+│  │  └─────────────────────────┘  │  │
+│  └───────────────────────────────┘  │
+└─────────────────────────────────────┘
+```
+
+- `getIframe()` 直接返回 iframe 元素本身
+
+### 2. Wujie 模式
+
+Wujie 创建一个隐藏的 iframe 用于 JS 沙箱，UI 渲染到指定容器：
+
+```
+┌─────────────────────────────────────┐
+│ KeyApp Host                         │
+│  ┌───────────────────────────────┐  │
+│  │ Container (wujie 渲染目标)    │  │
+│  │  ┌─────────────────────────┐  │  │
+│  │  │ Miniapp UI (Shadow DOM) │  │  │
+│  │  └─────────────────────────┘  │  │
+│  └───────────────────────────────┘  │
+│                                     │
+│  ┌───────────────────────────────┐  │
+│  │ Hidden iframe (JS Sandbox)    │  │ ← getIframe() 返回此元素
+│  │ name="appId"                  │  │
+│  └───────────────────────────────┘  │
+└─────────────────────────────────────┘
+```
+
+- Wujie 的 JS 沙箱运行在一个隐藏的同域 iframe 中
+- `getIframe()` 通过 `document.querySelector('iframe[name="appId"]')` 获取
+
+## 使用示例
+
+```typescript
+import { createContainer } from '@/services/miniapp-runtime/container';
+
+// 创建容器
+const handle = await createContainer({
+  type: 'wujie', // 或 'iframe'
+  appId: 'my-miniapp',
+  url: 'https://example.com/miniapp/',
+  mountTarget: containerRef.current!,
+});
+
+// 获取 iframe 用于通讯
+const iframe = handle.getIframe();
+if (iframe) {
+  // 通过 PostMessage 通讯
+  iframe.contentWindow?.postMessage(message, '*');
+}
+
+// 销毁容器
+handle.destroy();
+```
+
+## 与 Bio-SDK 通讯
+
+无论使用哪种容器类型，Bio-SDK 通讯都通过 `PostMessageBridge` 实现：
+
+```typescript
+import { attachBioProviderToContainer } from '@/services/miniapp-runtime';
+
+// 附加 Bio Provider 到容器
+attachBioProviderToContainer(handle, {
+  onRequest: async (method, params) => {
+    // 处理来自 Miniapp 的请求
+  },
+});
+```
+
+详见 [Bio-SDK 通讯机制](../02-Connectivity/01-Bio-SDK-Communication.md)。
+
+## 样式隔离
+
+### Wujie 模式下的样式注意事项
+
+Wujie 容器使用 Shadow DOM 实现 CSS 隔离。Miniapp 需要注意：
+
+1. **避免使用 `100vh`**: 在嵌套 iframe/Shadow DOM 中，`100vh` 参考的是主文档视口，而非容器高度
+2. **使用百分比高度**: 推荐使用 `height: 100%` 配合正确的父元素高度链
+
+**推荐做法**:
+
+```css
+/* ✅ 正确 */
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+.container {
+  min-height: 100%; /* 或 min-h-full (Tailwind) */
+}
+
+/* ❌ 错误 */
+.container {
+  min-height: 100vh; /* 会超出容器 */
+}
+```
+
+详见 [Miniapp 样式规范](#miniapp-样式规范)。
+
+## 相关文档
+
+- [Miniapp Manifest 规范](./02-Miniapp-Manifest.md)
+- [Bio-SDK 通讯机制](../02-Connectivity/01-Bio-SDK-Communication.md)
+- [Ecosystem 组件](../../03-UI-Ref/05-Components/09-Ecosystem.md)
diff --git a/docs/white-book/11-DApp-Guide/01-Runtime-Env/02-Miniapp-Manifest.md b/docs/white-book/11-DApp-Guide/01-Runtime-Env/02-Miniapp-Manifest.md
index 74f091d36..a0a18b258 100644
--- a/docs/white-book/11-DApp-Guide/01-Runtime-Env/02-Miniapp-Manifest.md
+++ b/docs/white-book/11-DApp-Guide/01-Runtime-Env/02-Miniapp-Manifest.md
@@ -21,10 +21,7 @@ Code: `src/ecosystem/types.ts`
       "type": "image/png"
     }
   ],
-  "permissions": [
-    "wallet:read",
-    "wallet:write"
-  ],
+  "permissions": ["wallet:read", "wallet:write"],
   "splash_screen": {
     "timeout": 3000
   }
@@ -33,6 +30,88 @@ Code: `src/ecosystem/types.ts`
 
 ## 字段详解
 
-*   `display`: 控制窗口模式。`standalone` (隐藏浏览器UI), `minimal-ui`, `browser`。
-*   `permissions`: 申请的 BioBridge 权限。
-*   `splash_screen`: 自定义启动闪屏的行为。
+- `display`: 控制窗口模式。`standalone` (隐藏浏览器UI), `minimal-ui`, `browser`。
+- `permissions`: 申请的 BioBridge 权限。
+- `splash_screen`: 自定义启动闪屏的行为。
+
+## 样式规范 (CSS Guidelines)
+
+Miniapp 运行在 KeyApp 的容器中（iframe 或 Wujie 沙箱），需要遵循以下样式规范以确保正确渲染。
+
+### 布局高度
+
+**关键规则**: 避免使用 `100vh`，改用 `100%`。
+
+| ❌ 错误                   | ✅ 正确                 | 原因                               |
+| ------------------------- | ----------------------- | ---------------------------------- |
+| `min-height: 100vh`       | `min-height: 100%`      | `100vh` 参考主文档视口，会超出容器 |
+| `height: 100vh`           | `height: 100%`          | 同上                               |
+| `min-h-screen` (Tailwind) | `min-h-full` (Tailwind) | `min-h-screen` 等价于 `100vh`      |
+
+### 必需的根样式
+
+在 Miniapp 的全局 CSS 中，必须设置完整的高度链：
+
+```css
+/* src/index.css */
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+```
+
+### 完整示例
+
+```css
+/* index.css */
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* App 容器 */
+.app-container {
+  min-height: 100%; /* ✅ 使用 100% */
+  /* min-height: 100vh;  ❌ 不要使用 */
+}
+```
+
+```tsx
+// App.tsx (Tailwind)
+export function App() {
+  return (
+    <div className="bg-background min-h-full">
+      {' '}
+      {/* ✅ min-h-full */}
+      {/* ... */}
+    </div>
+  );
+}
+```
+
+### 为什么不能用 `100vh`？
+
+在 Wujie 容器模式下，Miniapp 的 UI 渲染在 Shadow DOM 中，而 JS 运行在一个隐藏的 iframe 中。`100vh` 单位参考的是**主文档（KeyApp）的视口高度**，而非 Miniapp 容器的高度。
+
+```
+┌─────────────────────────────────────┐  ← 主文档视口 (100vh 参考这里)
+│ KeyApp Host                         │
+│  ┌───────────────────────────────┐  │
+│  │ Miniapp 容器 (实际可用空间)   │  │  ← Miniapp 应该填满这里
+│  │                               │  │
+│  │  使用 100vh 会超出容器边界！  │  │
+│  │                               │  │
+│  └───────────────────────────────┘  │
+│  [底部导航栏]                       │
+└─────────────────────────────────────┘
+```
+
+### 相关文档
+
+- [Container 架构](./01-Container-Architecture.md) - 了解 iframe/Wujie 双模式
diff --git a/docs/white-book/11-DApp-Guide/02-Connectivity/01-Bio-SDK-Communication.md b/docs/white-book/11-DApp-Guide/02-Connectivity/01-Bio-SDK-Communication.md
new file mode 100644
index 000000000..c2f16816a
--- /dev/null
+++ b/docs/white-book/11-DApp-Guide/02-Connectivity/01-Bio-SDK-Communication.md
@@ -0,0 +1,246 @@
+# 01. Bio-SDK 通讯机制 (Communication)
+
+> Code: `src/services/miniapp-runtime/bio-bridge/`, `packages/bio-sdk/`
+
+本文档描述 Miniapp 与 KeyApp Host 之间的通讯机制，以及如何在不同容器类型下保持一致的通讯行为。
+
+## 架构概览
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Miniapp (iframe/Wujie)                                      │
+│  ┌───────────────────────────────────────────────────────┐  │
+│  │ bio-sdk                                               │  │
+│  │  - window.bio.wallet.requestAccounts()                │  │
+│  │  - window.bio.kv.get(key)                             │  │
+│  └───────────────────────────────────────────────────────┘  │
+│                           │                                  │
+│                    postMessage                               │
+│                           ▼                                  │
+└─────────────────────────────────────────────────────────────┘
+                            │
+                    window.postMessage
+                            │
+                            ▼
+┌─────────────────────────────────────────────────────────────┐
+│ KeyApp Host                                                 │
+│  ┌───────────────────────────────────────────────────────┐  │
+│  │ PostMessageBridge                                     │  │
+│  │  - 监听 iframe 的 message 事件                        │  │
+│  │  - 路由到对应的 Handler                               │  │
+│  └───────────────────────────────────────────────────────┘  │
+│                           │                                  │
+│                           ▼                                  │
+│  ┌───────────────────────────────────────────────────────┐  │
+│  │ BioProvider                                           │  │
+│  │  - WalletHandler: 钱包操作                            │  │
+│  │  - KVHandler: 键值存储                                │  │
+│  │  - ...                                                │  │
+│  └───────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 消息协议
+
+基于 JSON-RPC 2.0：
+
+```typescript
+// 请求
+interface BioRequest {
+  id: string; // UUID v4
+  jsonrpc: '2.0';
+  method: string; // e.g., 'wallet_requestAccounts'
+  params?: unknown[];
+}
+
+// 响应
+interface BioResponse {
+  id: string;
+  jsonrpc: '2.0';
+  result?: unknown;
+  error?: {
+    code: number;
+    message: string;
+    data?: unknown;
+  };
+}
+```
+
+## 容器类型与通讯
+
+### iframe 模式
+
+直接使用 iframe 的 `contentWindow` 进行通讯：
+
+```typescript
+// Host 端
+const iframe = containerHandle.element as HTMLIFrameElement;
+iframe.contentWindow?.postMessage(response, '*');
+
+// Miniapp 端
+window.parent.postMessage(request, '*');
+```
+
+### Wujie 模式
+
+Wujie 将 JS 运行在一个隐藏的 iframe 中，需要通过 `getIframe()` 获取：
+
+```typescript
+// Host 端 - 获取 Wujie 的隐藏 iframe
+const iframe = containerHandle.getIframe();
+// Wujie 创建的 iframe 的 name 属性等于 appId
+// 即: document.querySelector(`iframe[name="${appId}"]`)
+
+if (iframe) {
+  iframe.contentWindow?.postMessage(response, '*');
+}
+```
+
+**关键发现**: Wujie 的 JS 沙箱运行在同域 iframe 中，因此 `PostMessageBridge` 可以无缝复用。
+
+## Host 端实现
+
+### attachBioProviderToContainer
+
+将 BioProvider 附加到容器，统一处理两种容器类型：
+
+```typescript
+import { attachBioProviderToContainer } from '@/services/miniapp-runtime'
+
+const handle = await createContainer({ type: 'wujie', ... })
+
+attachBioProviderToContainer(handle, {
+  appId: 'my-miniapp',
+  handlers: {
+    wallet: walletHandler,
+    kv: kvHandler,
+  }
+})
+```
+
+### PostMessageBridge
+
+核心通讯桥梁：
+
+```typescript
+class PostMessageBridge {
+  constructor(
+    private iframe: HTMLIFrameElement,
+    private handlers: Record<string, Handler>,
+  ) {
+    window.addEventListener('message', this.handleMessage);
+  }
+
+  private handleMessage = (event: MessageEvent) => {
+    // 验证消息来源
+    if (event.source !== this.iframe.contentWindow) return;
+
+    const request = event.data as BioRequest;
+    const [namespace, method] = request.method.split('_');
+
+    // 路由到对应 handler
+    const handler = this.handlers[namespace];
+    if (handler) {
+      handler
+        .handle(method, request.params)
+        .then((result) => this.respond(request.id, { result }))
+        .catch((error) => this.respond(request.id, { error }));
+    }
+  };
+
+  private respond(id: string, payload: Partial<BioResponse>) {
+    this.iframe.contentWindow?.postMessage(
+      {
+        id,
+        jsonrpc: '2.0',
+        ...payload,
+      },
+      '*',
+    );
+  }
+}
+```
+
+## Miniapp 端实现 (bio-sdk)
+
+### 安装
+
+```bash
+pnpm add @bioforest/bio-sdk
+```
+
+### 使用
+
+```typescript
+import { bio } from '@bioforest/bio-sdk';
+
+// 请求钱包地址
+const accounts = await bio.wallet.requestAccounts();
+
+// 签名交易
+const txHash = await bio.wallet.sendTransaction({
+  to: '0x...',
+  value: '1000000000000000000',
+});
+
+// 键值存储
+await bio.kv.set('user-preference', { theme: 'dark' });
+const pref = await bio.kv.get('user-preference');
+```
+
+### 内部实现
+
+```typescript
+// bio-sdk 内部
+class BioSDK {
+  private pending = new Map<string, { resolve; reject }>();
+
+  constructor() {
+    window.addEventListener('message', this.handleResponse);
+  }
+
+  async request(method: string, params?: unknown[]) {
+    const id = crypto.randomUUID();
+
+    return new Promise((resolve, reject) => {
+      this.pending.set(id, { resolve, reject });
+
+      window.parent.postMessage(
+        {
+          id,
+          jsonrpc: '2.0',
+          method,
+          params,
+        },
+        '*',
+      );
+    });
+  }
+
+  private handleResponse = (event: MessageEvent) => {
+    const { id, result, error } = event.data;
+    const pending = this.pending.get(id);
+
+    if (pending) {
+      this.pending.delete(id);
+      if (error) {
+        pending.reject(new Error(error.message));
+      } else {
+        pending.resolve(result);
+      }
+    }
+  };
+}
+```
+
+## 安全考虑
+
+1. **来源验证**: Host 端应验证 `event.source` 确保消息来自预期的 iframe
+2. **权限控制**: 基于 Manifest 中声明的 `permissions` 进行访问控制
+3. **沙箱隔离**: Wujie 提供 JS 沙箱，防止恶意代码访问主文档
+
+## 相关文档
+
+- [Container 架构](../01-Runtime-Env/01-Container-Architecture.md)
+- [BioBridge Protocol](./README.md)
+- [Miniapp Manifest](../01-Runtime-Env/02-Miniapp-Manifest.md) - permissions 字段
diff --git a/docs/white-book/11-DApp-Guide/README.md b/docs/white-book/11-DApp-Guide/README.md
index ace830a39..d1f1ea274 100644
--- a/docs/white-book/11-DApp-Guide/README.md
+++ b/docs/white-book/11-DApp-Guide/README.md
@@ -6,8 +6,10 @@
 
 ## 📖 目录
 
-*   [00-Overview.md](./00-Overview.md) - 生态架构
-*   **01-Runtime-Env (运行环境)**
-    *   [02-Miniapp-Manifest.md](./01-Runtime-Env/02-Miniapp-Manifest.md) - 清单文件规范
-*   **02-Connectivity (连接性)**
-    *   [README.md](./02-Connectivity/README.md) - 连接性概述
+- [00-Overview.md](./00-Overview.md) - 生态架构
+- **01-Runtime-Env (运行环境)**
+  - [01-Container-Architecture.md](./01-Runtime-Env/01-Container-Architecture.md) - Container 抽象层 (iframe/Wujie 双模式)
+  - [02-Miniapp-Manifest.md](./01-Runtime-Env/02-Miniapp-Manifest.md) - 清单文件规范 & 样式规范
+- **02-Connectivity (连接性)**
+  - [README.md](./02-Connectivity/README.md) - 连接性概述
+  - [01-Bio-SDK-Communication.md](./02-Connectivity/01-Bio-SDK-Communication.md) - Bio-SDK 通讯机制
diff --git a/miniapps/forge/src/App.tsx b/miniapps/forge/src/App.tsx
index 271cc9c16..80917bbf0 100644
--- a/miniapps/forge/src/App.tsx
+++ b/miniapps/forge/src/App.tsx
@@ -3,29 +3,40 @@
  * 支持充值 (Recharge) 和赎回 (Redemption) 双模式
  */
 
-import { useState, useCallback, useEffect, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { BioAccount } from '@biochain/bio-sdk'
-import { normalizeChainId } from '@biochain/bio-sdk'
-import { getChainType, getEvmChainIdFromApi } from '@/lib/chain'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 { ModeTabs } from './components/ModeTabs'
-import { RedemptionForm } from './components/RedemptionForm'
-import { motion, AnimatePresence } from 'framer-motion'
-import { cn } from '@/lib/utils'
-import { Coins, Leaf, DollarSign, X, ChevronLeft, ArrowDown, Check, Loader2, AlertCircle, ArrowLeftRight } from 'lucide-react'
-
-import { useRechargeConfig, useForge, type ForgeOption } from '@/hooks'
-import type { BridgeMode } from '@/api/types'
-
-type RechargeStep = 'connect' | 'swap' | 'confirm' | 'processing' | 'success'
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { BioAccount } from '@biochain/bio-sdk';
+import { normalizeChainId } from '@biochain/bio-sdk';
+import { getChainType, getEvmChainIdFromApi } from '@/lib/chain';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 { ModeTabs } from './components/ModeTabs';
+import { RedemptionForm } from './components/RedemptionForm';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import {
+  Coins,
+  Leaf,
+  DollarSign,
+  X,
+  ChevronLeft,
+  ArrowDown,
+  Check,
+  Loader2,
+  AlertCircle,
+  ArrowLeftRight,
+} from 'lucide-react';
+
+import { useRechargeConfig, useForge, type ForgeOption } from '@/hooks';
+import type { BridgeMode } from '@/api/types';
+
+type RechargeStep = 'connect' | 'swap' | 'confirm' | 'processing' | 'success';
 
 const TOKEN_COLORS: Record<string, string> = {
   ETH: 'bg-indigo-600',
@@ -34,10 +45,10 @@ const TOKEN_COLORS: Record<string, string> = {
   BFM: 'bg-emerald-600',
   USDT: 'bg-teal-600',
   BFC: 'bg-blue-600',
-}
+};
 
 function TokenAvatar({ symbol, size = 'sm' }: { symbol: string; size?: 'sm' | 'md' }) {
-  const iconSize = size === 'md' ? 'size-5' : 'size-4'
+  const iconSize = size === 'md' ? 'size-5' : 'size-4';
   const icons: Record<string, React.ReactNode> = {
     ETH: <Coins className={iconSize} />,
     BSC: <Coins className={iconSize} />,
@@ -45,168 +56,174 @@ function TokenAvatar({ symbol, size = 'sm' }: { symbol: string; size?: 'sm' | 'm
     BFM: <Leaf className={iconSize} />,
     BFC: <Leaf className={iconSize} />,
     USDT: <DollarSign className={iconSize} />,
-  }
+  };
   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={iconSize} />}
       </AvatarFallback>
     </Avatar>
-  )
+  );
 }
 
 export default function App() {
-  const { t } = useTranslation()
-  
+  const { t } = useTranslation();
+
   // Bridge mode: recharge or redemption
-  const [mode, setMode] = useState<BridgeMode>('recharge')
-  
+  const [mode, setMode] = useState<BridgeMode>('recharge');
+
   // Recharge state
-  const [rechargeStep, setRechargeStep] = useState<RechargeStep>('connect')
-  const [externalAccount, setExternalAccount] = useState<BioAccount | null>(null)
-  const [internalAccount, setInternalAccount] = useState<BioAccount | null>(null)
-  const [selectedOption, setSelectedOption] = useState<ForgeOption | null>(null)
-  const [amount, setAmount] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [pickerOpen, setPickerOpen] = useState(false)
+  const [rechargeStep, setRechargeStep] = useState<RechargeStep>('connect');
+  const [externalAccount, setExternalAccount] = useState<BioAccount | null>(null);
+  const [internalAccount, setInternalAccount] = useState<BioAccount | null>(null);
+  const [selectedOption, setSelectedOption] = useState<ForgeOption | null>(null);
+  const [amount, setAmount] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
 
   // Fetch recharge config from backend
-  const { config, forgeOptions, isLoading: configLoading, error: configError } = useRechargeConfig()
-  
+  const { config, forgeOptions, isLoading: configLoading, error: configError } = useRechargeConfig();
+
   // Forge hook for recharge
-  const forgeHook = useForge()
+  const forgeHook = useForge();
 
   // Helper to get chain name from translations
-  const getChainName = useCallback((chain: string) => {
-    return t(`chain.${chain}`, { defaultValue: chain })
-  }, [t])
+  const getChainName = useCallback(
+    (chain: string) => {
+      return t(`chain.${chain}`, { defaultValue: chain });
+    },
+    [t],
+  );
 
   // Close splash screen
   useEffect(() => {
-    window.bio?.request({ method: 'bio_closeSplashScreen' })
-  }, [])
+    window.bio?.request({ method: 'bio_closeSplashScreen' });
+  }, []);
 
   // Auto-select first option when config loads
   useEffect(() => {
     if (forgeOptions.length > 0 && !selectedOption) {
-      setSelectedOption(forgeOptions[0])
+      setSelectedOption(forgeOptions[0]);
     }
-  }, [forgeOptions, selectedOption])
+  }, [forgeOptions, selectedOption]);
 
   // Watch forge status
   useEffect(() => {
     if (forgeHook.step === 'success') {
-      setRechargeStep('success')
+      setRechargeStep('success');
     } else if (forgeHook.step === 'error') {
-      setError(forgeHook.error)
-      setRechargeStep('confirm')
+      setError(forgeHook.error);
+      setRechargeStep('confirm');
     } else if (forgeHook.step !== 'idle') {
-      setRechargeStep('processing')
+      setRechargeStep('processing');
     }
-  }, [forgeHook.step, forgeHook.error])
+  }, [forgeHook.step, forgeHook.error]);
 
   // Reset state when mode changes
-  const handleModeChange = useCallback((newMode: BridgeMode) => {
-    setMode(newMode)
-    setError(null)
-    if (newMode === 'recharge') {
-      setRechargeStep('connect')
-      setAmount('')
-      forgeHook.reset()
-    }
-  }, [forgeHook])
+  const handleModeChange = useCallback(
+    (newMode: BridgeMode) => {
+      setMode(newMode);
+      setError(null);
+      if (newMode === 'recharge') {
+        setRechargeStep('connect');
+        setAmount('');
+        forgeHook.reset();
+      }
+    },
+    [forgeHook],
+  );
 
   const handleConnect = useCallback(async () => {
     if (!window.bio) {
-      setError('Bio SDK not initialized')
-      return
+      setError('Bio SDK not initialized');
+      return;
     }
     if (!selectedOption) {
-      setError('Please select an option')
-      return
+      setError('Please select an option');
+      return;
     }
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
-      const externalChain = selectedOption.externalChain
-      const chainType = getChainType(externalChain)
+      const externalChain = selectedOption.externalChain;
+      const chainType = getChainType(externalChain);
 
-      let extAcc: BioAccount
+      let extAcc: BioAccount;
 
       if (chainType === 'evm') {
         if (!window.ethereum) {
-          throw new Error('Ethereum provider not available')
+          throw new Error('Ethereum provider not available');
         }
-        const evmChainId = getEvmChainIdFromApi(externalChain)
+        const evmChainId = getEvmChainIdFromApi(externalChain);
         if (evmChainId) {
           await window.ethereum.request({
             method: 'wallet_switchEthereumChain',
             params: [{ chainId: evmChainId }],
-          })
+          });
         }
         const accounts = await window.ethereum.request<string[]>({
           method: 'eth_requestAccounts',
-        })
+        });
         if (!accounts || accounts.length === 0) {
-          throw new Error('No accounts returned')
+          throw new Error('No accounts returned');
         }
         extAcc = {
           address: accounts[0],
           chain: normalizeChainId(externalChain),
           publicKey: '',
-        }
+        };
       } else if (chainType === 'tron') {
         if (!window.tronLink) {
-          throw new Error('TronLink provider not available')
+          throw new Error('TronLink provider not available');
         }
         const result = await window.tronLink.request<{ code: number; message: string; data: { base58: string } }>({
           method: 'tron_requestAccounts',
-        })
+        });
         if (!result || result.code !== 200) {
-          throw new Error('TRON connection failed')
+          throw new Error('TRON connection failed');
         }
         extAcc = {
           address: result.data.base58,
           chain: 'tron',
           publicKey: '',
-        }
+        };
       } else {
         extAcc = await window.bio.request<BioAccount>({
           method: 'bio_selectAccount',
           params: [{ chain: normalizeChainId(externalChain) }],
-        })
+        });
       }
-      setExternalAccount(extAcc)
+      setExternalAccount(extAcc);
 
       const intAcc = await window.bio.request<BioAccount>({
         method: 'bio_selectAccount',
         params: [{ chain: selectedOption.internalChain }],
-      })
-      setInternalAccount(intAcc)
+      });
+      setInternalAccount(intAcc);
 
-      setRechargeStep('swap')
+      setRechargeStep('swap');
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Connection failed')
+      setError(err instanceof Error ? err.message : 'Connection failed');
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [selectedOption])
+  }, [selectedOption]);
 
   const handlePreview = () => {
     if (!amount || parseFloat(amount) <= 0) {
-      setError(t('error.invalidAmount'))
-      return
+      setError(t('error.invalidAmount'));
+      return;
     }
-    setError(null)
-    setRechargeStep('confirm')
-  }
+    setError(null);
+    setRechargeStep('confirm');
+  };
 
   const handleConfirm = useCallback(async () => {
-    if (!externalAccount || !internalAccount || !selectedOption) return
-    
-    setError(null)
-    setRechargeStep('processing')
+    if (!externalAccount || !internalAccount || !selectedOption) return;
+
+    setError(null);
+    setRechargeStep('processing');
 
     await forgeHook.forge({
       externalChain: selectedOption.externalChain,
@@ -217,72 +234,75 @@ export default function App() {
       internalChain: selectedOption.internalChain,
       internalAsset: selectedOption.internalAsset,
       internalAccount,
-    })
-  }, [externalAccount, internalAccount, selectedOption, amount, forgeHook])
+    });
+  }, [externalAccount, internalAccount, selectedOption, amount, forgeHook]);
 
   const handleReset = useCallback(() => {
-    setRechargeStep('swap')
-    setAmount('')
-    setError(null)
-    forgeHook.reset()
-  }, [forgeHook])
+    setRechargeStep('swap');
+    setAmount('');
+    setError(null);
+    forgeHook.reset();
+  }, [forgeHook]);
 
   // Group options by external chain for picker
   const groupedOptions = useMemo(() => {
-    const groups: Record<string, ForgeOption[]> = {}
+    const groups: Record<string, ForgeOption[]> = {};
     for (const opt of forgeOptions) {
-      const key = opt.externalChain
-      if (!groups[key]) groups[key] = []
-      groups[key].push(opt)
+      const key = opt.externalChain;
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(opt);
     }
-    return groups
-  }, [forgeOptions])
+    return groups;
+  }, [forgeOptions]);
 
   const handleSelectOption = (option: ForgeOption) => {
-    setSelectedOption(option)
-    setPickerOpen(false)
-  }
-
-  const handleSelectExternalChain = useCallback((externalChain: string) => {
-    const options = groupedOptions[externalChain]
-    const first = options?.[0]
-    if (first) {
-      setSelectedOption(first)
-    }
-  }, [groupedOptions])
+    setSelectedOption(option);
+    setPickerOpen(false);
+  };
+
+  const handleSelectExternalChain = useCallback(
+    (externalChain: string) => {
+      const options = groupedOptions[externalChain];
+      const first = options?.[0];
+      if (first) {
+        setSelectedOption(first);
+      }
+    },
+    [groupedOptions],
+  );
 
   // Check if redemption is available
   const hasRedemptionOptions = useMemo(() => {
-    if (!config) return false
+    if (!config) return false;
     for (const chain of Object.values(config)) {
       for (const item of Object.values(chain)) {
         if (item.enable && item.redemption?.enable) {
-          return true
+          return true;
         }
       }
     }
-    return false
-  }, [config])
+    return false;
+  }, [config]);
 
   return (
-    <div className="relative min-h-screen w-full bg-background text-foreground">
+    <div className="bg-background text-foreground relative min-h-full w-full">
       <BackgroundBeams className="opacity-30" />
-      
-      <div className="relative z-10 w-full max-w-md mx-auto min-h-screen flex flex-col">
+
+      <div className="relative z-10 mx-auto flex min-h-full w-full max-w-md 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">
-            {(rechargeStep === 'confirm' && mode === 'recharge') && (
+        <header className="bg-background/80 border-border sticky top-0 z-20 border-b backdrop-blur-md">
+          <div className="flex h-14 items-center px-4">
+            {rechargeStep === 'confirm' && mode === 'recharge' && (
               <Button variant="ghost" size="icon-sm" onClick={() => setRechargeStep('swap')}>
                 <ChevronLeft className="size-5" />
               </Button>
             )}
-            <h1 className="flex-1 text-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+            <h1 className="flex-1 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-center font-bold text-transparent">
               {t('app.title')}
             </h1>
             <div className="w-7" />
           </div>
-          
+
           {/* Mode Tabs - Only show if redemption is available */}
           {hasRedemptionOptions && !configLoading && (
             <div className="px-4 pb-3">
@@ -297,18 +317,18 @@ export default function App() {
         </header>
 
         {/* Content */}
-        <main className="flex-1 flex flex-col p-4">
+        <main className="flex flex-1 flex-col p-4">
           {/* Loading config */}
           {configLoading && (
-            <div className="flex-1 flex items-center justify-center">
-              <Loader2 className="size-8 animate-spin text-muted-foreground" />
+            <div className="flex flex-1 items-center justify-center">
+              <Loader2 className="text-muted-foreground size-8 animate-spin" />
             </div>
           )}
 
           {/* Config error */}
           {configError && (
-            <Card className="mb-4 border-destructive/50 bg-destructive/10">
-              <CardContent className="py-3 flex items-center gap-2 text-destructive text-sm">
+            <Card className="border-destructive/50 bg-destructive/10 mb-4">
+              <CardContent className="text-destructive flex items-center gap-2 py-3 text-sm">
                 <AlertCircle className="size-4" />
                 {configError}
               </CardContent>
@@ -316,26 +336,16 @@ export default function App() {
           )}
 
           {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>
+            <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+              <Card className="border-destructive/50 bg-destructive/10 mb-4">
+                <CardContent className="text-destructive py-3 text-sm">{error}</CardContent>
               </Card>
             </motion.div>
           )}
 
           {/* Redemption Mode */}
           {mode === 'redemption' && config && !configLoading && (
-            <RedemptionForm
-              config={config}
-              onSuccess={(orderId) => {
-                
-              }}
-            />
+            <RedemptionForm config={config} onSuccess={(orderId) => {}} />
           )}
 
           {/* Recharge Mode */}
@@ -348,18 +358,18 @@ export default function App() {
                   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"
+                  className="flex flex-1 flex-col items-center justify-center gap-8 pb-20"
                 >
                   <div className="relative">
-                    <div className="absolute inset-0 bg-blue-500/20 blur-3xl rounded-full" />
+                    <div className="absolute inset-0 rounded-full bg-blue-500/20 blur-3xl" />
                     <Avatar className="relative size-28 border-2 border-blue-500/30">
-                      <AvatarFallback className="bg-gradient-to-b from-muted to-muted/50">
+                      <AvatarFallback className="from-muted to-muted/50 bg-gradient-to-b">
                         <ArrowLeftRight className="size-14 text-blue-500" strokeWidth={1.5} />
                       </AvatarFallback>
                     </Avatar>
                   </div>
-                  
-                  <div className="text-center space-y-2">
+
+                  <div className="space-y-2 text-center">
                     <h2 className="text-2xl font-bold">{t('app.subtitle')}</h2>
                     <p className="text-muted-foreground text-sm">{t('app.description')}</p>
                   </div>
@@ -374,7 +384,7 @@ export default function App() {
                           variant={selectedOption?.externalChain === chain ? 'secondary' : 'outline'}
                           className={cn(
                             'cursor-pointer select-none',
-                            selectedOption?.externalChain === chain && 'ring-2 ring-primary/40'
+                            selectedOption?.externalChain === chain && 'ring-primary/40 ring-2',
                           )}
                         >
                           <button type="button" onClick={() => handleSelectExternalChain(chain)}>
@@ -384,15 +394,15 @@ export default function App() {
                       ))}
                     </div>
                   )}
-                  
-                  <Button 
+
+                  <Button
                     data-testid="connect-button"
-                    size="lg" 
-                    className="w-full max-w-xs h-12"
-                    onClick={handleConnect} 
+                    size="lg"
+                    className="h-12 w-full max-w-xs"
+                    onClick={handleConnect}
                     disabled={loading || forgeOptions.length === 0 || !selectedOption}
                   >
-                    {loading && <Loader2 className="size-4 animate-spin mr-2" />}
+                    {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
                     {loading ? t('connect.loading') : t('connect.button')}
                   </Button>
                 </motion.div>
@@ -405,16 +415,18 @@ export default function App() {
                   initial={{ opacity: 0, x: 20 }}
                   animate={{ opacity: 1, x: 0 }}
                   exit={{ opacity: 0, x: -20 }}
-                  className="flex-1 flex flex-col gap-3"
+                  className="flex flex-1 flex-col gap-3"
                 >
                   {/* From Card (External Chain) */}
                   <Card>
                     <CardHeader className="pb-2">
-                      <CardDescription>{t('forge.pay')} ({getChainName(selectedOption.externalChain)})</CardDescription>
+                      <CardDescription>
+                        {t('forge.pay')} ({getChainName(selectedOption.externalChain)})
+                      </CardDescription>
                     </CardHeader>
                     <CardContent className="space-y-3">
                       <div className="flex items-center gap-3">
-                        <div className="shrink-0 flex items-center gap-2 h-10 px-3 border rounded-md bg-muted/50">
+                        <div className="bg-muted/50 flex h-10 shrink-0 items-center gap-2 rounded-md border px-3">
                           <TokenAvatar symbol={selectedOption.externalAsset} size="sm" />
                           <span className="font-semibold">{selectedOption.externalAsset}</span>
                         </div>
@@ -424,18 +436,18 @@ export default function App() {
                           value={amount}
                           onChange={(e) => setAmount(e.target.value)}
                           placeholder="0.00"
-                          className="text-right text-2xl font-bold h-10 border-0 focus-visible:ring-0"
+                          className="h-10 border-0 text-right text-2xl font-bold focus-visible:ring-0"
                         />
                       </div>
-                      <div className="text-xs text-muted-foreground font-mono break-all">
+                      <div className="text-muted-foreground font-mono text-xs break-all">
                         {externalAccount?.address}
                       </div>
                     </CardContent>
                   </Card>
 
                   {/* Arrow */}
-                  <div className="flex justify-center -my-1.5 relative z-10">
-                    <Avatar className="size-10 border border-blue-500/30 bg-background">
+                  <div className="relative z-10 -my-1.5 flex justify-center">
+                    <Avatar className="bg-background size-10 border border-blue-500/30">
                       <AvatarFallback className="bg-blue-500/10">
                         <ArrowDown className="size-4 text-blue-500" />
                       </AvatarFallback>
@@ -445,19 +457,21 @@ export default function App() {
                   {/* To Card (Internal Chain) */}
                   <Card>
                     <CardHeader className="pb-2">
-                      <CardDescription>{t('forge.receive')} ({getChainName(selectedOption.internalChain)})</CardDescription>
+                      <CardDescription>
+                        {t('forge.receive')} ({getChainName(selectedOption.internalChain)})
+                      </CardDescription>
                     </CardHeader>
                     <CardContent className="space-y-3">
                       <div className="flex items-center gap-3">
-                        <div className="shrink-0 flex items-center gap-2 h-10 px-3 border rounded-md bg-muted/50">
+                        <div className="bg-muted/50 flex h-10 shrink-0 items-center gap-2 rounded-md border px-3">
                           <TokenAvatar symbol={selectedOption.internalAsset} size="sm" />
                           <span className="font-semibold">{selectedOption.internalAsset}</span>
                         </div>
-                        <div className="flex-1 text-right text-2xl font-bold text-muted-foreground">
+                        <div className="text-muted-foreground flex-1 text-right text-2xl font-bold">
                           {amount || '0.00'}
                         </div>
                       </div>
-                      <div className="text-xs text-muted-foreground font-mono break-all">
+                      <div className="text-muted-foreground font-mono text-xs break-all">
                         {internalAccount?.address}
                       </div>
                     </CardContent>
@@ -466,14 +480,14 @@ export default function App() {
                   {/* Rate Info - 1:1 for recharge */}
                   {amount && parseFloat(amount) > 0 && (
                     <Card className="border-blue-500/20 bg-blue-500/5">
-                      <CardContent className="py-3 space-y-2 text-sm">
+                      <CardContent className="space-y-2 py-3 text-sm">
                         <div className="flex justify-between">
                           <span className="text-muted-foreground">{t('forge.ratio')}</span>
                           <span>1:1</span>
                         </div>
                         <div className="flex justify-between">
                           <span className="text-muted-foreground">{t('forge.depositAddress')}</span>
-                          <span className="font-mono text-xs truncate max-w-40">
+                          <span className="max-w-40 truncate font-mono text-xs">
                             {selectedOption.externalInfo.depositAddress.slice(0, 10)}...
                           </span>
                         </div>
@@ -482,9 +496,9 @@ export default function App() {
                   )}
 
                   <div className="mt-auto pt-4">
-                    <Button 
+                    <Button
                       data-testid="preview-button"
-                      className="w-full h-12" 
+                      className="h-12 w-full"
                       onClick={handlePreview}
                       disabled={!amount || parseFloat(amount) <= 0}
                     >
@@ -501,17 +515,17 @@ export default function App() {
                   initial={{ opacity: 0, x: 20 }}
                   animate={{ opacity: 1, x: 0 }}
                   exit={{ opacity: 0, x: -20 }}
-                  className="flex-1 flex flex-col gap-4"
+                  className="flex flex-1 flex-col gap-4"
                 >
                   <Card>
-                    <CardContent className="py-6 text-center space-y-4">
+                    <CardContent className="space-y-4 py-6 text-center">
                       <div>
                         <CardDescription className="mb-1">
                           {t('forge.pay')} ({getChainName(selectedOption.externalChain)})
                         </CardDescription>
-                        <div className="text-3xl font-bold flex items-center justify-center gap-2">
+                        <div className="flex items-center justify-center gap-2 text-3xl font-bold">
                           <TokenAvatar symbol={selectedOption.externalAsset} size="sm" />
-                          {amount} <span className="text-lg text-muted-foreground">{selectedOption.externalAsset}</span>
+                          {amount} <span className="text-muted-foreground text-lg">{selectedOption.externalAsset}</span>
                         </div>
                       </div>
                       <div className="flex justify-center">
@@ -525,7 +539,7 @@ export default function App() {
                         <CardDescription className="mb-1">
                           {t('forge.receive')} ({getChainName(selectedOption.internalChain)})
                         </CardDescription>
-                        <div className="text-3xl font-bold text-blue-500 flex items-center justify-center gap-2">
+                        <div className="flex items-center justify-center gap-2 text-3xl font-bold text-blue-500">
                           <TokenAvatar symbol={selectedOption.internalAsset} size="sm" />
                           {amount} <span className="text-lg text-blue-500/60">{selectedOption.internalAsset}</span>
                         </div>
@@ -534,7 +548,7 @@ export default function App() {
                   </Card>
 
                   <Card>
-                    <CardContent className="py-4 space-y-3 text-sm">
+                    <CardContent className="space-y-3 py-4 text-sm">
                       <div className="flex justify-between">
                         <span className="text-muted-foreground">{t('forge.ratio')}</span>
                         <span>1:1</span>
@@ -551,7 +565,7 @@ export default function App() {
                       <Separator />
                       <div className="flex justify-between">
                         <span className="text-muted-foreground">{t('forge.depositAddress')}</span>
-                        <span className="font-mono text-xs truncate max-w-32">
+                        <span className="max-w-32 truncate font-mono text-xs">
                           {selectedOption.externalInfo.depositAddress.slice(0, 10)}...
                         </span>
                       </div>
@@ -559,9 +573,9 @@ export default function App() {
                   </Card>
 
                   <div className="mt-auto pt-4">
-                    <Button 
+                    <Button
                       data-testid="confirm-button"
-                      className="w-full h-12" 
+                      className="h-12 w-full"
                       onClick={handleConfirm}
                       disabled={loading}
                     >
@@ -577,13 +591,13 @@ export default function App() {
                   key="processing"
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
-                  className="flex-1 flex flex-col items-center justify-center gap-6 pb-20"
+                  className="flex flex-1 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-blue-500 rounded-full animate-spin" />
+                    <div className="border-muted absolute inset-0 rounded-full border-4" />
+                    <div className="absolute inset-0 animate-spin rounded-full border-4 border-t-blue-500" />
                   </div>
-                  <div className="text-center space-y-2">
+                  <div className="space-y-2 text-center">
                     <h2 className="text-xl font-bold">
                       {forgeHook.step === 'signing_external' && t('processing.signingExternal')}
                       {forgeHook.step === 'signing_internal' && t('processing.signingInternal')}
@@ -601,20 +615,20 @@ export default function App() {
                   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"
+                  className="flex flex-1 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">
+                  <div className="space-y-2 text-center">
                     <h2 className="text-xl font-bold">{t('success.title')}</h2>
                     <p className="text-2xl font-bold text-emerald-400">
                       {amount} {selectedOption.internalAsset}
                     </p>
                     {forgeHook.orderId && (
-                      <p className="text-xs text-muted-foreground font-mono">
+                      <p className="text-muted-foreground font-mono text-xs">
                         {t('success.orderId')}: {forgeHook.orderId.slice(0, 16)}...
                       </p>
                     )}
@@ -630,36 +644,31 @@ export default function App() {
           {/* Token Picker Modal */}
           {pickerOpen && (
             <div className="fixed inset-0 z-50">
-              <div 
-                className="absolute inset-0 bg-black/60 backdrop-blur-sm" 
-                onClick={() => setPickerOpen(false)} 
-              />
-              <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">
+              <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setPickerOpen(false)} />
+              <div className="bg-card border-border animate-in slide-in-from-bottom absolute right-0 bottom-0 left-0 rounded-t-2xl border-t">
+                <div className="border-border flex items-center justify-between border-b p-4">
                   <CardTitle>{t('picker.title')}</CardTitle>
                   <Button variant="ghost" size="icon-sm" onClick={() => setPickerOpen(false)}>
                     <X className="size-5" />
                   </Button>
                 </div>
-                <div className="p-4 space-y-4 max-h-96 overflow-y-auto">
+                <div className="max-h-96 space-y-4 overflow-y-auto p-4">
                   {Object.entries(groupedOptions).map(([chain, options]) => (
                     <div key={chain}>
-                      <h3 className="text-sm font-medium text-muted-foreground mb-2">
-                        {getChainName(chain)}
-                      </h3>
+                      <h3 className="text-muted-foreground mb-2 text-sm font-medium">{getChainName(chain)}</h3>
                       <div className="space-y-2">
                         {options.map((option) => (
-                          <Card 
+                          <Card
                             key={`${option.externalChain}-${option.externalAsset}-${option.internalAsset}`}
                             className={cn(
-                              "cursor-pointer transition-colors hover:bg-accent",
+                              'hover:bg-accent cursor-pointer transition-colors',
                               selectedOption?.externalAsset === option.externalAsset &&
-                              selectedOption?.externalChain === option.externalChain &&
-                              "ring-2 ring-primary"
+                                selectedOption?.externalChain === option.externalChain &&
+                                'ring-primary ring-2',
                             )}
                             onClick={() => handleSelectOption(option)}
                           >
-                            <CardContent className="py-3 flex items-center gap-3">
+                            <CardContent className="flex items-center gap-3 py-3">
                               <TokenAvatar symbol={option.externalAsset} size="md" />
                               <div className="flex-1">
                                 <CardTitle className="text-base">
@@ -670,9 +679,9 @@ export default function App() {
                                 </CardDescription>
                               </div>
                               {selectedOption?.externalAsset === option.externalAsset &&
-                               selectedOption?.externalChain === option.externalChain && (
-                                <Badge>{t('picker.selected')}</Badge>
-                              )}
+                                selectedOption?.externalChain === option.externalChain && (
+                                  <Badge>{t('picker.selected')}</Badge>
+                                )}
                             </CardContent>
                           </Card>
                         ))}
@@ -686,5 +695,5 @@ export default function App() {
         </main>
       </div>
     </div>
-  )
+  );
 }
diff --git a/miniapps/forge/src/index.css b/miniapps/forge/src/index.css
index 6c9b0bb70..3920989d5 100644
--- a/miniapps/forge/src/index.css
+++ b/miniapps/forge/src/index.css
@@ -1,5 +1,5 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -124,7 +124,10 @@
 
 /* 移动端优化 */
 html,
-body {
+body,
+#root {
+  height: 100%;
+  width: 100%;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
diff --git a/miniapps/teleport/src/App.tsx b/miniapps/teleport/src/App.tsx
index eecdb65e3..c471833a6 100644
--- a/miniapps/teleport/src/App.tsx
+++ b/miniapps/teleport/src/App.tsx
@@ -1,17 +1,29 @@
-import { useState, useCallback, useEffect, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { BioAccount, BioSignedTransaction } from '@biochain/bio-sdk'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardTitle, CardDescription } 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, AlertCircle, RefreshCw } from 'lucide-react'
-import './i18n'
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { BioAccount, BioSignedTransaction } from '@biochain/bio-sdk';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardTitle, CardDescription } 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,
+  AlertCircle,
+  RefreshCw,
+} from 'lucide-react';
+import './i18n';
 import {
   useTransmitAssetTypeList,
   useTransmit,
@@ -22,9 +34,17 @@ import {
   type InternalChainName,
   type TransferAssetTransaction,
   SWAP_ORDER_STATE_ID,
-} from './api'
-
-type Step = 'connect' | 'select-asset' | 'input-amount' | 'select-target' | 'confirm' | 'processing' | 'success' | 'error'
+} from './api';
+
+type Step =
+  | 'connect'
+  | 'select-asset'
+  | 'input-amount'
+  | 'select-target'
+  | 'confirm'
+  | 'processing'
+  | 'success'
+  | 'error';
 
 const CHAIN_COLORS: Record<string, string> = {
   ETH: 'bg-indigo-600',
@@ -33,176 +53,180 @@ const CHAIN_COLORS: Record<string, string> = {
   BFMCHAIN: 'bg-emerald-600',
   ETHMETA: 'bg-purple-600',
   PMCHAIN: 'bg-cyan-600',
-}
+};
 
 export default function App() {
-  const { t } = useTranslation()
-  const [step, setStep] = useState<Step>('connect')
-  const [sourceAccount, setSourceAccount] = useState<BioAccount | null>(null)
-  const [targetAccount, setTargetAccount] = useState<BioAccount | null>(null)
-  const [selectedAsset, setSelectedAsset] = useState<DisplayAsset | null>(null)
-  const [amount, setAmount] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [orderId, setOrderId] = useState<string | null>(null)
+  const { t } = useTranslation();
+  const [step, setStep] = useState<Step>('connect');
+  const [sourceAccount, setSourceAccount] = useState<BioAccount | null>(null);
+  const [targetAccount, setTargetAccount] = useState<BioAccount | null>(null);
+  const [selectedAsset, setSelectedAsset] = useState<DisplayAsset | null>(null);
+  const [amount, setAmount] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [orderId, setOrderId] = useState<string | null>(null);
 
   // API Hooks
-  const { data: assets, isLoading: assetsLoading, error: assetsError } = useTransmitAssetTypeList()
-  const transmitMutation = useTransmit()
-  const { data: recordDetail } = useTransmitRecordDetail(orderId || '', { enabled: !!orderId })
+  const { data: assets, isLoading: assetsLoading, error: assetsError } = useTransmitAssetTypeList();
+  const transmitMutation = useTransmit();
+  const { data: recordDetail } = useTransmitRecordDetail(orderId || '', { enabled: !!orderId });
 
   // 监听订单状态变化
   useEffect(() => {
-    if (!recordDetail) return
-    
+    if (!recordDetail) return;
+
     if (recordDetail.orderState === SWAP_ORDER_STATE_ID.SUCCESS) {
-      setStep('success')
+      setStep('success');
     } else if (
       recordDetail.orderState === SWAP_ORDER_STATE_ID.FROM_TX_ON_CHAIN_FAIL ||
       recordDetail.orderState === SWAP_ORDER_STATE_ID.TO_TX_ON_CHAIN_FAIL
     ) {
-      setError(recordDetail.orderFailReason || '交易失败')
-      setStep('error')
+      setError(recordDetail.orderFailReason || '交易失败');
+      setStep('error');
     }
-  }, [recordDetail])
+  }, [recordDetail]);
 
   // 关闭启动屏
   useEffect(() => {
-    window.bio?.request({ method: 'bio_closeSplashScreen' })
-  }, [])
+    window.bio?.request({ method: 'bio_closeSplashScreen' });
+  }, []);
 
   // 过滤可用资产（根据源账户的链）
   const availableAssets = useMemo(() => {
-    if (!assets || !sourceAccount) return []
-    return assets.filter(asset => {
+    if (!assets || !sourceAccount) return [];
+    return assets.filter((asset) => {
       // 匹配链名（大小写不敏感）
-      return asset.chain.toLowerCase() === sourceAccount.chain.toLowerCase()
-    })
-  }, [assets, sourceAccount])
+      return asset.chain.toLowerCase() === sourceAccount.chain.toLowerCase();
+    });
+  }, [assets, sourceAccount]);
 
   const handleConnect = useCallback(async () => {
     if (!window.bio) {
-      setError('Bio SDK 未初始化')
-      return
+      setError('Bio SDK 未初始化');
+      return;
     }
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
       const account = await window.bio.request<BioAccount>({
         method: 'bio_selectAccount',
         params: [{}],
-      })
-      setSourceAccount(account)
-      setStep('select-asset')
+      });
+      setSourceAccount(account);
+      setStep('select-asset');
     } catch (err) {
-      setError(err instanceof Error ? err.message : '连接失败')
+      setError(err instanceof Error ? err.message : '连接失败');
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [])
+  }, []);
 
   const handleSelectAsset = async (asset: DisplayAsset) => {
-    setSelectedAsset(asset)
-    
+    setSelectedAsset(asset);
+
     // 获取该资产的余额
     if (window.bio && sourceAccount) {
       try {
         const balance = await window.bio.request<string>({
           method: 'bio_getBalance',
           params: [{ address: sourceAccount.address, chain: sourceAccount.chain }],
-        })
-        setSelectedAsset({ ...asset, balance })
+        });
+        setSelectedAsset({ ...asset, balance });
       } catch {
         // 如果获取余额失败，使用默认值
       }
     }
-    
-    setStep('input-amount')
-  }
+
+    setStep('input-amount');
+  };
 
   const handleAmountNext = () => {
     if (!amount || parseFloat(amount) <= 0) {
-      setError('请输入有效金额')
-      return
+      setError('请输入有效金额');
+      return;
     }
-    setError(null)
-    setStep('select-target')
-  }
+    setError(null);
+    setStep('select-target');
+  };
 
   const handleSelectTarget = useCallback(async () => {
-    if (!window.bio || !sourceAccount) return
-    setLoading(true)
-    setError(null)
+    if (!window.bio || !sourceAccount) return;
+    setLoading(true);
+    setError(null);
     try {
       const account = await window.bio.request<BioAccount>({
         method: 'bio_pickWallet',
-        params: [{
-          chain: selectedAsset?.targetChain,
-          exclude: sourceAccount.address,
-        }],
-      })
-      setTargetAccount(account)
-      setStep('confirm')
+        params: [
+          {
+            chain: selectedAsset?.targetChain,
+            exclude: sourceAccount.address,
+          },
+        ],
+      });
+      setTargetAccount(account);
+      setStep('confirm');
     } catch (err) {
-      setError(err instanceof Error ? err.message : '选择失败')
+      setError(err instanceof Error ? err.message : '选择失败');
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [sourceAccount, selectedAsset])
+  }, [sourceAccount, selectedAsset]);
 
   const handleConfirm = useCallback(async () => {
-    if (!window.bio || !sourceAccount || !selectedAsset || !targetAccount) return
-    setLoading(true)
-    setError(null)
-    
+    if (!window.bio || !sourceAccount || !selectedAsset || !targetAccount) return;
+    setLoading(true);
+    setError(null);
+
     try {
       // 1. 创建未签名交易（转账到 recipientAddress）
       const unsignedTx = await window.bio.request({
         method: 'bio_createTransaction',
-        params: [{
-          from: sourceAccount.address,
-          to: selectedAsset.recipientAddress,
-          amount: amount,
-          chain: sourceAccount.chain,
-          asset: selectedAsset.assetType,
-        }],
-      })
+        params: [
+          {
+            from: sourceAccount.address,
+            to: selectedAsset.recipientAddress,
+            amount: amount,
+            chain: sourceAccount.chain,
+            asset: selectedAsset.assetType,
+          },
+        ],
+      });
 
       // 2. 签名交易
       const signedTx = await window.bio.request<BioSignedTransaction>({
         method: 'bio_signTransaction',
-        params: [{
-          from: sourceAccount.address,
-          chain: sourceAccount.chain,
-          unsignedTx,
-        }],
-      })
+        params: [
+          {
+            from: sourceAccount.address,
+            chain: sourceAccount.chain,
+            unsignedTx,
+          },
+        ],
+      });
 
       // 3. 构造 fromTrJson（根据链类型）
       // 注意：signTransData 需要使用 signedTx.data（RLP/Protobuf encoded raw signed tx），
       // 而非 signedTx.signature（仅包含签名数据，不是可广播的 rawTx）
-      const fromTrJson: FromTrJson = {}
-      const chainLower = sourceAccount.chain.toLowerCase()
-      const signTransData = typeof signedTx.data === 'string' 
-        ? signedTx.data 
-        : JSON.stringify(signedTx.data)
-      
+      const fromTrJson: FromTrJson = {};
+      const chainLower = sourceAccount.chain.toLowerCase();
+      const signTransData = typeof signedTx.data === 'string' ? signedTx.data : JSON.stringify(signedTx.data);
+
       if (chainLower === 'eth') {
-        fromTrJson.eth = { signTransData }
+        fromTrJson.eth = { signTransData };
       } else if (chainLower === 'bsc') {
-        fromTrJson.bsc = { signTransData }
+        fromTrJson.bsc = { signTransData };
       } else if (chainLower === 'tron') {
         // TRON 原生 TRX 转账
-        fromTrJson.tron = { signTransData }
+        fromTrJson.tron = { signTransData };
       } else if (chainLower === 'trc20') {
         // TRON TRC20 代币转账
-        fromTrJson.trc20 = { signTransData }
+        fromTrJson.trc20 = { signTransData };
       } else {
         // 内链交易（BioForest 链）
         fromTrJson.bcf = {
           chainName: sourceAccount.chain as InternalChainName,
           trJson: signedTx.data as TransferAssetTransaction,
-        }
+        };
       }
 
       // 4. 构造 toTrInfo
@@ -210,84 +234,83 @@ export default function App() {
         chainName: selectedAsset.targetChain,
         address: targetAccount.address,
         assetType: selectedAsset.targetAsset,
-      }
+      };
 
       // 5. 发起传送请求
-      setStep('processing')
+      setStep('processing');
       const result = await transmitMutation.mutateAsync({
         fromTrJson,
         toTrInfo,
-      })
+      });
 
-      setOrderId(result.orderId)
+      setOrderId(result.orderId);
       // 状态变化由 useEffect 监听 recordDetail 来处理
     } catch (err) {
-      setError(err instanceof Error ? err.message : '传送失败')
-      setStep('error')
+      setError(err instanceof Error ? err.message : '传送失败');
+      setStep('error');
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [sourceAccount, targetAccount, selectedAsset, amount, transmitMutation])
+  }, [sourceAccount, targetAccount, selectedAsset, amount, transmitMutation]);
 
   const handleReset = useCallback(() => {
-    setStep('connect')
-    setSourceAccount(null)
-    setTargetAccount(null)
-    setSelectedAsset(null)
-    setAmount('')
-    setError(null)
-    setOrderId(null)
-  }, [])
+    setStep('connect');
+    setSourceAccount(null);
+    setTargetAccount(null);
+    setSelectedAsset(null);
+    setAmount('');
+    setError(null);
+    setOrderId(null);
+  }, []);
 
   const handleBack = () => {
     const backMap: Record<Step, Step> = {
       'select-asset': 'connect',
       'input-amount': 'select-asset',
       'select-target': 'input-amount',
-      'confirm': 'select-target',
-      'connect': 'connect',
-      'processing': 'processing',
-      'success': 'success',
-      'error': 'confirm',
-    }
-    setStep(backMap[step])
-    setError(null)
-  }
+      confirm: 'select-target',
+      connect: 'connect',
+      processing: 'processing',
+      success: 'success',
+      error: 'confirm',
+    };
+    setStep(backMap[step]);
+    setError(null);
+  };
 
   // 计算预期接收金额
   const expectedReceive = useMemo(() => {
-    if (!selectedAsset || !amount) return '0'
-    const { numerator, denominator } = selectedAsset.ratio
-    const amountNum = parseFloat(amount)
-    const ratioNum = Number(numerator) / Number(denominator)
-    return (amountNum * ratioNum).toFixed(8).replace(/\.?0+$/, '')
-  }, [selectedAsset, amount])
+    if (!selectedAsset || !amount) return '0';
+    const { numerator, denominator } = selectedAsset.ratio;
+    const amountNum = parseFloat(amount);
+    const ratioNum = Number(numerator) / Number(denominator);
+    return (amountNum * ratioNum).toFixed(8).replace(/\.?0+$/, '');
+  }, [selectedAsset, amount]);
 
   return (
-    <AuroraBackground className="min-h-screen">
-      <div className="relative z-10 w-full max-w-md mx-auto min-h-screen flex flex-col">
+    <AuroraBackground className="min-h-full">
+      <div className="relative z-10 mx-auto flex min-h-full w-full max-w-md 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">
+        <header className="bg-background/80 border-border sticky top-0 z-20 border-b backdrop-blur-md">
+          <div className="flex h-14 items-center px-4">
             {!['connect', 'success', 'processing'].includes(step) ? (
               <Button variant="ghost" size="icon-sm" onClick={handleBack}>
                 <ChevronLeft className="size-5" />
               </Button>
-            ) : <div className="w-7" />}
+            ) : (
+              <div className="w-7" />
+            )}
             <h1 className="flex-1 text-center font-bold">{t('app.title')}</h1>
             <div className="w-7" />
           </div>
         </header>
 
         {/* Content */}
-        <main className="flex-1 flex flex-col p-4">
+        <main className="flex flex-1 flex-col p-4">
           {error && step !== '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 flex items-center gap-2">
+            <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+              <Card className="border-destructive/50 bg-destructive/10 mb-4">
+                <CardContent className="text-destructive flex items-center gap-2 py-3 text-sm">
                   <AlertCircle className="size-4" />
                   {error}
                 </CardContent>
@@ -303,36 +326,34 @@ export default function App() {
                 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"
+                className="flex flex-1 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" />
+                  <div className="bg-primary/30 absolute inset-0 rounded-full blur-3xl" />
                   <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">
+
+                <div className="space-y-2 text-center">
                   <h2 className="text-2xl font-bold">{t('app.subtitle')}</h2>
                   <p className="text-muted-foreground text-sm">{t('app.description')}</p>
                 </div>
-                
-                <Button 
+
+                <Button
                   data-testid="connect-button"
-                  size="lg" 
-                  className="w-full max-w-xs h-12"
-                  onClick={handleConnect} 
+                  size="lg"
+                  className="h-12 w-full max-w-xs"
+                  onClick={handleConnect}
                   disabled={loading || assetsLoading}
                 >
-                  {(loading || assetsLoading) && <Loader2 className="size-4 animate-spin mr-2" />}
+                  {(loading || assetsLoading) && <Loader2 className="mr-2 size-4 animate-spin" />}
                   {assetsLoading ? t('connect.loadingConfig') : loading ? t('connect.loading') : t('connect.button')}
                 </Button>
-                
-                {assetsError && (
-                  <p className="text-sm text-destructive">{t('connect.configError')}</p>
-                )}
+
+                {assetsError && <p className="text-destructive text-sm">{t('connect.configError')}</p>}
               </motion.div>
             )}
 
@@ -343,24 +364,33 @@ export default function App() {
                 initial={{ opacity: 0, x: 20 }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: -20 }}
-                className="flex-1 flex flex-col gap-4"
+                className="flex flex-1 flex-col gap-4"
               >
-                <WalletCard label={t('wallet.source')} address={sourceAccount?.address} name={sourceAccount?.name} chain={sourceAccount?.chain} />
-                
+                <WalletCard
+                  label={t('wallet.source')}
+                  address={sourceAccount?.address}
+                  name={sourceAccount?.name}
+                  chain={sourceAccount?.chain}
+                />
+
                 <div className="space-y-3">
                   <div className="px-1">
                     <CardDescription>{t('asset.select')}</CardDescription>
-                    <CardDescription className="text-xs text-muted-foreground/70">{t('asset.selectDesc')}</CardDescription>
+                    <CardDescription className="text-muted-foreground/70 text-xs">
+                      {t('asset.selectDesc')}
+                    </CardDescription>
                   </div>
                   {availableAssets.length === 0 ? (
                     <Card>
-                      <CardContent className="py-8 text-center text-muted-foreground">
+                      <CardContent className="text-muted-foreground py-8 text-center">
                         {t('asset.noAssets')}
                       </CardContent>
                     </Card>
                   ) : (
                     availableAssets.map((asset, i) => {
-                      const rate = (Number(asset.ratio.numerator) / Number(asset.ratio.denominator)).toFixed(4).replace(/\.?0+$/, '')
+                      const rate = (Number(asset.ratio.numerator) / Number(asset.ratio.denominator))
+                        .toFixed(4)
+                        .replace(/\.?0+$/, '');
                       return (
                         <motion.div
                           key={asset.id}
@@ -368,16 +398,20 @@ export default function App() {
                           animate={{ opacity: 1, y: 0 }}
                           transition={{ delay: i * 0.05 }}
                         >
-                          <Card 
+                          <Card
                             data-testid={`asset-card-${asset.symbol}`}
-                            className="cursor-pointer transition-colors hover:bg-accent"
+                            className="hover:bg-accent cursor-pointer transition-colors"
                             onClick={() => handleSelectAsset(asset)}
                           >
-                            <CardContent className="py-3 flex items-center gap-3">
+                            <CardContent className="flex items-center gap-3 py-3">
                               <AssetAvatar symbol={asset.symbol} chain={asset.chain} />
-                              <div className="flex-1 min-w-0">
-                                <CardTitle className="text-base">{asset.symbol} {t('common.arrow')} {asset.targetAsset}</CardTitle>
-                                <CardDescription>{t('asset.ratio', { from: asset.symbol, rate, to: asset.targetAsset })}</CardDescription>
+                              <div className="min-w-0 flex-1">
+                                <CardTitle className="text-base">
+                                  {asset.symbol} {t('common.arrow')} {asset.targetAsset}
+                                </CardTitle>
+                                <CardDescription>
+                                  {t('asset.ratio', { from: asset.symbol, rate, to: asset.targetAsset })}
+                                </CardDescription>
                               </div>
                               <div className="text-right">
                                 <div className="font-semibold">{asset.balance || '-'}</div>
@@ -386,7 +420,7 @@ export default function App() {
                             </CardContent>
                           </Card>
                         </motion.div>
-                      )
+                      );
                     })
                   )}
                 </div>
@@ -400,31 +434,38 @@ export default function App() {
                 initial={{ opacity: 0, x: 20 }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: -20 }}
-                className="flex-1 flex flex-col gap-4"
+                className="flex flex-1 flex-col gap-4"
               >
-                <WalletCard label={t('wallet.source')} address={sourceAccount?.address} name={sourceAccount?.name} chain={sourceAccount?.chain} />
+                <WalletCard
+                  label={t('wallet.source')}
+                  address={sourceAccount?.address}
+                  name={sourceAccount?.name}
+                  chain={sourceAccount?.chain}
+                />
 
                 <Card className="flex-1">
-                  <CardContent className="h-full flex flex-col items-center justify-center gap-4 py-8">
+                  <CardContent className="flex h-full flex-col items-center justify-center gap-4 py-8">
                     <AssetAvatar symbol={selectedAsset.symbol} chain={selectedAsset.chain} size="lg" />
                     <div className="text-center">
                       <CardTitle>{selectedAsset.symbol}</CardTitle>
-                      <CardDescription>{t('common.labelValue', { label: t('asset.balance'), value: selectedAsset.balance || '-' })}</CardDescription>
+                      <CardDescription>
+                        {t('common.labelValue', { label: t('asset.balance'), value: selectedAsset.balance || '-' })}
+                      </CardDescription>
                     </div>
-                    <div className="w-full max-w-xs relative">
+                    <div className="relative w-full max-w-xs">
                       <Input
                         data-testid="amount-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"
+                        className="border-primary/50 focus-visible:border-primary h-14 rounded-none border-0 border-b-2 text-center text-3xl font-bold focus-visible:ring-0"
                       />
                       {selectedAsset.balance && (
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="absolute right-0 top-1/2 -translate-y-1/2 h-7 text-xs"
+                          className="absolute top-1/2 right-0 h-7 -translate-y-1/2 text-xs"
                           onClick={() => setAmount(selectedAsset.balance.replace(/,/g, ''))}
                         >
                           MAX
@@ -432,14 +473,22 @@ export default function App() {
                       )}
                     </div>
                     {amount && (
-                      <p className="text-sm text-muted-foreground">
-                        {t('common.labelValue', { label: t('amount.expected'), value: '' })}<span className="text-foreground font-medium">{expectedReceive} {selectedAsset.targetAsset}</span>
+                      <p className="text-muted-foreground text-sm">
+                        {t('common.labelValue', { label: t('amount.expected'), value: '' })}
+                        <span className="text-foreground font-medium">
+                          {expectedReceive} {selectedAsset.targetAsset}
+                        </span>
                       </p>
                     )}
                   </CardContent>
                 </Card>
 
-                <Button data-testid="next-button" className="w-full h-12" onClick={handleAmountNext} disabled={!amount || parseFloat(amount) <= 0}>
+                <Button
+                  data-testid="next-button"
+                  className="h-12 w-full"
+                  onClick={handleAmountNext}
+                  disabled={!amount || parseFloat(amount) <= 0}
+                >
                   {t('amount.next')}
                 </Button>
               </motion.div>
@@ -452,43 +501,50 @@ export default function App() {
                 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"
+                className="flex flex-1 flex-col items-center justify-center gap-8 pb-20"
               >
                 <Card className="w-full">
                   <CardContent className="py-4 text-center">
                     <CardDescription className="mb-1">{t('target.willTransfer')}</CardDescription>
-                    <div className="text-2xl font-bold flex items-center justify-center gap-2">
-                      <AssetAvatar symbol={selectedAsset?.symbol ?? ''} chain={selectedAsset?.chain ?? 'ETH'} size="sm" />
+                    <div className="flex items-center justify-center gap-2 text-2xl font-bold">
+                      <AssetAvatar
+                        symbol={selectedAsset?.symbol ?? ''}
+                        chain={selectedAsset?.chain ?? 'ETH'}
+                        size="sm"
+                      />
                       {amount} <span className="text-muted-foreground">{selectedAsset?.symbol}</span>
                     </div>
-                    <p className="text-sm text-muted-foreground mt-2">
+                    <p className="text-muted-foreground mt-2 text-sm">
                       {t('common.arrow')} {expectedReceive} {selectedAsset?.targetAsset}
                     </p>
                   </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">
+                  <div className="bg-primary/30 absolute inset-0 animate-pulse rounded-full blur-2xl" />
+                  <Avatar className="bg-primary relative size-16">
                     <AvatarFallback className="bg-transparent">
-                      <ArrowDown className="size-8 text-primary-foreground" />
+                      <ArrowDown className="text-primary-foreground size-8" />
                     </AvatarFallback>
                   </Avatar>
                 </div>
 
-                <div className="text-center space-y-2">
-                  <p className="text-muted-foreground">{t('target.selectOn')} <Badge variant="outline">{selectedAsset?.targetChain}</Badge> {t('target.chainTarget')}</p>
+                <div className="space-y-2 text-center">
+                  <p className="text-muted-foreground">
+                    {t('target.selectOn')} <Badge variant="outline">{selectedAsset?.targetChain}</Badge>{' '}
+                    {t('target.chainTarget')}
+                  </p>
                   <p className="font-semibold">{t('wallet.target')}</p>
                 </div>
 
-                <Button 
+                <Button
                   data-testid="target-button"
-                  size="lg" 
-                  className="w-full max-w-xs h-12" 
-                  onClick={handleSelectTarget} 
+                  size="lg"
+                  className="h-12 w-full max-w-xs"
+                  onClick={handleSelectTarget}
                   disabled={loading}
                 >
-                  {loading && <Loader2 className="size-4 animate-spin mr-2" />}
+                  {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
                   {loading ? t('target.loading') : t('target.button')}
                 </Button>
               </motion.div>
@@ -501,39 +557,57 @@ export default function App() {
                 initial={{ opacity: 0, x: 20 }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: -20 }}
-                className="flex-1 flex flex-col gap-4"
+                className="flex flex-1 flex-col gap-4"
               >
                 <Card>
-                  <CardContent className="py-6 text-center space-y-4">
+                  <CardContent className="space-y-4 py-6 text-center">
                     <div>
                       <CardDescription className="mb-1">{t('confirm.send')}</CardDescription>
-                      <div className="text-3xl font-bold flex items-center justify-center gap-2">
-                        <AssetAvatar symbol={selectedAsset?.symbol ?? ''} chain={selectedAsset?.chain ?? 'ETH'} size="sm" />
-                        {amount} <span className="text-lg text-muted-foreground">{selectedAsset?.symbol}</span>
+                      <div className="flex items-center justify-center gap-2 text-3xl font-bold">
+                        <AssetAvatar
+                          symbol={selectedAsset?.symbol ?? ''}
+                          chain={selectedAsset?.chain ?? 'ETH'}
+                          size="sm"
+                        />
+                        {amount} <span className="text-muted-foreground text-lg">{selectedAsset?.symbol}</span>
                       </div>
                     </div>
                     <div className="flex justify-center">
-                      <Avatar className="size-10 border border-primary/30 bg-primary/10">
+                      <Avatar className="border-primary/30 bg-primary/10 size-10 border">
                         <AvatarFallback className="bg-transparent">
-                          <ArrowDown className="size-5 text-primary" />
+                          <ArrowDown className="text-primary size-5" />
                         </AvatarFallback>
                       </Avatar>
                     </div>
                     <div>
                       <CardDescription className="mb-1">{t('confirm.receive')}</CardDescription>
                       <div className="text-2xl font-bold text-emerald-400">
-                        {expectedReceive} <span className="text-lg text-muted-foreground">{selectedAsset?.targetAsset}</span>
+                        {expectedReceive}{' '}
+                        <span className="text-muted-foreground text-lg">{selectedAsset?.targetAsset}</span>
                       </div>
                     </div>
                     <div className="space-y-2 pt-2">
-                      <WalletCard label={t('wallet.sender')} address={sourceAccount?.address} name={sourceAccount?.name} chain={sourceAccount?.chain} compact />
-                      <WalletCard label={t('wallet.receiver')} address={targetAccount?.address} name={targetAccount?.name} chain={selectedAsset?.targetChain} compact highlight />
+                      <WalletCard
+                        label={t('wallet.sender')}
+                        address={sourceAccount?.address}
+                        name={sourceAccount?.name}
+                        chain={sourceAccount?.chain}
+                        compact
+                      />
+                      <WalletCard
+                        label={t('wallet.receiver')}
+                        address={targetAccount?.address}
+                        name={targetAccount?.name}
+                        chain={selectedAsset?.targetChain}
+                        compact
+                        highlight
+                      />
                     </div>
                   </CardContent>
                 </Card>
 
                 <Card>
-                  <CardContent className="py-4 space-y-3 text-sm">
+                  <CardContent className="space-y-3 py-4 text-sm">
                     <div className="flex justify-between">
                       <span className="text-muted-foreground">{t('confirm.sourceChain')}</span>
                       <Badge variant="outline">{selectedAsset?.chain}</Badge>
@@ -551,14 +625,21 @@ export default function App() {
                     <Separator />
                     <div className="flex justify-between">
                       <span className="text-muted-foreground">{t('confirm.fee')}</span>
-                      <Badge className="bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20">{t('confirm.free')}</Badge>
+                      <Badge className="bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20">
+                        {t('confirm.free')}
+                      </Badge>
                     </div>
                   </CardContent>
                 </Card>
 
                 <div className="mt-auto pt-4">
-                  <Button data-testid="confirm-button" className="w-full h-12" onClick={handleConfirm} disabled={loading}>
-                    {loading && <Loader2 className="size-4 animate-spin mr-2" />}
+                  <Button
+                    data-testid="confirm-button"
+                    className="h-12 w-full"
+                    onClick={handleConfirm}
+                    disabled={loading}
+                  >
+                    {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
                     {loading ? t('confirm.loading') : t('confirm.button')}
                   </Button>
                 </div>
@@ -571,26 +652,29 @@ export default function App() {
                 key="processing"
                 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"
+                className="flex flex-1 flex-col items-center justify-center gap-6 pb-20"
               >
                 <div className="relative">
-                  <div className="absolute inset-0 bg-primary/30 blur-3xl rounded-full animate-pulse" />
-                  <Avatar className="relative size-20 bg-primary/20">
+                  <div className="bg-primary/30 absolute inset-0 animate-pulse rounded-full blur-3xl" />
+                  <Avatar className="bg-primary/20 relative size-20">
                     <AvatarFallback className="bg-transparent">
-                      <RefreshCw className="size-10 text-primary animate-spin" />
+                      <RefreshCw className="text-primary size-10 animate-spin" />
                     </AvatarFallback>
                   </Avatar>
                 </div>
-                <div className="text-center space-y-2">
+                <div className="space-y-2 text-center">
                   <h2 className="text-xl font-bold">{t('processing.title')}</h2>
-                  <p className="text-sm text-muted-foreground">
-                    {recordDetail?.orderState === SWAP_ORDER_STATE_ID.FROM_TX_WAIT_ON_CHAIN && t('processing.waitingFrom')}
+                  <p className="text-muted-foreground text-sm">
+                    {recordDetail?.orderState === SWAP_ORDER_STATE_ID.FROM_TX_WAIT_ON_CHAIN &&
+                      t('processing.waitingFrom')}
                     {recordDetail?.orderState === SWAP_ORDER_STATE_ID.TO_TX_WAIT_ON_CHAIN && t('processing.waitingTo')}
                     {!recordDetail && t('processing.processing')}
                   </p>
                 </div>
                 {orderId && (
-                  <p className="text-xs text-muted-foreground">{t('common.labelValue', { label: t('processing.orderId'), value: orderId })}</p>
+                  <p className="text-muted-foreground text-xs">
+                    {t('common.labelValue', { label: t('processing.orderId'), value: orderId })}
+                  </p>
                 )}
               </motion.div>
             )}
@@ -601,17 +685,19 @@ export default function App() {
                 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"
+                className="flex flex-1 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">
+                <div className="space-y-2 text-center">
                   <h2 className="text-xl font-bold">{t('success.title')}</h2>
-                  <p className="text-2xl font-bold text-emerald-400">{expectedReceive} {selectedAsset?.targetAsset}</p>
-                  <p className="text-sm text-muted-foreground">{t('success.sentTo')}</p>
+                  <p className="text-2xl font-bold text-emerald-400">
+                    {expectedReceive} {selectedAsset?.targetAsset}
+                  </p>
+                  <p className="text-muted-foreground text-sm">{t('success.sentTo')}</p>
                 </div>
                 <Button variant="outline" className="w-full max-w-xs" onClick={handleReset}>
                   {t('success.newTransfer')}
@@ -625,18 +711,18 @@ export default function App() {
                 key="error"
                 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"
+                className="flex flex-1 flex-col items-center justify-center gap-6 pb-20"
               >
-                <Avatar className="size-20 border border-destructive/30 bg-destructive/10">
+                <Avatar className="border-destructive/30 bg-destructive/10 size-20 border">
                   <AvatarFallback className="bg-transparent">
-                    <AlertCircle className="size-10 text-destructive" />
+                    <AlertCircle className="text-destructive size-10" />
                   </AvatarFallback>
                 </Avatar>
-                <div className="text-center space-y-2">
+                <div className="space-y-2 text-center">
                   <h2 className="text-xl font-bold">{t('error.title')}</h2>
-                  <p className="text-sm text-muted-foreground max-w-xs">{error || t('error.unknown')}</p>
+                  <p className="text-muted-foreground max-w-xs text-sm">{error || t('error.unknown')}</p>
                 </div>
-                <div className="flex gap-3 w-full max-w-xs">
+                <div className="flex w-full max-w-xs gap-3">
                   <Button variant="outline" className="flex-1" onClick={handleReset}>
                     {t('error.restart')}
                   </Button>
@@ -650,52 +736,78 @@ export default function App() {
         </main>
       </div>
     </AuroraBackground>
-  )
+  );
 }
 
-function WalletCard({ label, address, name, chain, compact, highlight }: { 
-  label: string
-  address?: string
-  name?: string
-  chain?: string
-  compact?: boolean
-  highlight?: boolean
+function WalletCard({
+  label,
+  address,
+  name,
+  chain,
+  compact,
+  highlight,
+}: {
+  label: string;
+  address?: string;
+  name?: string;
+  chain?: string;
+  compact?: boolean;
+  highlight?: boolean;
 }) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   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")}>
+      <Card className={cn('border-0', highlight ? 'bg-primary/10' : 'bg-muted/50')}>
+        <CardContent className="flex items-center gap-3 py-2">
+          <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} {chain && <Badge variant="outline" className="ml-1 text-xs">{chain}</Badge>}</CardDescription>
-            <div className="text-sm font-medium truncate">{name || truncateAddress(address)}</div>
+          <div className="min-w-0 flex-1 text-left">
+            <CardDescription className="text-xs">
+              {label}{' '}
+              {chain && (
+                <Badge variant="outline" className="ml-1 text-xs">
+                  {chain}
+                </Badge>
+              )}
+            </CardDescription>
+            <div className="truncate text-sm font-medium">{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">
+      <CardContent className="flex items-center gap-3 py-3">
+        <Avatar className="bg-primary/20 size-10">
           <AvatarFallback className="bg-transparent">
-            <Wallet className="size-5 text-primary" />
+            <Wallet className="text-primary size-5" />
           </AvatarFallback>
         </Avatar>
-        <div className="flex-1 min-w-0">
-          <CardDescription>{label} {chain && <Badge variant="outline" className="ml-1">{chain}</Badge>}</CardDescription>
-          <CardTitle className="text-base truncate">{name || t('common.unknown')}</CardTitle>
+        <div className="min-w-0 flex-1">
+          <CardDescription>
+            {label}{' '}
+            {chain && (
+              <Badge variant="outline" className="ml-1">
+                {chain}
+              </Badge>
+            )}
+          </CardDescription>
+          <CardTitle className="truncate text-base">{name || t('common.unknown')}</CardTitle>
           <CardDescription className="truncate">{address}</CardDescription>
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function AssetAvatar({ symbol, chain, size = 'md' }: { symbol: string; chain: string; size?: 'sm' | 'md' | 'lg' }) {
@@ -703,20 +815,19 @@ function AssetAvatar({ symbol, chain, size = 'md' }: { symbol: string; chain: st
     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'
-  
+  };
+  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, CHAIN_COLORS[chain] || 'bg-muted')}>
-      <AvatarFallback className="bg-transparent text-white">
-        {icons[symbol] || <Coins />}
-      </AvatarFallback>
+      <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)}`
+  if (!address) return '';
+  if (address.length <= 12) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
diff --git a/miniapps/teleport/src/index.css b/miniapps/teleport/src/index.css
index 0ccf0ed0d..3c9c4367d 100644
--- a/miniapps/teleport/src/index.css
+++ b/miniapps/teleport/src/index.css
@@ -1,5 +1,5 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -40,13 +40,17 @@
   --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%;
+      background-position:
+        50% 50%,
+        50% 50%;
     }
     to {
-      background-position: 350% 50%, 350% 50%;
+      background-position:
+        350% 50%,
+        350% 50%;
     }
   }
 }
@@ -132,7 +136,10 @@
 
 /* 移动端优化 */
 html,
-body {
+body,
+#root {
+  height: 100%;
+  width: 100%;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
@@ -143,4 +150,4 @@ input,
 textarea {
   -webkit-user-select: text;
   user-select: text;
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 3933b1209..ffbffc1d8 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,7 @@
     "tweetnacl": "^1.0.3",
     "vaul": "^1.1.2",
     "viem": "^2.43.3",
+    "wujie": "^1.0.29",
     "wujie-react": "^1.0.29",
     "yargs": "^18.0.0",
     "zod": "^4.1.13"
diff --git a/packages/create-miniapp/src/utils/inject.ts b/packages/create-miniapp/src/utils/inject.ts
index bd263970e..0a6f00d64 100644
--- a/packages/create-miniapp/src/utils/inject.ts
+++ b/packages/create-miniapp/src/utils/inject.ts
@@ -1,6 +1,6 @@
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
-import { resolve } from 'path'
-import type { FinalOptions } from '../types'
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { resolve } from 'path';
+import type { FinalOptions } from '../types';
 
 /**
  * 生成 manifest.json
@@ -29,12 +29,9 @@ export function generateManifest(projectDir: string, options: FinalOptions): voi
     themeColorFrom: '#1e40af',
     // 启动屏配置 - 自动使用 icon 和 themeColorFrom 作为背景
     ...(options.noSplash ? {} : { splashScreen: true }),
-  }
+  };
 
-  writeFileSync(
-    resolve(projectDir, 'manifest.json'),
-    JSON.stringify(manifest, null, 2)
-  )
+  writeFileSync(resolve(projectDir, 'manifest.json'), JSON.stringify(manifest, null, 2));
 }
 
 /**
@@ -76,47 +73,80 @@ export function generateOxlintConfig(projectDir: string): void {
       '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?://'],
+      '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',
-    ],
-  }
+    ignorePatterns: ['node_modules', 'dist', 'coverage', '*.config.ts', '**/*.test.ts', '**/*.test.tsx'],
+  };
 
-  writeFileSync(
-    resolve(projectDir, '.oxlintrc.json'),
-    JSON.stringify(config, null, 2)
-  )
+  writeFileSync(resolve(projectDir, '.oxlintrc.json'), JSON.stringify(config, null, 2));
 }
 
 /**
@@ -169,8 +199,8 @@ export default defineConfig({
     ],
   },
 })
-`
-  writeFileSync(resolve(projectDir, 'vitest.config.ts'), content)
+`;
+  writeFileSync(resolve(projectDir, 'vitest.config.ts'), content);
 }
 
 /**
@@ -204,45 +234,45 @@ export default defineConfig({
 
   snapshotPathTemplate: '{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
 })
-`
-  writeFileSync(resolve(projectDir, 'playwright.config.ts'), content)
+`;
+  writeFileSync(resolve(projectDir, 'playwright.config.ts'), content);
 }
 
 /**
  * 生成 src/bio.d.ts
  */
 export function generateBioTypes(projectDir: string): void {
-  const srcDir = resolve(projectDir, 'src')
+  const srcDir = resolve(projectDir, 'src');
   if (!existsSync(srcDir)) {
-    mkdirSync(srcDir, { recursive: true })
+    mkdirSync(srcDir, { recursive: true });
   }
 
   const content = `/// <reference types="@biochain/bio-sdk/types" />
-`
-  writeFileSync(resolve(srcDir, 'bio.d.ts'), content)
+`;
+  writeFileSync(resolve(srcDir, 'bio.d.ts'), content);
 }
 
 /**
  * 生成 src/test-setup.ts
  */
 export function generateTestSetup(projectDir: string): void {
-  const srcDir = resolve(projectDir, 'src')
+  const srcDir = resolve(projectDir, 'src');
   if (!existsSync(srcDir)) {
-    mkdirSync(srcDir, { recursive: true })
+    mkdirSync(srcDir, { recursive: true });
   }
 
   const content = `import '@testing-library/jest-dom/vitest'
-`
-  writeFileSync(resolve(srcDir, 'test-setup.ts'), content)
+`;
+  writeFileSync(resolve(srcDir, 'test-setup.ts'), content);
 }
 
 /**
  * 生成 e2e 目录和基础测试
  */
 export function generateE2ESetup(projectDir: string, name: string): void {
-  const e2eDir = resolve(projectDir, 'e2e')
+  const e2eDir = resolve(projectDir, 'e2e');
   if (!existsSync(e2eDir)) {
-    mkdirSync(e2eDir, { recursive: true })
+    mkdirSync(e2eDir, { recursive: true });
   }
 
   const content = `import { test, expect } from '@playwright/test'
@@ -251,50 +281,50 @@ test('${name} loads correctly', async ({ page }) => {
   await page.goto('/')
   await expect(page).toHaveTitle(/${name}/i)
 })
-`
-  writeFileSync(resolve(e2eDir, `${name}.spec.ts`), content)
+`;
+  writeFileSync(resolve(e2eDir, `${name}.spec.ts`), content);
 
-  const scriptsDir = resolve(projectDir, 'scripts')
+  const scriptsDir = resolve(projectDir, 'scripts');
   if (!existsSync(scriptsDir)) {
-    mkdirSync(scriptsDir, { recursive: true })
+    mkdirSync(scriptsDir, { recursive: true });
   }
 
   const e2eScript = `import { execSync } from 'child_process'
 
 const args = process.argv.slice(2).join(' ')
 execSync(\`playwright test \${args}\`, { stdio: 'inherit' })
-`
-  writeFileSync(resolve(scriptsDir, 'e2e.ts'), e2eScript)
+`;
+  writeFileSync(resolve(scriptsDir, 'e2e.ts'), e2eScript);
 }
 
 /**
  * 更新 package.json 添加依赖和脚本
  */
 export function updatePackageJson(projectDir: string, name: string, port: number): void {
-  const pkgPath = resolve(projectDir, 'package.json')
-  if (!existsSync(pkgPath)) return
+  const pkgPath = resolve(projectDir, 'package.json');
+  if (!existsSync(pkgPath)) return;
 
-  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
 
-  pkg.name = `@biochain/miniapp-${name}`
-  pkg.private = true
-  pkg.description = `${name} - Bio 生态小程序`
+  pkg.name = `@biochain/miniapp-${name}`;
+  pkg.private = true;
+  pkg.description = `${name} - Bio 生态小程序`;
 
   // Storybook 端口: 6007 + (port - 5184)
-  const storybookPort = 6007 + (port - 5184)
+  const storybookPort = 6007 + (port - 5184);
 
   pkg.scripts = {
     ...pkg.scripts,
-    'lint': 'oxlint .',
+    lint: 'oxlint .',
     'lint:run': 'oxlint .',
-    'typecheck': 'tsc --noEmit',
+    typecheck: 'tsc --noEmit',
     'typecheck:run': 'tsc --noEmit',
-    'test': 'vitest',
+    test: 'vitest',
     'test:run': 'vitest run --project=unit',
     'test:storybook': 'vitest run --project=storybook',
-    'storybook': `storybook dev -p ${storybookPort}`,
+    storybook: `storybook dev -p ${storybookPort}`,
     'build-storybook': 'storybook build',
-    'e2e': 'bun scripts/e2e.ts',
+    e2e: 'bun scripts/e2e.ts',
     'e2e:run': 'bun scripts/e2e.ts',
     'e2e:update': 'bun scripts/e2e.ts --update-snapshots',
     'e2e:ui': 'playwright test --ui',
@@ -302,15 +332,15 @@ export function updatePackageJson(projectDir: string, name: string, port: number
     'gen-logo': 'bun scripts/gen-logo.ts',
     'i18n:run': 'bunx @biochain/i18n-tools',
     'theme:run': 'bunx @biochain/theme-tools',
-  }
+  };
 
   pkg.dependencies = {
     ...pkg.dependencies,
     '@biochain/bio-sdk': 'workspace:*',
     '@biochain/keyapp-sdk': 'workspace:*',
-    'i18next': '^25.2.1',
+    i18next: '^25.2.1',
     'react-i18next': '^15.5.2',
-  }
+  };
 
   pkg.devDependencies = {
     ...pkg.devDependencies,
@@ -327,24 +357,24 @@ export function updatePackageJson(projectDir: string, name: string, port: number
     '@vitest/browser': '^4.0.15',
     '@vitest/browser-playwright': '^4.0.15',
     'eslint-plugin-i18next': '^6.1.3',
-    'jsdom': '^26.1.0',
-    'oxlint': '^1.32.0',
-    'playwright': '^1.57.0',
-    'sharp': '^0.34.0',
-    'storybook': '^10.1.4',
+    jsdom: '^26.1.0',
+    oxlint: '^1.32.0',
+    playwright: '^1.57.0',
+    sharp: '^0.34.0',
+    storybook: '^10.1.4',
     'vite-plugin-mkcert': '^1.17.9',
     'vite-tsconfig-paths': '^5.1.0',
-  }
+  };
 
-  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2))
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
 }
 
 /**
  * 更新 vite.config.ts 添加 miniapp 插件
  */
 export function updateViteConfig(projectDir: string, port: number): void {
-  const configPath = resolve(projectDir, 'vite.config.ts')
-  if (!existsSync(configPath)) return
+  const configPath = resolve(projectDir, 'vite.config.ts');
+  if (!existsSync(configPath)) return;
 
   const content = `import { defineConfig, type Plugin } from 'vite'
 import react from '@vitejs/plugin-react'
@@ -418,32 +448,32 @@ export default defineConfig({
     },
   },
 })
-`
-  writeFileSync(configPath, content)
+`;
+  writeFileSync(configPath, content);
 }
 
 /**
  * 更新 main.tsx 添加 bio-sdk 和 i18n 导入
  */
 export function updateMainTsx(projectDir: string): void {
-  const mainPath = resolve(projectDir, 'src/main.tsx')
-  if (!existsSync(mainPath)) return
+  const mainPath = resolve(projectDir, 'src/main.tsx');
+  if (!existsSync(mainPath)) return;
 
-  let content = readFileSync(mainPath, 'utf-8')
+  let content = readFileSync(mainPath, 'utf-8');
 
-  const imports: string[] = []
+  const imports: string[] = [];
 
   if (!content.includes('@biochain/bio-sdk')) {
-    imports.push("import '@biochain/bio-sdk'")
+    imports.push("import '@biochain/bio-sdk'");
   }
 
   if (!content.includes('./i18n')) {
-    imports.push("import './i18n'")
+    imports.push("import './i18n'");
   }
 
   if (imports.length > 0) {
-    content = imports.join('\n') + '\n' + content
-    writeFileSync(mainPath, content)
+    content = imports.join('\n') + '\n' + content;
+    writeFileSync(mainPath, content);
   }
 }
 
@@ -451,20 +481,17 @@ export function updateMainTsx(projectDir: string): void {
  * 更新 App.tsx 添加 closeSplashScreen 调用
  */
 export function updateAppTsx(projectDir: string, options: FinalOptions): void {
-  if (options.noSplash) return
+  if (options.noSplash) return;
 
-  const appPath = resolve(projectDir, 'src/App.tsx')
-  if (!existsSync(appPath)) return
+  const appPath = resolve(projectDir, 'src/App.tsx');
+  if (!existsSync(appPath)) return;
 
-  let content = readFileSync(appPath, 'utf-8')
+  let content = readFileSync(appPath, 'utf-8');
 
   // 检查是否已有 useEffect 导入
   if (!content.includes('useEffect')) {
     // 添加 useEffect 导入
-    content = content.replace(
-      /import \{ ([^}]+) \} from ['"]react['"]/,
-      "import { $1, useEffect } from 'react'"
-    )
+    content = content.replace(/import \{ ([^}]+) \} from ['"]react['"]/, "import { $1, useEffect } from 'react'");
   }
 
   // 在 App 函数开始处添加 closeSplashScreen 调用
@@ -473,27 +500,27 @@ export function updateAppTsx(projectDir: string, options: FinalOptions): void {
   useEffect(() => {
     window.bio?.request({ method: 'bio_closeSplashScreen' })
   }, [])
-`
+`;
 
   // 找到 function App 或 export default function App 并在其后插入
   if (!content.includes('closeSplashScreen')) {
     // 尝试匹配 function App() { 或 export default function App() {
-    const functionMatch = content.match(/((?:export\s+default\s+)?function\s+App\s*\([^)]*\)\s*\{)/)
+    const functionMatch = content.match(/((?:export\s+default\s+)?function\s+App\s*\([^)]*\)\s*\{)/);
     if (functionMatch) {
-      content = content.replace(functionMatch[1], functionMatch[1] + splashEffect)
+      content = content.replace(functionMatch[1], functionMatch[1] + splashEffect);
     }
   }
 
-  writeFileSync(appPath, content)
+  writeFileSync(appPath, content);
 }
 
 /**
  * 生成 i18n 国际化配置
  */
 export function generateI18nSetup(projectDir: string, name: string): void {
-  const i18nDir = resolve(projectDir, 'src/i18n')
-  const localesDir = resolve(i18nDir, 'locales')
-  mkdirSync(localesDir, { recursive: true })
+  const i18nDir = resolve(projectDir, 'src/i18n');
+  const localesDir = resolve(i18nDir, 'locales');
+  mkdirSync(localesDir, { recursive: true });
 
   // src/i18n/index.ts
   const indexContent = `import i18n from 'i18next'
@@ -545,8 +572,8 @@ i18n.use(initReactI18next).init({
 })
 
 export default i18n
-`
-  writeFileSync(resolve(i18nDir, 'index.ts'), indexContent)
+`;
+  writeFileSync(resolve(i18nDir, 'index.ts'), indexContent);
 
   // src/i18n/i18next.d.ts
   const typesContent = `import 'i18next'
@@ -560,8 +587,8 @@ declare module 'i18next' {
     }
   }
 }
-`
-  writeFileSync(resolve(i18nDir, 'i18next.d.ts'), typesContent)
+`;
+  writeFileSync(resolve(i18nDir, 'i18next.d.ts'), typesContent);
 
   // Locale files
   const enLocale = {
@@ -588,7 +615,7 @@ declare module 'i18next' {
       sdkNotInit: 'Bio SDK not initialized',
       connectionFailed: 'Connection failed',
     },
-  }
+  };
 
   const zhLocale = {
     app: {
@@ -614,9 +641,9 @@ declare module 'i18next' {
       sdkNotInit: 'Bio SDK 未初始化',
       connectionFailed: '连接失败',
     },
-  }
+  };
 
-  const zhCNLocale = { ...zhLocale }
+  const zhCNLocale = { ...zhLocale };
   const zhTWLocale = {
     app: {
       title: name,
@@ -641,12 +668,12 @@ declare module 'i18next' {
       sdkNotInit: 'Bio SDK 未初始化',
       connectionFailed: '連接失敗',
     },
-  }
+  };
 
-  writeFileSync(resolve(localesDir, 'en.json'), JSON.stringify(enLocale, null, 2))
-  writeFileSync(resolve(localesDir, 'zh.json'), JSON.stringify(zhLocale, null, 2))
-  writeFileSync(resolve(localesDir, 'zh-CN.json'), JSON.stringify(zhCNLocale, null, 2))
-  writeFileSync(resolve(localesDir, 'zh-TW.json'), JSON.stringify(zhTWLocale, null, 2))
+  writeFileSync(resolve(localesDir, 'en.json'), JSON.stringify(enLocale, null, 2));
+  writeFileSync(resolve(localesDir, 'zh.json'), JSON.stringify(zhLocale, null, 2));
+  writeFileSync(resolve(localesDir, 'zh-CN.json'), JSON.stringify(zhCNLocale, null, 2));
+  writeFileSync(resolve(localesDir, 'zh-TW.json'), JSON.stringify(zhTWLocale, null, 2));
 }
 
 /**
@@ -677,8 +704,8 @@ describe('i18n configuration', () => {
     expect(i18n.language).toBe(defaultLanguage)
   })
 })
-`
-  writeFileSync(resolve(projectDir, 'src/i18n/index.test.ts'), content)
+`;
+  writeFileSync(resolve(projectDir, 'src/i18n/index.test.ts'), content);
 }
 
 /**
@@ -715,16 +742,16 @@ describe('${name} App', () => {
     })
   })
 })
-`
-  writeFileSync(resolve(projectDir, 'src/App.test.tsx'), content)
+`;
+  writeFileSync(resolve(projectDir, 'src/App.test.tsx'), content);
 }
 
 /**
  * 生成 E2E 测试辅助工具
  */
 export function generateE2EHelpers(projectDir: string, name: string): void {
-  const helpersDir = resolve(projectDir, 'e2e/helpers')
-  mkdirSync(helpersDir, { recursive: true })
+  const helpersDir = resolve(projectDir, 'e2e/helpers');
+  mkdirSync(helpersDir, { recursive: true });
 
   const content = `/**
  * ${name} E2E 测试国际化辅助
@@ -782,16 +809,16 @@ export const mockBioSDK = \`
     isConnected: () => true,
   }
 \`
-`
-  writeFileSync(resolve(helpersDir, 'i18n.ts'), content)
+`;
+  writeFileSync(resolve(helpersDir, 'i18n.ts'), content);
 }
 
 /**
  * 生成 Logo 处理脚本
  */
 export function generateLogoScript(projectDir: string): void {
-  const scriptsDir = resolve(projectDir, 'scripts')
-  mkdirSync(scriptsDir, { recursive: true })
+  const scriptsDir = resolve(projectDir, 'scripts');
+  mkdirSync(scriptsDir, { recursive: true });
 
   const content = `import sharp from 'sharp'
 import path from 'path'
@@ -854,16 +881,16 @@ async function main() {
 }
 
 main().catch(console.error)
-`
-  writeFileSync(resolve(scriptsDir, 'gen-logo.ts'), content)
+`;
+  writeFileSync(resolve(scriptsDir, 'gen-logo.ts'), content);
 }
 
 /**
  * 更新 E2E spec 使用 helpers
  */
 export function generateE2ESpec(projectDir: string, name: string): void {
-  const e2eDir = resolve(projectDir, 'e2e')
-  mkdirSync(e2eDir, { recursive: true })
+  const e2eDir = resolve(projectDir, 'e2e');
+  mkdirSync(e2eDir, { recursive: true });
 
   const content = `import { test, expect } from '@playwright/test'
 import { UI_TEXT, mockBioSDK } from './helpers/i18n'
@@ -892,16 +919,16 @@ test.describe('${name} UI', () => {
     await expect(page).toHaveScreenshot('02-connected.png')
   })
 })
-`
-  writeFileSync(resolve(e2eDir, `${name}.spec.ts`), content)
+`;
+  writeFileSync(resolve(e2eDir, `${name}.spec.ts`), content);
 }
 
 /**
  * 生成 Storybook 配置
  */
 export function generateStorybookConfig(projectDir: string): void {
-  const storybookDir = resolve(projectDir, '.storybook')
-  mkdirSync(storybookDir, { recursive: true })
+  const storybookDir = resolve(projectDir, '.storybook');
+  mkdirSync(storybookDir, { recursive: true });
 
   // .storybook/main.ts
   const mainContent = `import type { StorybookConfig } from '@storybook/react-vite'
@@ -916,8 +943,8 @@ const config: StorybookConfig = {
 }
 
 export default config
-`
-  writeFileSync(resolve(storybookDir, 'main.ts'), mainContent)
+`;
+  writeFileSync(resolve(storybookDir, 'main.ts'), mainContent);
 
   // .storybook/preview.tsx
   const previewContent = `import type { Preview, ReactRenderer } from '@storybook/react-vite'
@@ -1025,13 +1052,13 @@ const preview: Preview = {
       const isDark = theme === 'dark'
 
       return (
-        <div className={\`min-h-screen bg-background text-foreground transition-colors \${isDark ? 'dark' : ''}\`}>
+        <div className={\`min-h-full bg-background text-foreground transition-colors \${isDark ? 'dark' : ''}\`}>
           <div
             className="mx-auto"
             dir={direction}
             style={{
               maxWidth: 428,
-              minHeight: '100vh',
+              minHeight: '100%',
             }}
           >
             <Story />
@@ -1043,8 +1070,8 @@ const preview: Preview = {
 }
 
 export default preview
-`
-  writeFileSync(resolve(storybookDir, 'preview.tsx'), previewContent)
+`;
+  writeFileSync(resolve(storybookDir, 'preview.tsx'), previewContent);
 
   // .storybook/vitest.setup.ts
   const vitestSetupContent = `import { beforeAll } from 'vitest'
@@ -1054,8 +1081,8 @@ import * as previewAnnotations from './preview'
 const annotations = setProjectAnnotations([previewAnnotations])
 
 beforeAll(annotations.beforeAll)
-`
-  writeFileSync(resolve(storybookDir, 'vitest.setup.ts'), vitestSetupContent)
+`;
+  writeFileSync(resolve(storybookDir, 'vitest.setup.ts'), vitestSetupContent);
 }
 
 /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 624407793..cd40e289b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -194,6 +194,9 @@ importers:
       viem:
         specifier: ^2.43.3
         version: 2.43.3(typescript@5.9.3)(zod@4.2.1)
+      wujie:
+        specifier: ^1.0.29
+        version: 1.0.29
       wujie-react:
         specifier: ^1.0.29
         version: 1.0.29(react@19.2.3)
diff --git a/scripts/dev.ts b/scripts/dev.ts
index a29db1d9a..e0163dab2 100644
--- a/scripts/dev.ts
+++ b/scripts/dev.ts
@@ -129,13 +129,10 @@ async function cleanup() {
 }
 
 async function main() {
-  if (!process.stdin.isTTY) {
-    console.error('\x1b[31mError: Dev Runner requires a TTY. Run directly in terminal.\x1b[0m');
-    process.exit(1);
-  }
+  const isHeadless = !process.stdin.isTTY || process.env.CI === 'true';
 
   console.clear();
-  console.log('\x1b[36mStarting Dev Runner...\x1b[0m\n');
+  console.log('\x1b[36mStarting Dev Runner...\\x1b[0m\n');
 
   for (const cmd of commands) {
     if (cmd.autoStart) {
@@ -144,6 +141,27 @@ async function main() {
     }
   }
 
+  if (isHeadless) {
+    console.log('\x1b[33mRunning in headless mode (no TTY). Press Ctrl+C to stop.\x1b[0m\n');
+
+    processManager.onOutput = (_commandId, text) => {
+      process.stdout.write(text);
+    };
+
+    await new Promise<void>((resolve) => {
+      process.on('SIGINT', async () => {
+        await cleanup();
+        resolve();
+      });
+      process.on('SIGTERM', async () => {
+        await cleanup();
+        resolve();
+      });
+    });
+
+    process.exit(0);
+  }
+
   process.stdin.setRawMode(true);
   process.stdin.resume();
   process.stdin.setEncoding('utf8');
diff --git a/scripts/vite-plugin-miniapps.ts b/scripts/vite-plugin-miniapps.ts
index 357a94ab8..7285b79bb 100644
--- a/scripts/vite-plugin-miniapps.ts
+++ b/scripts/vite-plugin-miniapps.ts
@@ -229,6 +229,7 @@ async function createMiniappServer(_id: string, root: string, port: number): Pro
     root,
     configFile: join(root, 'vite.config.ts'),
     server: {
+      cors: true,
       port,
       strictPort: true,
       https: true as any, // Type compatibility workaround
diff --git a/src/components/ecosystem/miniapp-window.tsx b/src/components/ecosystem/miniapp-window.tsx
index a18e878b5..74028104e 100644
--- a/src/components/ecosystem/miniapp-window.tsx
+++ b/src/components/ecosystem/miniapp-window.tsx
@@ -199,18 +199,19 @@ function MiniappWindowPortal({
   }, [portalHost]);
 
   useEffect(() => {
-    const iframe = presentApp?.iframeRef;
+    const containerHandle = presentApp?.containerHandle;
     const container = iframeContainerRef.current;
-    if (!iframe || !container) return;
+    if (!containerHandle || !container) return;
 
-    if (iframe.parentElement !== container) {
-      container.appendChild(iframe);
+    const element = containerHandle.element;
+    if (element.parentElement !== container) {
+      container.appendChild(element);
     }
 
-    if (iframe.style.display === 'none') {
-      iframe.style.display = '';
+    if (element.style.display === 'none') {
+      element.style.display = '';
     }
-  }, [presentApp?.iframeRef, presentApp?.appId, portalHost]);
+  }, [presentApp?.containerHandle, presentApp?.appId, portalHost]);
 
   const handleClose = useCallback(() => {
     requestDismiss(appId);
diff --git a/src/services/miniapp-runtime/__tests__/container.test.ts b/src/services/miniapp-runtime/__tests__/container.test.ts
new file mode 100644
index 000000000..0b7361712
--- /dev/null
+++ b/src/services/miniapp-runtime/__tests__/container.test.ts
@@ -0,0 +1,152 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { IframeContainerManager, cleanupAllIframeContainers } from '../container/iframe-container';
+import type { ContainerCreateOptions } from '../container/types';
+
+describe('IframeContainerManager', () => {
+  let manager: IframeContainerManager;
+  let mountTarget: HTMLDivElement;
+
+  beforeEach(() => {
+    manager = new IframeContainerManager();
+    document.body.innerHTML = '';
+    mountTarget = document.createElement('div');
+    mountTarget.id = 'test-mount-target';
+    document.body.appendChild(mountTarget);
+  });
+
+  afterEach(() => {
+    cleanupAllIframeContainers();
+  });
+
+  describe('create', () => {
+    it('should create an iframe container', async () => {
+      const options: ContainerCreateOptions = {
+        appId: 'test-app',
+        url: 'https://example.com',
+        mountTarget,
+      };
+
+      const handle = await manager.create(options);
+
+      expect(handle.type).toBe('iframe');
+      expect(handle.element).toBeInstanceOf(HTMLIFrameElement);
+      expect(handle.element.id).toBe('miniapp-iframe-test-app');
+      expect(handle.isConnected()).toBe(true);
+      expect(mountTarget.contains(handle.element)).toBe(true);
+    });
+
+    it('should append context params to URL', async () => {
+      const options: ContainerCreateOptions = {
+        appId: 'test-app',
+        url: 'https://example.com',
+        mountTarget,
+        contextParams: { foo: 'bar', baz: 'qux' },
+      };
+
+      const handle = await manager.create(options);
+      const iframe = handle.element as HTMLIFrameElement;
+
+      expect(iframe.src).toContain('foo=bar');
+      expect(iframe.src).toContain('baz=qux');
+    });
+
+    it('should call onLoad callback when iframe loads', async () => {
+      const onLoad = vi.fn();
+      const options: ContainerCreateOptions = {
+        appId: 'test-app',
+        url: 'about:blank',
+        mountTarget,
+        onLoad,
+      };
+
+      const handle = await manager.create(options);
+      const iframe = handle.element as HTMLIFrameElement;
+
+      iframe.dispatchEvent(new Event('load'));
+
+      expect(onLoad).toHaveBeenCalledTimes(1);
+    });
+
+    it('should only call onLoad once', async () => {
+      const onLoad = vi.fn();
+      const options: ContainerCreateOptions = {
+        appId: 'test-app',
+        url: 'about:blank',
+        mountTarget,
+        onLoad,
+      };
+
+      const handle = await manager.create(options);
+      const iframe = handle.element as HTMLIFrameElement;
+
+      iframe.dispatchEvent(new Event('load'));
+      iframe.dispatchEvent(new Event('load'));
+
+      expect(onLoad).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('ContainerHandle', () => {
+    it('should destroy iframe correctly', async () => {
+      const handle = await manager.create({ appId: 'test-app', url: 'about:blank', mountTarget });
+
+      expect(handle.isConnected()).toBe(true);
+
+      handle.destroy();
+
+      expect(handle.isConnected()).toBe(false);
+    });
+
+    it('should not throw when destroy called multiple times', async () => {
+      const handle = await manager.create({ appId: 'test-app', url: 'about:blank', mountTarget });
+
+      handle.destroy();
+      expect(() => handle.destroy()).not.toThrow();
+    });
+
+    it('should move to background', async () => {
+      const handle = await manager.create({ appId: 'test-app', url: 'about:blank', mountTarget });
+
+      handle.moveToBackground();
+
+      const hiddenContainer = document.getElementById('miniapp-hidden-container');
+      expect(hiddenContainer).not.toBeNull();
+      expect(hiddenContainer?.contains(handle.element)).toBe(true);
+    });
+
+    it('should move to foreground', async () => {
+      const handle = await manager.create({ appId: 'test-app', url: 'about:blank', mountTarget });
+
+      handle.moveToBackground();
+      handle.moveToForeground();
+
+      expect(mountTarget.contains(handle.element)).toBe(true);
+    });
+
+    it('should not move after destroyed', async () => {
+      const handle = await manager.create({ appId: 'test-app', url: 'about:blank', mountTarget });
+
+      handle.destroy();
+
+      expect(() => handle.moveToBackground()).not.toThrow();
+      expect(() => handle.moveToForeground()).not.toThrow();
+    });
+  });
+});
+
+describe('cleanupAllIframeContainers', () => {
+  it('should remove hidden container from DOM', async () => {
+    const manager = new IframeContainerManager();
+    const mountTarget = document.createElement('div');
+    document.body.appendChild(mountTarget);
+
+    const handle1 = await manager.create({ appId: 'app1', url: 'about:blank', mountTarget });
+    const handle2 = await manager.create({ appId: 'app2', url: 'about:blank', mountTarget });
+
+    handle1.moveToBackground();
+
+    cleanupAllIframeContainers();
+
+    expect(document.getElementById('miniapp-hidden-container')).toBeNull();
+  });
+});
diff --git a/src/services/miniapp-runtime/container/container.stories.tsx b/src/services/miniapp-runtime/container/container.stories.tsx
new file mode 100644
index 000000000..9f5c16a9d
--- /dev/null
+++ b/src/services/miniapp-runtime/container/container.stories.tsx
@@ -0,0 +1,467 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState, useRef } from 'react';
+import { within, userEvent, expect } from '@storybook/test';
+import { IframeContainerManager, cleanupAllIframeContainers } from './iframe-container';
+import { WujieContainerManager } from './wujie-container';
+import type { ContainerHandle } from './types';
+
+const meta: Meta = {
+  title: 'Services/Container',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function IframeContainerDemo() {
+  const [handle, setHandle] = useState<ContainerHandle | null>(null);
+  const [status, setStatus] = useState<string>('idle');
+  const [isBackground, setIsBackground] = useState(false);
+  const managerRef = useRef(new IframeContainerManager());
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    return () => {
+      handle?.destroy();
+      cleanupAllIframeContainers();
+    };
+  }, [handle]);
+
+  const handleCreate = async () => {
+    if (!containerRef.current) return;
+    setStatus('creating...');
+    const newHandle = await managerRef.current.create({
+      appId: `test-app-${Date.now()}`,
+      url: 'https://example.com',
+      mountTarget: containerRef.current,
+      onLoad: () => setStatus('loaded'),
+    });
+    setHandle(newHandle);
+    setStatus('created');
+  };
+
+  const handleDestroy = () => {
+    handle?.destroy();
+    setHandle(null);
+    setStatus('destroyed');
+    setIsBackground(false);
+  };
+
+  const handleBackground = () => {
+    handle?.moveToBackground();
+    setIsBackground(true);
+    setStatus('background');
+  };
+
+  const handleForeground = () => {
+    handle?.moveToForeground();
+    setIsBackground(false);
+    setStatus('foreground');
+  };
+
+  return (
+    <div className="flex h-screen flex-col gap-4 p-4">
+      <div className="flex gap-2">
+        <button
+          data-testid="btn-create"
+          onClick={handleCreate}
+          disabled={!!handle}
+          className="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Create Container
+        </button>
+        <button
+          data-testid="btn-destroy"
+          onClick={handleDestroy}
+          disabled={!handle}
+          className="rounded bg-red-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Destroy
+        </button>
+        <button
+          data-testid="btn-background"
+          onClick={handleBackground}
+          disabled={!handle || isBackground}
+          className="rounded bg-yellow-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Move to Background
+        </button>
+        <button
+          data-testid="btn-foreground"
+          onClick={handleForeground}
+          disabled={!handle || !isBackground}
+          className="rounded bg-green-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Move to Foreground
+        </button>
+      </div>
+
+      <div className="flex gap-4 text-sm">
+        <div>
+          Status:{' '}
+          <span data-testid="status" className="font-mono">
+            {status}
+          </span>
+        </div>
+        <div>
+          Connected:{' '}
+          <span data-testid="connected" className="font-mono">
+            {handle?.isConnected() ? 'yes' : 'no'}
+          </span>
+        </div>
+        <div>
+          Type:{' '}
+          <span data-testid="type" className="font-mono">
+            {handle?.type ?? 'none'}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex-1 rounded border border-gray-300 bg-gray-100 p-2">
+        <div className="mb-2 text-xs text-gray-500">Container will be mounted here</div>
+        <div ref={containerRef} className="h-full" data-testid="container-host" />
+      </div>
+    </div>
+  );
+}
+
+export const IframeContainer: Story = {
+  render: () => <IframeContainerDemo />,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Initial state', async () => {
+      expect(canvas.getByTestId('status')).toHaveTextContent('idle');
+      expect(canvas.getByTestId('connected')).toHaveTextContent('no');
+      expect(canvas.getByTestId('type')).toHaveTextContent('none');
+    });
+
+    await step('Create container', async () => {
+      await userEvent.click(canvas.getByTestId('btn-create'));
+      await new Promise((r) => setTimeout(r, 100));
+
+      expect(canvas.getByTestId('status')).toHaveTextContent('created');
+      expect(canvas.getByTestId('connected')).toHaveTextContent('yes');
+      expect(canvas.getByTestId('type')).toHaveTextContent('iframe');
+    });
+
+    await step('Move to background', async () => {
+      await userEvent.click(canvas.getByTestId('btn-background'));
+      await new Promise((r) => setTimeout(r, 100));
+
+      expect(canvas.getByTestId('status')).toHaveTextContent('background');
+    });
+
+    await step('Move to foreground', async () => {
+      await userEvent.click(canvas.getByTestId('btn-foreground'));
+      await new Promise((r) => setTimeout(r, 100));
+
+      expect(canvas.getByTestId('status')).toHaveTextContent('foreground');
+    });
+
+    await step('Destroy container', async () => {
+      await userEvent.click(canvas.getByTestId('btn-destroy'));
+      await new Promise((r) => setTimeout(r, 100));
+
+      expect(canvas.getByTestId('status')).toHaveTextContent('destroyed');
+      expect(canvas.getByTestId('connected')).toHaveTextContent('no');
+      expect(canvas.getByTestId('type')).toHaveTextContent('none');
+    });
+  },
+};
+
+function MultipleContainersDemo() {
+  const [handles, setHandles] = useState<ContainerHandle[]>([]);
+  const managerRef = useRef(new IframeContainerManager());
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    return () => {
+      handles.forEach((h) => h.destroy());
+      cleanupAllIframeContainers();
+    };
+  }, [handles]);
+
+  const handleCreate = async () => {
+    if (!containerRef.current) return;
+    const id = `app-${Date.now()}`;
+    const newHandle = await managerRef.current.create({
+      appId: id,
+      url: `https://example.com/?id=${id}`,
+      mountTarget: containerRef.current,
+    });
+    setHandles((prev) => [...prev, newHandle]);
+  };
+
+  const handleDestroyLast = () => {
+    if (handles.length === 0) return;
+    const last = handles[handles.length - 1];
+    last.destroy();
+    setHandles((prev) => prev.slice(0, -1));
+  };
+
+  const handleCleanupAll = () => {
+    handles.forEach((h) => h.destroy());
+    cleanupAllIframeContainers();
+    setHandles([]);
+  };
+
+  return (
+    <div className="flex h-screen flex-col gap-4 p-4">
+      <div className="flex gap-2">
+        <button
+          data-testid="btn-create-multi"
+          onClick={handleCreate}
+          className="rounded bg-blue-500 px-4 py-2 text-white"
+        >
+          Create Container
+        </button>
+        <button
+          data-testid="btn-destroy-last"
+          onClick={handleDestroyLast}
+          disabled={handles.length === 0}
+          className="rounded bg-red-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Destroy Last
+        </button>
+        <button
+          data-testid="btn-cleanup-all"
+          onClick={handleCleanupAll}
+          disabled={handles.length === 0}
+          className="rounded bg-gray-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Cleanup All
+        </button>
+      </div>
+
+      <div className="text-sm">
+        Active containers:{' '}
+        <span data-testid="count" className="font-mono">
+          {handles.length}
+        </span>
+      </div>
+
+      <div className="flex-1 rounded border border-gray-300 bg-gray-100 p-2">
+        <div ref={containerRef} className="h-full" data-testid="container-host-multi" />
+      </div>
+    </div>
+  );
+}
+
+export const MultipleContainers: Story = {
+  render: () => <MultipleContainersDemo />,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Create 3 containers', async () => {
+      for (let i = 0; i < 3; i++) {
+        await userEvent.click(canvas.getByTestId('btn-create-multi'));
+        await new Promise((r) => setTimeout(r, 50));
+      }
+
+      expect(canvas.getByTestId('count')).toHaveTextContent('3');
+    });
+
+    await step('Destroy last container', async () => {
+      await userEvent.click(canvas.getByTestId('btn-destroy-last'));
+      await new Promise((r) => setTimeout(r, 50));
+
+      expect(canvas.getByTestId('count')).toHaveTextContent('2');
+    });
+
+    await step('Cleanup all containers', async () => {
+      await userEvent.click(canvas.getByTestId('btn-cleanup-all'));
+      await new Promise((r) => setTimeout(r, 50));
+
+      expect(canvas.getByTestId('count')).toHaveTextContent('0');
+    });
+  },
+};
+
+function WujieContainerDemo() {
+  const [handle, setHandle] = useState<ContainerHandle | null>(null);
+  const [status, setStatus] = useState<string>('idle');
+  const [iframeInfo, setIframeInfo] = useState<string>('none');
+  const [logs, setLogs] = useState<string[]>([]);
+  const managerRef = useRef(new WujieContainerManager());
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const addLog = (msg: string) => {
+    setLogs((prev) => [...prev.slice(-9), `${new Date().toLocaleTimeString()}: ${msg}`]);
+  };
+
+  useEffect(() => {
+    return () => {
+      handle?.destroy();
+    };
+  }, [handle]);
+
+  const handleCreate = async () => {
+    if (!containerRef.current) return;
+    setStatus('creating...');
+    addLog('Creating wujie container...');
+
+    const appId = `wujie-test-${Date.now()}`;
+    try {
+      const newHandle = await managerRef.current.create({
+        appId,
+        url: window.location.origin + '/miniapps/teleport/',
+        mountTarget: containerRef.current,
+        onLoad: () => {
+          setStatus('loaded');
+          addLog('Wujie app loaded (afterMount)');
+        },
+      });
+      setHandle(newHandle);
+      setStatus('created');
+      addLog(`Container created with appId: ${appId}`);
+
+      setTimeout(() => {
+        const iframe = newHandle.getIframe();
+        if (iframe) {
+          setIframeInfo(`Found: iframe[name="${iframe.name}"]`);
+          addLog(`Iframe found: name="${iframe.name}", src="${iframe.src.slice(0, 50)}..."`);
+        } else {
+          setIframeInfo('Not found');
+          addLog('Iframe NOT found via getIframe()');
+        }
+      }, 500);
+    } catch (err) {
+      setStatus('error');
+      addLog(`Error: ${err}`);
+    }
+  };
+
+  const handleCheckIframe = () => {
+    if (!handle) return;
+    const iframe = handle.getIframe();
+    if (iframe) {
+      setIframeInfo(`Found: iframe[name="${iframe.name}"]`);
+      addLog(`Iframe check: name="${iframe.name}"`);
+      try {
+        const hasContentWindow = !!iframe.contentWindow;
+        const canAccess = hasContentWindow && typeof iframe.contentWindow.postMessage === 'function';
+        addLog(`contentWindow accessible: ${canAccess}`);
+      } catch (e) {
+        addLog(`contentWindow access error: ${e}`);
+      }
+    } else {
+      setIframeInfo('Not found');
+      addLog('Iframe NOT found');
+    }
+  };
+
+  const handleDestroy = () => {
+    handle?.destroy();
+    setHandle(null);
+    setStatus('destroyed');
+    setIframeInfo('none');
+    addLog('Container destroyed');
+  };
+
+  return (
+    <div className="flex h-screen flex-col gap-4 p-4">
+      <div className="flex gap-2">
+        <button
+          data-testid="btn-create-wujie"
+          onClick={handleCreate}
+          disabled={!!handle}
+          className="rounded bg-purple-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Create Wujie Container
+        </button>
+        <button
+          data-testid="btn-check-iframe"
+          onClick={handleCheckIframe}
+          disabled={!handle}
+          className="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Check Iframe
+        </button>
+        <button
+          data-testid="btn-destroy-wujie"
+          onClick={handleDestroy}
+          disabled={!handle}
+          className="rounded bg-red-500 px-4 py-2 text-white disabled:opacity-50"
+        >
+          Destroy
+        </button>
+      </div>
+
+      <div className="flex gap-4 text-sm">
+        <div>
+          Status:{' '}
+          <span data-testid="wujie-status" className="font-mono">
+            {status}
+          </span>
+        </div>
+        <div>
+          Type:{' '}
+          <span data-testid="wujie-type" className="font-mono">
+            {handle?.type ?? 'none'}
+          </span>
+        </div>
+        <div>
+          Iframe:{' '}
+          <span data-testid="wujie-iframe-info" className="font-mono">
+            {iframeInfo}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex flex-1 gap-4">
+        <div className="flex-1 rounded border border-gray-300 bg-gray-100 p-2">
+          <div className="mb-2 text-xs text-gray-500">Wujie Container</div>
+          <div ref={containerRef} className="h-full" data-testid="wujie-container-host" />
+        </div>
+
+        <div className="w-80 rounded border border-gray-300 bg-gray-900 p-2 text-xs text-green-400">
+          <div className="mb-2 text-gray-500">Logs</div>
+          <div data-testid="wujie-logs" className="font-mono">
+            {logs.map((log, i) => (
+              <div key={i}>{log}</div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const WujieContainer: Story = {
+  render: () => <WujieContainerDemo />,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Initial state', async () => {
+      expect(canvas.getByTestId('wujie-status')).toHaveTextContent('idle');
+      expect(canvas.getByTestId('wujie-type')).toHaveTextContent('none');
+      expect(canvas.getByTestId('wujie-iframe-info')).toHaveTextContent('none');
+    });
+
+    await step('Create wujie container', async () => {
+      await userEvent.click(canvas.getByTestId('btn-create-wujie'));
+      await new Promise((r) => setTimeout(r, 2000));
+
+      expect(canvas.getByTestId('wujie-status')).toHaveTextContent(/created|loaded/);
+      expect(canvas.getByTestId('wujie-type')).toHaveTextContent('wujie');
+    });
+
+    await step('Check iframe is accessible', async () => {
+      await userEvent.click(canvas.getByTestId('btn-check-iframe'));
+      await new Promise((r) => setTimeout(r, 500));
+
+      expect(canvas.getByTestId('wujie-iframe-info')).toHaveTextContent(/Found|iframe/);
+    });
+
+    await step('Destroy container', async () => {
+      await userEvent.click(canvas.getByTestId('btn-destroy-wujie'));
+      await new Promise((r) => setTimeout(r, 100));
+
+      expect(canvas.getByTestId('wujie-status')).toHaveTextContent('destroyed');
+      expect(canvas.getByTestId('wujie-type')).toHaveTextContent('none');
+    });
+  },
+};
diff --git a/src/services/miniapp-runtime/container/iframe-container.ts b/src/services/miniapp-runtime/container/iframe-container.ts
new file mode 100644
index 000000000..4c0cf8513
--- /dev/null
+++ b/src/services/miniapp-runtime/container/iframe-container.ts
@@ -0,0 +1,111 @@
+import type { ContainerManager, ContainerHandle, ContainerCreateOptions } from './types';
+
+const HIDDEN_CONTAINER_ID = 'miniapp-hidden-container';
+
+function getOrCreateHiddenContainer(): HTMLElement {
+  let container = document.getElementById(HIDDEN_CONTAINER_ID);
+  if (!container) {
+    container = document.createElement('div');
+    container.id = HIDDEN_CONTAINER_ID;
+    container.style.cssText = `
+      position: fixed;
+      top: -9999px;
+      left: -9999px;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      visibility: hidden;
+      pointer-events: none;
+    `;
+    document.body.appendChild(container);
+  }
+  return container;
+}
+
+class IframeContainerHandle implements ContainerHandle {
+  readonly type = 'iframe' as const;
+  readonly element: HTMLIFrameElement;
+  private destroyed = false;
+
+  constructor(
+    private iframe: HTMLIFrameElement,
+    private mountTarget: HTMLElement,
+  ) {
+    this.element = iframe;
+  }
+
+  destroy(): void {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.iframe.src = 'about:blank';
+    this.iframe.remove();
+  }
+
+  moveToBackground(): void {
+    if (this.destroyed) return;
+    const container = getOrCreateHiddenContainer();
+    container.appendChild(this.iframe);
+  }
+
+  moveToForeground(): void {
+    if (this.destroyed) return;
+    this.mountTarget.appendChild(this.iframe);
+  }
+
+  isConnected(): boolean {
+    return this.iframe.isConnected && !this.destroyed;
+  }
+
+  getIframe(): HTMLIFrameElement {
+    return this.iframe;
+  }
+}
+
+export class IframeContainerManager implements ContainerManager {
+  readonly type = 'iframe' as const;
+
+  async create(options: ContainerCreateOptions): Promise<IframeContainerHandle> {
+    const { appId, url, mountTarget, contextParams, onLoad } = options;
+
+    const iframe = document.createElement('iframe');
+    iframe.id = `miniapp-iframe-${appId}`;
+    iframe.dataset.appId = appId;
+
+    const iframeUrl = new URL(url, window.location.origin);
+    if (contextParams) {
+      Object.entries(contextParams).forEach(([key, value]) => {
+        iframeUrl.searchParams.set(key, value);
+      });
+    }
+    iframe.src = iframeUrl.toString();
+
+    if (iframe.sandbox?.add) {
+      iframe.sandbox.add('allow-scripts', 'allow-forms', 'allow-same-origin');
+    } else {
+      iframe.setAttribute('sandbox', 'allow-scripts allow-forms allow-same-origin');
+    }
+    iframe.style.cssText = `
+      width: 100%;
+      height: 100%;
+      border: none;
+      background: transparent;
+    `;
+
+    if (onLoad) {
+      iframe.addEventListener('load', onLoad, { once: true });
+    }
+
+    mountTarget.appendChild(iframe);
+
+    return new IframeContainerHandle(iframe, mountTarget);
+  }
+}
+
+export function cleanupAllIframeContainers(): void {
+  const hiddenContainer = document.getElementById(HIDDEN_CONTAINER_ID);
+
+  if (hiddenContainer) {
+    hiddenContainer.innerHTML = '';
+    hiddenContainer.remove();
+  }
+}
diff --git a/src/services/miniapp-runtime/container/index.ts b/src/services/miniapp-runtime/container/index.ts
new file mode 100644
index 000000000..d280e4dff
--- /dev/null
+++ b/src/services/miniapp-runtime/container/index.ts
@@ -0,0 +1,20 @@
+import type { ContainerType, ContainerManager, ContainerHandle, ContainerCreateOptions } from './types';
+import { IframeContainerManager, cleanupAllIframeContainers } from './iframe-container';
+import { WujieContainerManager } from './wujie-container';
+
+export type { ContainerType, ContainerManager, ContainerHandle, ContainerCreateOptions };
+export { cleanupAllIframeContainers };
+
+const managers: Record<ContainerType, ContainerManager> = {
+  iframe: new IframeContainerManager(),
+  wujie: new WujieContainerManager(),
+};
+
+export function getContainerManager(type: ContainerType): ContainerManager {
+  return managers[type];
+}
+
+export async function createContainer(type: ContainerType, options: ContainerCreateOptions): Promise<ContainerHandle> {
+  const manager = getContainerManager(type);
+  return manager.create(options);
+}
diff --git a/src/services/miniapp-runtime/container/types.ts b/src/services/miniapp-runtime/container/types.ts
new file mode 100644
index 000000000..d52d33655
--- /dev/null
+++ b/src/services/miniapp-runtime/container/types.ts
@@ -0,0 +1,24 @@
+export type ContainerType = 'iframe' | 'wujie';
+
+export interface ContainerHandle {
+  readonly type: ContainerType;
+  readonly element: HTMLElement;
+  destroy(): void;
+  moveToBackground(): void;
+  moveToForeground(): void;
+  isConnected(): boolean;
+  getIframe(): HTMLIFrameElement | null;
+}
+
+export interface ContainerCreateOptions {
+  appId: string;
+  url: string;
+  mountTarget: HTMLElement;
+  contextParams?: Record<string, string>;
+  onLoad?: () => void;
+}
+
+export interface ContainerManager {
+  readonly type: ContainerType;
+  create(options: ContainerCreateOptions): Promise<ContainerHandle>;
+}
diff --git a/src/services/miniapp-runtime/container/wujie-container.ts b/src/services/miniapp-runtime/container/wujie-container.ts
new file mode 100644
index 000000000..52a809067
--- /dev/null
+++ b/src/services/miniapp-runtime/container/wujie-container.ts
@@ -0,0 +1,124 @@
+import { startApp, destroyApp, bus } from 'wujie';
+import type { ContainerManager, ContainerHandle, ContainerCreateOptions } from './types';
+
+/**
+ * Patch document.adoptedStyleSheets to proxy to shadowRoot.adoptedStyleSheets
+ * Must be called after shadowRoot is created (e.g., in afterMount)
+ * TODO: Submit PR to wujie upstream and remove this workaround
+ */
+function patchAdoptedStyleSheets(appId: string) {
+  const iframe = document.querySelector<HTMLIFrameElement>(`iframe[name="${appId}"]`);
+  if (!iframe?.contentWindow) return;
+
+  const iframeWindow = iframe.contentWindow;
+  const sandbox = (iframeWindow as Window & { __WUJIE?: { degrade?: boolean; shadowRoot?: ShadowRoot } }).__WUJIE;
+  if (!sandbox?.shadowRoot || sandbox.degrade) return;
+
+  const { shadowRoot } = sandbox;
+  const descriptor: PropertyDescriptor = {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return shadowRoot.adoptedStyleSheets;
+    },
+    set(sheets: CSSStyleSheet[]) {
+      shadowRoot.adoptedStyleSheets = Array.isArray(sheets) ? [...sheets] : sheets;
+    },
+  };
+
+  try {
+    Object.defineProperty(
+      (iframeWindow as Window & { Document: typeof Document }).Document.prototype,
+      'adoptedStyleSheets',
+      descriptor,
+    );
+  } catch {
+    /* empty */
+  }
+
+  try {
+    Object.defineProperty(iframeWindow.document, 'adoptedStyleSheets', descriptor);
+  } catch {
+    /* empty */
+  }
+}
+
+class WujieContainerHandle implements ContainerHandle {
+  readonly type = 'wujie' as const;
+  readonly element: HTMLElement;
+  private destroyed = false;
+
+  constructor(
+    private appId: string,
+    private container: HTMLElement,
+  ) {
+    this.element = container;
+  }
+
+  destroy(): void {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    destroyApp(this.appId);
+    this.container.remove();
+  }
+
+  moveToBackground(): void {
+    if (this.destroyed) return;
+    this.container.style.visibility = 'hidden';
+    this.container.style.pointerEvents = 'none';
+  }
+
+  moveToForeground(): void {
+    if (this.destroyed) return;
+    this.container.style.visibility = 'visible';
+    this.container.style.pointerEvents = 'auto';
+  }
+
+  isConnected(): boolean {
+    return this.container.isConnected && !this.destroyed;
+  }
+
+  getIframe(): HTMLIFrameElement | null {
+    return document.querySelector(`iframe[name="${this.appId}"]`);
+  }
+}
+
+export class WujieContainerManager implements ContainerManager {
+  readonly type = 'wujie' as const;
+
+  async create(options: ContainerCreateOptions): Promise<WujieContainerHandle> {
+    const { appId, url, mountTarget, contextParams, onLoad } = options;
+
+    const container = document.createElement('div');
+    container.id = `miniapp-wujie-${appId}`;
+    // container.style.cssText = 'width: 100%; height: 100%;';
+    container.className = 'size-full *:size-full *:block *:overflow-auto';
+
+    mountTarget.appendChild(container);
+
+    const urlWithParams = new URL(url, window.location.origin);
+    if (contextParams) {
+      Object.entries(contextParams).forEach(([key, value]) => {
+        urlWithParams.searchParams.set(key, value);
+      });
+    }
+
+    await startApp({
+      name: appId,
+      url: urlWithParams.toString(),
+      el: container,
+      alive: true,
+      fiber: true,
+      sync: false,
+      afterMount: () => {
+        onLoad?.();
+      },
+    });
+
+    patchAdoptedStyleSheets(appId);
+
+    return new WujieContainerHandle(appId, container);
+  }
+}
+
+export { bus as wujieBus };
diff --git a/src/services/miniapp-runtime/iframe-manager.ts b/src/services/miniapp-runtime/iframe-manager.ts
deleted file mode 100644
index b983ad804..000000000
--- a/src/services/miniapp-runtime/iframe-manager.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * Iframe Manager
- *
- * 管理小程序 iframe 的生命周期
- * - 前台应用：正常渲染
- * - 后台应用：最多 4 个，visibility: hidden
- * - 超出限制：从 DOM 移除
- */
-
-import type { MiniappInstance } from './types'
-
-/** 最大后台 iframe 数量 */
-const MAX_BACKGROUND_IFRAMES = 4
-
-/** iframe 容器 ID */
-const IFRAME_CONTAINER_ID = 'miniapp-iframe-container'
-const HIDDEN_CONTAINER_ID = 'miniapp-hidden-container'
-
-/**
- * 获取或创建 iframe 容器
- */
-function getOrCreateContainer(id: string, hidden: boolean): HTMLElement {
-  let container = document.getElementById(id)
-  if (!container) {
-    container = document.createElement('div')
-    container.id = id
-    if (hidden) {
-      container.style.cssText = `
-        position: fixed;
-        top: -9999px;
-        left: -9999px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        visibility: hidden;
-        pointer-events: none;
-      `
-    }
-    document.body.appendChild(container)
-  }
-  return container
-}
-
-/**
- * 创建小程序 iframe
- */
-export function createIframe(
-  appId: string,
-  url: string,
-  contextParams?: Record<string, string>
-): HTMLIFrameElement {
-  const iframe = document.createElement('iframe')
-  iframe.id = `miniapp-iframe-${appId}`
-  iframe.dataset.appId = appId
-
-  // 构建带参数的 URL
-  const iframeUrl = new URL(url, window.location.origin)
-  if (contextParams) {
-    Object.entries(contextParams).forEach(([key, value]) => {
-      iframeUrl.searchParams.set(key, value)
-    })
-  }
-  iframe.src = iframeUrl.toString()
-
-  // 安全沙箱
-  iframe.sandbox.add('allow-scripts', 'allow-forms', 'allow-same-origin')
-
-  // 样式
-  iframe.style.cssText = `
-    width: 100%;
-    height: 100%;
-    border: none;
-    background: transparent;
-  `
-
-  return iframe
-}
-
-/**
- * 将 iframe 挂载到可见容器
- */
-export function mountIframeVisible(iframe: HTMLIFrameElement): void {
-  const container = getOrCreateContainer(IFRAME_CONTAINER_ID, false)
-  container.appendChild(iframe)
-}
-
-/**
- * 将 iframe 移到隐藏容器（后台）
- */
-export function moveIframeToBackground(iframe: HTMLIFrameElement): void {
-  const container = getOrCreateContainer(HIDDEN_CONTAINER_ID, true)
-  container.appendChild(iframe)
-}
-
-/**
- * 将 iframe 从隐藏容器移回可见
- */
-export function moveIframeToForeground(iframe: HTMLIFrameElement): void {
-  const container = getOrCreateContainer(IFRAME_CONTAINER_ID, false)
-  container.appendChild(iframe)
-}
-
-/**
- * 从 DOM 移除 iframe
- */
-export function removeIframe(iframe: HTMLIFrameElement): void {
-  // 先清空 src 以停止加载
-  iframe.src = 'about:blank'
-  iframe.remove()
-}
-
-/**
- * 根据 appId 查找 iframe
- */
-export function findIframe(appId: string): HTMLIFrameElement | null {
-  return document.getElementById(`miniapp-iframe-${appId}`) as HTMLIFrameElement | null
-}
-
-/**
- * 管理后台 iframe 数量
- * 超出限制时移除最旧的
- */
-export function enforceBackgroundLimit(
-  apps: Map<string, MiniappInstance>,
-  activeAppId: string | null,
-  maxBackground: number = MAX_BACKGROUND_IFRAMES
-): string[] {
-  const removedAppIds: string[] = []
-
-  // 获取所有后台应用，按最后激活时间排序
-  const backgroundApps = Array.from(apps.values())
-    .filter((app) => app.appId !== activeAppId && app.state === 'background')
-    .toSorted((a, b) => a.lastActiveAt - b.lastActiveAt)
-
-  // 移除超出限制的
-  while (backgroundApps.length > maxBackground) {
-    const oldest = backgroundApps.shift()
-    if (oldest?.iframeRef) {
-      removeIframe(oldest.iframeRef)
-      oldest.iframeRef = null
-      removedAppIds.push(oldest.appId)
-    }
-  }
-
-  return removedAppIds
-}
-
-/**
- * 清理所有 iframe
- */
-export function cleanupAllIframes(): void {
-  const visibleContainer = document.getElementById(IFRAME_CONTAINER_ID)
-  const hiddenContainer = document.getElementById(HIDDEN_CONTAINER_ID)
-
-  if (visibleContainer) {
-    visibleContainer.innerHTML = ''
-    visibleContainer.remove()
-  }
-
-  if (hiddenContainer) {
-    hiddenContainer.innerHTML = ''
-    hiddenContainer.remove()
-  }
-}
-
-/**
- * 获取当前后台 iframe 数量
- */
-export function getBackgroundIframeCount(): number {
-  const container = document.getElementById(HIDDEN_CONTAINER_ID)
-  return container?.children.length ?? 0
-}
diff --git a/src/services/miniapp-runtime/index.ts b/src/services/miniapp-runtime/index.ts
index e378ddc28..1cd4d6b41 100644
--- a/src/services/miniapp-runtime/index.ts
+++ b/src/services/miniapp-runtime/index.ts
@@ -50,15 +50,7 @@ import {
   mergeMiniappVisualConfig,
   type MiniappVisualConfigUpdate,
 } from './visual-config';
-import {
-  createIframe,
-  mountIframeVisible,
-  moveIframeToBackground,
-  moveIframeToForeground,
-  removeIframe,
-  enforceBackgroundLimit,
-  cleanupAllIframes,
-} from './iframe-manager';
+import { createContainer, cleanupAllIframeContainers, type ContainerType, type ContainerHandle } from './container';
 import type { MiniappManifest, MiniappTargetDesktop } from '../ecosystem/types';
 import { getBridge } from '../ecosystem/provider';
 import { toastService } from '../toast';
@@ -118,14 +110,56 @@ const initialState: MiniappRuntimeState = {
 
 function attachBioProvider(appId: string): void {
   const app = miniappRuntimeStore.state.apps.get(appId);
-  const iframe = app?.iframeRef;
-  if (!app || !iframe) return;
+  if (!app) return;
+
+  const iframe = app.containerHandle?.getIframe() ?? app.iframeRef;
+  if (!iframe) return;
 
   getBridge().attach(iframe, appId, app.manifest.name, app.manifest.permissions ?? []);
 }
 
-function attachBioProviderToIframe(appId: string, iframe: HTMLIFrameElement, manifest: MiniappManifest): void {
+function attachBioProviderToContainer(appId: string, handle: ContainerHandle, manifest: MiniappManifest): void {
+  const iframe = handle.getIframe();
+  if (!iframe) return;
+
   getBridge().attach(iframe, appId, manifest.name, manifest.permissions ?? []);
+  sendKeyAppContext(iframe);
+}
+
+function getCapsuleSafeAreaTop(): number {
+  const testEl = document.createElement('div');
+  testEl.style.cssText = 'position:fixed;top:env(safe-area-inset-top,0px);visibility:hidden;';
+  document.body.appendChild(testEl);
+  const safeAreaTop = testEl.offsetTop;
+  document.body.removeChild(testEl);
+
+  const capsuleTop = Math.max(safeAreaTop, 8);
+  const capsuleHeight = 32;
+  const padding = 8;
+  return capsuleTop + capsuleHeight + padding;
+}
+
+function sendKeyAppContext(iframe: HTMLIFrameElement): void {
+  const safeAreaTop = getCapsuleSafeAreaTop();
+  const colorMode = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+
+  const context = {
+    type: 'keyapp:context-update',
+    payload: {
+      theme: { colorMode },
+      env: {
+        platform: 'web',
+        safeAreaInsets: {
+          top: safeAreaTop,
+          bottom: 0,
+          left: 0,
+          right: 0,
+        },
+      },
+    },
+  };
+
+  iframe.contentWindow?.postMessage(context, '*');
 }
 
 /** Store 实例 */
@@ -336,8 +370,8 @@ function isElementRectReady(el: HTMLElement | null): boolean {
   return rect.width > 0 && rect.height > 0;
 }
 
-function isIframeReady(iframe: HTMLIFrameElement | null): boolean {
-  return !!iframe && iframe.isConnected;
+function isContainerReady(app: MiniappInstance): boolean {
+  return app.containerHandle?.isConnected() ?? false;
 }
 
 function clearSplashTimeout(appId: string): void {
@@ -429,8 +463,8 @@ function failPreparing(appId: string, message: string): void {
 
   const app = miniappRuntimeStore.state.apps.get(appId);
 
-  if (app?.iframeRef) {
-    removeIframe(app.iframeRef);
+  if (app?.containerHandle) {
+    app.containerHandle.destroy();
   }
 
   miniappRuntimeStore.setState((s) => {
@@ -504,9 +538,9 @@ function startPreparing(appId: string, targetDesktop: MiniappTargetDesktop, hasS
 
     const iconReady = isElementRectReady(getIconRef(appId));
     const slotReady = !!getDesktopAppSlotRect(targetDesktop, appId);
-    const iframeReady = isIframeReady(app.iframeRef);
+    const containerReady = isContainerReady(app);
 
-    if (iconReady && slotReady && iframeReady) {
+    if (iconReady && slotReady && containerReady) {
       cancelPreparing(appId);
       beginLaunchSequence(appId, hasSplash);
       return;
@@ -553,9 +587,8 @@ export function finalizeCloseApp(appId: string): void {
     const app = s.apps.get(appId);
     if (!app) return s;
 
-    // 移除 iframe（在动画完成后才执行）
-    if (app.iframeRef) {
-      removeIframe(app.iframeRef);
+    if (app.containerHandle) {
+      app.containerHandle.destroy();
     }
 
     const newApps = new Map(s.apps);
@@ -596,7 +629,6 @@ export function launchApp(
   const state = miniappRuntimeStore.state;
   const existingApp = state.apps.get(appId);
 
-  // 如果已存在，直接激活
   if (existingApp) {
     attachBioProvider(appId);
     const targetDesktop = existingApp.manifest.targetDesktop ?? 'stack';
@@ -611,8 +643,8 @@ export function launchApp(
   }
 
   const hasSplash = !!manifest.splashScreen;
+  const containerType: ContainerType = manifest.runtime ?? 'iframe';
 
-  // 创建新实例
   const instance: MiniappInstance = {
     appId,
     manifest,
@@ -625,27 +657,31 @@ export function launchApp(
     readiness: 'notReady',
     launchedAt: Date.now(),
     lastActiveAt: Date.now(),
+    containerType,
+    containerHandle: null,
     iframeRef: null,
     iconRef: getIconRef(appId),
   };
 
-  // 创建 iframe
-  instance.iframeRef = createIframe(appId, manifest.url, contextParams);
-
-  // 绑定 BioProvider bridge（用于 window.bio.request + 权限弹窗）
-  attachBioProviderToIframe(appId, instance.iframeRef, manifest);
-
-  // iframe load：无 splash 时作为 ready 信号；有 splash 时只记录 loaded
-  instance.iframeRef.addEventListener('load', () => {
-    updateAppProcessStatus(appId, 'loaded');
-    if (!manifest.splashScreen) {
-      readyGateOpened(appId);
+  createContainer(containerType, {
+    appId,
+    url: manifest.url,
+    mountTarget: document.body,
+    contextParams,
+    onLoad: () => {
+      updateAppProcessStatus(appId, 'loaded');
+      if (!manifest.splashScreen) {
+        readyGateOpened(appId);
+      }
+    },
+  }).then((handle) => {
+    instance.containerHandle = handle;
+    if (handle.type === 'iframe') {
+      instance.iframeRef = handle.element as HTMLIFrameElement;
     }
+    attachBioProviderToContainer(appId, handle, manifest);
   });
 
-  // 先挂到可见容器，确保 iframe 一定进入 DOM；MiniappWindow 会再把它移动到自己的容器
-  mountIframeVisible(instance.iframeRef);
-
   const targetDesktop = manifest.targetDesktop ?? 'stack';
   const presentTransition = createTransition('present', appId);
 
@@ -677,7 +713,6 @@ export function launchApp(
 
   emit({ type: 'app:launch', appId, manifest });
 
-  // 内核准备：等待 icon/slot/iframe 就绪后再进入 launching
   startPreparing(appId, targetDesktop, hasSplash);
 
   return instance;
@@ -699,20 +734,16 @@ export function activateApp(appId: string): void {
   const app = state.apps.get(appId);
   if (!app) return;
 
-  // preparing 阶段只用于资源就绪检查，不允许提前进入 active
   if (app.state === 'preparing') return;
 
-  // 当前激活的应用切换到后台
   if (state.activeAppId && state.activeAppId !== appId) {
     deactivateApp(state.activeAppId);
   }
 
-  // 如果 iframe 在后台，移到前台
-  if (app.iframeRef && app.state === 'background') {
-    moveIframeToForeground(app.iframeRef);
+  if (app.containerHandle && app.state === 'background') {
+    app.containerHandle.moveToForeground();
   }
 
-  // 更新状态
   updateAppState(appId, 'active');
 
   attachBioProvider(appId);
@@ -739,24 +770,32 @@ export function deactivateApp(appId: string): void {
 
   if (app.state === 'preparing') return;
 
-  // 移动 iframe 到后台
-  if (app.iframeRef) {
-    moveIframeToBackground(app.iframeRef);
+  if (app.containerHandle) {
+    app.containerHandle.moveToBackground();
   }
 
-  // 更新状态
   updateAppState(appId, 'background');
 
-  // 检查后台数量限制
-  enforceBackgroundLimit(
-    miniappRuntimeStore.state.apps,
-    miniappRuntimeStore.state.activeAppId,
-    state.maxBackgroundApps,
-  );
+  enforceBackgroundLimitInternal(state.maxBackgroundApps);
 
   emit({ type: 'app:deactivate', appId });
 }
 
+function enforceBackgroundLimitInternal(maxBackground: number): void {
+  const state = miniappRuntimeStore.state;
+  const backgroundApps = Array.from(state.apps.values())
+    .filter((app) => app.appId !== state.activeAppId && app.state === 'background')
+    .toSorted((a, b) => a.lastActiveAt - b.lastActiveAt);
+
+  while (backgroundApps.length > maxBackground) {
+    const oldest = backgroundApps.shift();
+    if (oldest?.containerHandle) {
+      oldest.containerHandle.destroy();
+      oldest.containerHandle = null;
+    }
+  }
+}
+
 /**
  * 关闭应用
  */
@@ -834,7 +873,7 @@ export function closeAllApps(): void {
     closeApp(appId);
     finalizeCloseApp(appId);
   });
-  cleanupAllIframes();
+  cleanupAllIframeContainers();
 }
 
 /**
diff --git a/src/services/miniapp-runtime/types.ts b/src/services/miniapp-runtime/types.ts
index 2bf97023d..61b0fe2eb 100644
--- a/src/services/miniapp-runtime/types.ts
+++ b/src/services/miniapp-runtime/types.ts
@@ -4,40 +4,40 @@
  * 小程序运行时服务的类型定义
  */
 
-import type { MiniappManifest } from '../ecosystem/types'
-import type { MiniappTargetDesktop } from '../ecosystem/types'
-import type { MiniappVisualConfig } from './visual-config'
+import type { MiniappManifest } from '../ecosystem/types';
+import type { MiniappTargetDesktop } from '../ecosystem/types';
+import type { MiniappVisualConfig } from './visual-config';
 
 /** 小程序实例状态 */
-export type MiniappState = 'preparing' | 'launching' | 'splash' | 'active' | 'background' | 'closing'
+export type MiniappState = 'preparing' | 'launching' | 'splash' | 'active' | 'background' | 'closing';
 
 /** 窗口呈现状态（系统级，可见性） */
-export type MiniappPresentationState = 'hidden' | 'presenting' | 'presented' | 'dismissing'
+export type MiniappPresentationState = 'hidden' | 'presenting' | 'presented' | 'dismissing';
 
 /** 进程/内容载体状态（iframe） */
-export type MiniappProcessStatus = 'loading' | 'loaded'
+export type MiniappProcessStatus = 'loading' | 'loaded';
 
 /** 应用就绪状态（可交互门闩） */
-export type MiniappReadinessState = 'notReady' | 'ready'
+export type MiniappReadinessState = 'notReady' | 'ready';
 
-export type MiniappTransitionKind = 'present' | 'dismiss'
+export type MiniappTransitionKind = 'present' | 'dismiss';
 
-export type MiniappTransitionStatus = 'requested' | 'inProgress' | 'completed' | 'cancelled'
+export type MiniappTransitionStatus = 'requested' | 'inProgress' | 'completed' | 'cancelled';
 
 export interface MiniappTransition {
-  id: string
-  kind: MiniappTransitionKind
-  status: MiniappTransitionStatus
-  startedAt: number
+  id: string;
+  kind: MiniappTransitionKind;
+  status: MiniappTransitionStatus;
+  startedAt: number;
 }
 
 export interface MiniappPresentation {
-  appId: string
-  desktop: MiniappTargetDesktop
-  state: MiniappPresentationState
-  zOrder: number
-  transitionId: string | null
-  transitionKind: MiniappTransitionKind | null
+  appId: string;
+  desktop: MiniappTargetDesktop;
+  state: MiniappPresentationState;
+  zOrder: number;
+  transitionId: string | null;
+  transitionKind: MiniappTransitionKind | null;
 }
 
 /** 小程序动画流（包含方向性） */
@@ -49,96 +49,90 @@ export type MiniappFlow =
   | 'backgrounding'
   | 'backgrounded'
   | 'foregrounding'
-  | 'closing'
+  | 'closing';
 
 /** 胶囊主题 */
-export type CapsuleTheme = 'auto' | 'dark' | 'light'
+export type CapsuleTheme = 'auto' | 'dark' | 'light';
 
 /**
  * 小程序可控设置（miniapp → KeyApp）
- * 
+ *
  * 通过 bio.updateContext() API 动态修改
  * 修改后会触发 app:ctx-change 事件
- * 
+ *
  * 注意：这与 KeyApp → miniapp 的 contextState 不同
  * contextState 通过 postMessage 传递 theme/locale/env/a11y 给 miniapp
  */
 export interface MiniappContext {
-  /** 
+  /**
    * 胶囊按钮主题
    * - 'auto': 跟随 KeyApp 主题（默认）
    * - 'dark': 强制深色胶囊（适合浅色背景 app）
    * - 'light': 强制浅色胶囊（适合深色背景 app）
    */
-  capsuleTheme: CapsuleTheme
+  capsuleTheme: CapsuleTheme;
 }
 
+import type { ContainerHandle, ContainerType } from './container/types';
+
 /** 小程序实例 */
 export interface MiniappInstance {
-  /** 应用 ID */
-  appId: string
-  /** 应用清单 */
-  manifest: MiniappManifest
-  /** 当前状态 */
-  state: MiniappState
-  /** 动画流状态（包含方向性） */
-  flow: MiniappFlow
-  /** 运行时上下文（可动态修改） */
-  ctx: MiniappContext
-  /** iframe 加载状态 */
-  processStatus: MiniappProcessStatus
-  /** 是否已就绪（由 iframe load 或 splash 关闭触发） */
-  readiness: MiniappReadinessState
-  /** 启动时间 */
-  launchedAt: number
-  /** 最后激活时间 */
-  lastActiveAt: number
-  /** iframe 元素引用 */
-  iframeRef: HTMLIFrameElement | null
-  /** 图标元素引用（用于 FLIP 动画） */
-  iconRef: HTMLElement | null
+  appId: string;
+  manifest: MiniappManifest;
+  state: MiniappState;
+  flow: MiniappFlow;
+  ctx: MiniappContext;
+  processStatus: MiniappProcessStatus;
+  readiness: MiniappReadinessState;
+  launchedAt: number;
+  lastActiveAt: number;
+  containerType: ContainerType;
+  containerHandle: ContainerHandle | null;
+  /** @deprecated Use containerHandle.element instead */
+  iframeRef: HTMLIFrameElement | null;
+  iconRef: HTMLElement | null;
 }
 
 /** FLIP 动画帧数据 */
 export interface FlipFrame {
   /** 元素位置和尺寸 */
-  rect: DOMRect
+  rect: DOMRect;
   /** 不透明度 */
-  opacity: number
+  opacity: number;
   /** 圆角 */
-  borderRadius: number
+  borderRadius: number;
 }
 
 /** FLIP 动画帧组 */
 export interface FlipFrames {
   /** 起始帧 */
-  first: FlipFrame
+  first: FlipFrame;
   /** 结束帧 */
-  last: FlipFrame
+  last: FlipFrame;
   /** 动画持续时间 (ms) */
-  duration: number
+  duration: number;
   /** 动画曲线 */
-  easing: string
+  easing: string;
 }
 
 /** 运行时状态 */
 export interface MiniappRuntimeState {
   /** 所有运行中的应用 */
-  apps: Map<string, MiniappInstance>
+  apps: Map<string, MiniappInstance>;
   /** miniapp 视觉配置（motion + css token） */
-  visualConfig: MiniappVisualConfig
+  visualConfig: MiniappVisualConfig;
   /** 当前交互焦点的应用 ID（兼容字段，旧逻辑仍使用） */
-  activeAppId: string | null
+  activeAppId: string | null;
   /** 当前交互焦点（多窗口架构下的正式字段） */
-  focusedAppId: string | null
+  focusedAppId: string | null;
   /** 当前呈现中的窗口集合（多窗口） */
-  presentations: Map<string, MiniappPresentation>
+  presentations: Map<string, MiniappPresentation>;
   /** z-index 递增种子 */
-  zOrderSeed: number
+  zOrderSeed: number;
   /** 是否处于层叠视图 */
-  isStackViewOpen: boolean
+  isStackViewOpen: boolean;
   /** 最大后台应用数 */
-  maxBackgroundApps: number
+  maxBackgroundApps: number;
 }
 
 /** 运行时事件 */
@@ -150,22 +144,22 @@ export type MiniappRuntimeEvent =
   | { type: 'app:state-change'; appId: string; state: MiniappState }
   | { type: 'app:ctx-change'; appId: string; ctx: MiniappContext }
   | { type: 'stack-view:open' }
-  | { type: 'stack-view:close' }
+  | { type: 'stack-view:close' };
 
 /** Slot 状态 */
-export type SlotStatus = 'ready' | 'lost'
+export type SlotStatus = 'ready' | 'lost';
 
 /** 运行时事件监听器 */
-export type MiniappRuntimeListener = (event: MiniappRuntimeEvent) => void
+export type MiniappRuntimeListener = (event: MiniappRuntimeEvent) => void;
 
 /** 动画配置 */
 export interface AnimationConfig {
   /** 启动动画持续时间 */
-  launchDuration: number
+  launchDuration: number;
   /** 关闭动画持续时间 */
-  closeDuration: number
+  closeDuration: number;
   /** iOS 动画曲线 */
-  iosEasing: string
+  iosEasing: string;
 }
 
 /** 默认动画配置 */
@@ -173,21 +167,21 @@ export const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
   launchDuration: 400,
   closeDuration: 400,
   iosEasing: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
-}
+};
 
 /** 窗口位置配置 */
 export interface WindowConfig {
   /** 窗口到屏幕边缘的边距 */
-  margin: number
+  margin: number;
   /** 窗口圆角 */
-  borderRadius: number
+  borderRadius: number;
   /** 安全区域 */
   safeAreaInsets: {
-    top: number
-    bottom: number
-    left: number
-    right: number
-  }
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
 }
 
 /** 默认窗口配置 */
@@ -195,4 +189,4 @@ export const DEFAULT_WINDOW_CONFIG: WindowConfig = {
   margin: 0,
   borderRadius: 0,
   safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
-}
+};
diff --git a/vite.config.ts b/vite.config.ts
index f75e81865..c2a544097 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -97,7 +97,7 @@ export default defineConfig(({ mode }) => {
           {
             metadataUrl: 'https://iweb.xin/rwahub.bfmeta.com.miniapp/metadata.json',
             dirName: 'rwa-hub',
-            server: { runtime: 'iframe' },
+            server: { runtime: 'wujie' },
             build: {
               runtime: 'wujie',
               rewriteBase: true,
@@ -109,12 +109,12 @@ export default defineConfig(({ mode }) => {
       }),
       miniappsPlugin({
         apps: {
-          'com.bfmeta.teleport': {
+          'xin.dweb.teleport': {
             server: 'iframe',
             build: 'wujie',
           },
-          'com.bfmeta.forge': {
-            server: 'iframe',
+          'xin.dweb.biobridge': {
+            server: 'wujie',
             build: 'wujie',
           },
         },